RSS Feed

Javascript foreach

15.05.2009 by naden

Wer die faule und praktische Funktion foreach in vermisst und nicht umbedingt eine große Bibliothek wie o.ä. laden möchte, dem sei mit dieser Implementierung geholfen.

Javascript foreach für Arrays

1
2
3
4
5
Array.prototype.foreach = function( callback ) {
  for( var k=0; k<this .length; k++ ) {
    callback( k, this[ k ] );
  }
}

Beispiele

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var a = [ 'a', 'b', 'c', 'd' ];
a.foreach( function( k, v ) {
  document.writeln( k + ' ' + v );
});
 
// dieser Aufruf machte im Firefox 3 aus unerfindlichen Gründen Probleme
['a', 'b', 'c', 'd'].foreach( function( k, v ) {
  document.writeln( k + ' ' + v );
});
 
// so mag es auch der Firefox 3
;['a', 'b', 'c', 'd'].foreach( function( k, v ) {
  document.writeln( k + ' ' + v );
});

Javascript foreach für Objekte

1
2
3
4
5
6
7
Object.prototype.foreach = function( callback ) {
  for( var k in this ) {
    if(this.hasOwnProperty(k)) {
     callback( k, this[ k ] );
    }
  }
}

Beispiele

1
2
3
4
5
6
7
8
var o = {
  title:'red',
  body:'yellow'
};
 
o.foreach( function( k, v ) {
  document.writeln( k + ' ' + v );
});

Wer sowieso schon jQuery nutz, der kann sich den obigen Zauber sparen und auf die Funktion $.each setzen.

Teile diesen Beitrag

Folge mir

TwitterGoogle+XingFacebookRSS-Feed

Ähnliche Beiträge


15 Kommentare »

  1. Andy sagt:

    Also…
    ich arbeite eigentlich schon seit Jahren ab und an mit JS und mir ist noch nie aufgefallen, daß es kein “foreach” in JS gibt :-)
    Danke für die Infos/workaround!

  2. naden sagt:

    Die Funktion ist ja auch nicht wirklich notwendig, aber praktisch.

  3. Du greifst auf ein eine Prototype Methode zurück … siehe:
    “Array.prototype.foreach…..” und schreibst in deinem Text:
    “nicht umbedingt eine große Bibliothek wie jQuery o.ä. laden möchte”

    Das passt nicht so ganz zusammen, denn Prototype hat ja glaube um die 124kB und jQuery oder Mootools gerade mal 16 bzw. 18kB.

    Also ist meiner Meinung nach die Nutzung von jQuery Prototype vorzuziehen.

    LG Chris

  4. admin sagt:

    @Christian, du verwechselst da etwas. Die Bibliothek prototype hat überhaupt nix mit dem prototype in meinem Snippet zu tun. Am besten du experimentiert mal etwas damit rum, dann siehst du es selber. Als Stichwort für deine Recherche: “Prototypenbasierte Programmierung”

  5. tim sagt:

    sehrschöner artikel

  6. s0urce sagt:

    Hi, mal so eine Sache, wieso ne andere Version für Objekte? Deine erste tuts doch genauso. :) Aber ansonsten sehr schön.

  7. s0urce sagt:

    Ups, jetzt hab ich mich vertan, die 2te tuts für beides, so rum.:)
    Und ein “hasOwnProperty” wäre an der Stelle noch net.

  8. naden sagt:

    @s0urce, die Funktion iteriert nur über ihre eigenen Properties (this). Es kann also nicht zu einem undefinierten Zugriff kommen. Wie würdest du nun sinnvoll “hasOwnProperty” nutzen wollen?

  9. s0urce sagt:

    Array.prototype.foreach=function(cb) {
    for(var k in this)
    if(this.hasOwnProperty(k))
    cb(k,this[k]);
    }

  10. naden sagt:

    ok, if( typeof this[ k ] != ‘function’ ) tut es zwar auch, aber warum nicht vorhandene Methoden nutzen.

  11. Zeneca sagt:

    cool, hat auch einwandfrei funktioniert …mit dem FF
    jetzt wollte ich meine Seite mal mit dem IE(9) anschauen
    und da heißt es:
    SCRIPT438: Das Objekt unterstützt die Eigenschaft oder Methode “foreach” nicht

    muß ich prototyp beim IE irgendwo definieren oder hat jemand sonst eine gute Idee?

    besten Dank im Vorraus
    ZEN

  12. naden sagt:

    Poste mal einen Testlink, damit man sich das ganze “in the wild” anschauen kann.

  13. Jürgen sagt:

    … und so schön unnötig: Wie wär’s statt dessen einfach mit
    var myArray = ['a', 'b', 'c', 'd']

    for (var entry in myArray){
    doSomething(entry);
    }

    oder habe ich da irgendwas nicht verstanden?

    Beste Grüße,
    Jürgen

  14. soletan sagt:

    @Jürgen: eine Alternative, aber unnötig komplex im Code, in deinem Fall vermutlich auch fehlerhaft, da entry in deinem Fall nicht über die Werte des Arrays iteriert, sondern über die Indizes, also der Reihe nach 0, 1, 2, 3 ist. Insofern müsste man “doSomething(myArray[entry])” schreiben.

    @naden Die Methode foreach ist durchaus mehr als nur “praktisch”, da sie nicht nur durch die kürzere Notation zur Lesbarkeit von Code beiträgt und klarer signalisiert, was eigentlich gemacht wird, also das Wozu anstelle des Wie hervorhebt. Das Beispiel von Jürgen könnte man sehr verknappen:

    ['a','b','c','d'].foreach( doSomething );

    Wäre sie nur praktisch, weil man auch normal per for-Schleife iterieren kann, dann bräuchte man auch kein for, sondern könnte eine while-Schleife nutzen. Man könnte aber auch auf while verzichten und auf ein (zum Glück in JS nicht nutzbares) konditionales goto setzen. Und am Ende schreiben wir am besten Prozessor-Opcodes, anstatt solche “Makros” zu verwenden. ;)

  15. Michae sagt:

    Hallo. Also ich finde den Artikel ganz nett, denn er veranschaulicht neben dieser Art der ForEach-Schleife auch die Nutzung einer Callback-Methode.. Viele Grüße, Michael

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>