Prototype each(), IE und null

Bei der Arbeit mit JavaScript kommt man irgendwann in die Situation durch ein Array zu iterieren. Dabei nutzt man nicht immer einfach indizierte Arrays, sondern oft auch Arrays mit Lücken in den Indizes oder sogar assoziative Arrays. Diese letzten Varianten kann man eigentlich genauso durchlaufen, wie die erste, wenn da nicht der IE wäre. Der IE hat Probleme mit Lücken in Arrays. Wie man im folgenden Listing sehen kann, gibt es beim Firefox fast die erwartbaren Ergebnisse. Nur fast. Denn beim ersten Output stimmen die Indizes nicht. Das gleiche Problem hat man jedoch auch beim IE. [lang=js] var ar1 = new Array(); ar1[2] = 'A'; ar1[13] = 'B'; ar1[23] = 'C'; var out = ''; ar1 = ar1.compact(); ar1.each(function(item, index) { out += index + ': ' + item + ', '; }); // => out = 0: A, 1: B, 2: C, out = ''; for(i in ar1) { if( (typeof ar1[i]) != 'function' ) out += i + ': ' + ar1[i] + ', '; } // => out = 2: A, 13: B, 23: C, var ar2 = { a: 'Part_1', b: 'Part_2', sum: 'Part_1_2' }; out = ''; for(a in ar2) { out += a + ': ' + ar2[a] + ', '; } // => out = a: Part_1, b: Part_2, sum: Part_1_2, [/lang]

Der IE gibt folgendes aus: [lang] // 1.output: 0: undefined, 1: undefined, 2: A, 3: undefined, 4: undefined, 5: undefined, 6: undefined, 7: undefined, 8: undefined, 9: undefined, 10: undefined, 11: undefined, 12: undefined, 13: B, 14: undefined, 15: undefined, 16: undefined, 17: undefined, 18: undefined, 19: undefined, 20: undefined, 21: undefined, 22: undefined, 23: C,

// 2.output: 2: A, 13: B, 23: C, // 3.output: a: Part_1, b: Part_2, sum: Part_1_2, [/lang]

Wie man beim 1. Output sehen kann, werden die Lücken mit angezeigt. Dies kann man verhindern, in dem man das Array zusammenfasst und das geht z.B. mit der Prototype Funktion Array.compact(). Also ein [lang=js] ar1 = ar1.compact(); [/lang] hilft hier.

Bei der zweiten Variante werden die korrekten Indizes beibehalten. Hier muss man jedoch bedenken, dass man durch das ganze JavaScript Object iteriert und einem meistens die Funktionen nicht interessieren.

Und das letzte Beispiel zeigt, dass dies auch bei einem eigenen Objekt funktioniert. Auch dort sollte man Funktions-Filter einbauen, wenn erwünscht.

Links: [1] http://www.prototypejs.org/api/array/compact