Durchlaufen Sie ein Array in JavaScript
In Java können Sie eine for-Schleife verwenden, um Objekte in einem Array wie folgt zu durchlaufen:
String[] myStringArray = {"Hello", "World"};
for (String s : myStringArray)
{
// Do something
}
Können Sie dasselbe in JavaScript tun?
Verwenden Sie eine sequentielle for-Schleife:
var myStringArray = ["Hello","World"];
var arrayLength = myStringArray.length;
for (var i = 0; i < arrayLength; i++) {
console.log(myStringArray[i]);
//Do something
}@zipcodeman schlägt die Verwendung der for...in-Anweisung vor, aber für das Durchlaufen von Arrays sollte for-in vermieden werden. Diese Anweisung soll enumerate -Objekteigenschaften bedeuten.
Es sollte nicht für Array-ähnliche Objekte verwendet werden, weil:
- Die Reihenfolge der Iteration ist nicht garantiert, die Array-Indizes dürfen nicht in numerischer Reihenfolge besucht werden.
- Geerbte Eigenschaften werden ebenfalls aufgelistet.
Der zweite Punkt ist, dass dies zu vielen Problemen führen kann. Wenn Sie beispielsweise das Array.prototype-Objekt erweitern, um dort eine Methode einzuschließen, wird diese Eigenschaft auch aufgelistet.
Zum Beispiel:
Array.prototype.foo = "foo!";
var array = ['a', 'b', 'c'];
for (var i in array) {
console.log(array[i]);
}Der obige Code wird "a", "b", "c" und "foo!".
Dies ist insbesondere dann ein Problem, wenn Sie eine Bibliothek verwenden, die stark auf der Erweiterung der Prototypen basiert (z. B. MooTools).
Die for-in-Anweisung, wie ich zuvor sagte, ist für Aufzählung-Objekteigenschaften zuständig, zum Beispiel:
var obj = {
"a": 1,
"b": 2,
"c": 3
};
for (var prop in obj) {
if (obj.hasOwnProperty(prop)) {
// or if (Object.prototype.hasOwnProperty.call(obj,prop)) for safety...
console.log("prop: " + prop + " value: " + obj[prop])
}
}Im obigen Beispiel können Sie mit der hasOwnProperty-Methode nur Eigene Eigenschaften auflisten, nur die Eigenschaften, die das Objekt physisch besitzt, keine geerbten Eigenschaften.
Ich würde empfehlen, den folgenden Artikel zu lesen:
Ja, vorausgesetzt, Ihre Implementierung enthält die for...of-Funktion, die in ECMAScript 2015 (die "Harmony" -Version) eingeführt wurde ... was heutzutage eine ziemlich sichere Annahme ist.
Es funktioniert so:
// REQUIRES ECMASCRIPT 2015+
var s, myStringArray = ["Hello", "World"];
for (s of myStringArray) {
// ... do something with s ...
}
Oder noch besser, da ECMAScript 2015 auch Variablen mit Blockbereich über let und const bereitstellt:
// REQUIRES ECMASCRIPT 2015+
const myStringArray = ["Hello", "World"];
for (const s of myStringArray) {
// ... do something with s ...
}
// s is no longer defined here
Einige JavaScript-Entwickler arbeiten jedoch immer noch in einer Umgebung, die noch nicht vorhanden ist. Dies gilt insbesondere für das Schreiben von Code, der in Webbrowsern ausgeführt wird. Die Website-Entwickler können sich oft nicht sicher sein, welchen Browser bzw. welche Version ihre Clients verwenden werden.
Wenn Sie davon ausgehen können, dass der JavaScript-Interpreter mit der previous Edition der ECMAScript-Spezifikation kompatibel ist (was beispielsweise Versionen von Internet Explorer vor 9 ausschließt), können Sie die Iterator-Methode forEach anstelle einer Schleife verwenden. In diesem Fall übergeben Sie eine Funktion, die für jedes Element im Array aufgerufen werden soll:
var myStringArray = [ "Hello", "World" ];
myStringArray.forEach( function(s) {
// ... do something with s ...
} );
Aber selbst wenn das zu viel ist, um davon auszugehen, und Sie möchten etwas, das in all - Versionen von JavaScript funktioniert, müssen Sie eine explizite Zählschleife verwenden. Die sicherste Version, die mit spärlichen Arrays richtig umgehen kann, sieht etwa so aus:
var i, s, myStringArray = [ "Hello", "World" ], len = myStringArray.length;
for (i=0; i<len; ++i) {
if (i in myStringArray) {
s = myStringArray[i];
// ... do something with s ...
}
}
Das Zuweisen des Längenwerts zu der lokalen Variablen (im Gegensatz zum Einschließen des vollständigen myStringArray.length-Ausdrucks in die Schleifenbedingung) kann sich erheblich auf die Leistung auswirken, da bei jedem Durchlauf eine Eigenschaftssuche übersprungen wird. Wenn Sie Rhino auf meinem Computer verwenden, beträgt die Beschleunigung 43%.
Die Länge der Zwischenspeicherung wird häufig in der Loop-Initialisierungsklausel wie folgt angezeigt:
var i, len, myStringArray = [ "Hello", "World" ];
for (len = myStringArray.length, i=0; i<len; ++i) {
Die von anderen erwähnte for...in-Syntax dient zum Durchlaufen der Eigenschaften eines Objekts. Da ein Array in JavaScript nur ein Objekt mit numerischen Eigenschaftsnamen (und einer automatisch aktualisierten length-Eigenschaft) ist, können Sie theoretisch ein Array damit durchlaufen. Das Problem ist jedoch, dass es sich nicht auf die numerischen Eigenschaftswerte beschränkt (denken Sie daran, dass selbst Methoden eigentlich nur Eigenschaften sind, deren Wert eine Schließung ist), noch durchläuft es diese in numerischer Reihenfolge. Daher sollte die for...in-Syntax not für das Durchlaufen von Arrays verwendet werden.
Sie können map verwenden, eine funktionale Programmiertechnik, die auch in anderen Sprachen wie Python und Haskell verfügbar ist.
[1,2,3,4].map( function(item) {
alert(item);
})
Die allgemeine Syntax lautet:
array.map(func)
Im Allgemeinen würde func einen Parameter benötigen, der ein Element des Arrays ist. Im Falle von JavaScript kann es jedoch einen zweiten Parameter, der den Index des Elements, und einen dritten Parameter, der das Array selbst ist, benötigen.
Der Rückgabewert von array.map ist ein anderes Array. Sie können es also folgendermaßen verwenden:
var x = [1,2,3,4].map( function(item) {return item * 10;});
Und jetzt ist x [10,20,30,40].
Sie müssen die Funktion nicht inline schreiben. Es könnte sich um eine separate Funktion handeln.
var item_processor = function(item) {
// Do something complicated to an item
}
new_list = my_list.map(item_processor);
was wäre irgendwie gleichbedeutend mit:
for (item in my_list) {item_processor(item);}
Außer dass Sie den new_list nicht erhalten.
In JavaScript ist es nicht ratsam, ein Array mit einer for-in-Schleife zu durchlaufen, aber es ist besser, eine for-Schleife wie die folgende zu verwenden:
for(var i=0, len=myArray.length; i < len; i++){}
Es ist auch optimiert ("Caching" der Array-Länge). Wenn Sie mehr erfahren möchten, lesen Sie meinen Beitrag zum Thema .
für (var s von myStringArray) {
(Direkte Antwort auf deine Frage: Jetzt kannst du!)
Die meisten anderen Antworten sind richtig, aber sie erwähnen (zum Zeitpunkt der Veröffentlichung) das ECMA-Skript) nicht 6 2015 bringt einen neuen Mechanismus für die Iteration, die for..of -Schleife.
Diese neue Syntax ist die eleganteste Methode, ein Array in Javascript zu durchlaufen (sofern Sie keinen Iterationsindex benötigen), wird jedoch von den Browsern noch nicht weitgehend unterstützt.
Es funktioniert derzeit mit Firefox 13+, Chrome 37+ und nicht nativ mit anderen Browsern (siehe Browserkompatibilität unten). Glücklicherweise haben wir JS-Compiler (wie Babel ), mit denen wir heute die Funktionen der nächsten Generation nutzen können.
Es funktioniert auch auf Node (ich habe es in Version 0.12.0 getestet).
Iteration eines Arrays
// You could also use "let" instead of "var" for block scope.
for (var letter of ["a", "b", "c"]) {
console.log(letter);
}
Iteration eines Arrays von Objekten
var band = [
{firstName : 'John', lastName: 'Lennon'},
{firstName : 'Paul', lastName: 'McCartney'}
];
for(var member of band){
console.log(member.firstName + ' ' + member.lastName);
}
Iteration eines Generators:
Beispiel extrahiert aus https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of )
function* fibonacci() { // a generator function
let [prev, curr] = [1, 1];
while (true) {
[prev, curr] = [curr, prev + curr];
yield curr;
}
}
for (let n of fibonacci()) {
console.log(n);
// truncate the sequence at 1000
if (n >= 1000) {
break;
}
}
Kompatibilitätstabelle:http://kangax.github.io/es5-compat-table/es6/#For..of für Schleifen
Spec:http://wiki.ecmascript.org/doku.php?id=harmony:iterators
}
Opera, Safari, Firefox und Chrome verfügen jetzt über eine Reihe verbesserter Array-Methoden zur Optimierung vieler gängiger Schleifen.
Sie benötigen möglicherweise nicht alle, aber sie können sehr nützlich sein oder wären, wenn sie von jedem Browser unterstützt würden.
Mozilla Labs hat die Algorithmen veröffentlicht, die sie und WebKit beide verwenden, sodass Sie sie selbst hinzufügen können.
filter gibt ein Array von Elementen zurück, die bestimmte Bedingungen oder Tests erfüllen.
every gibt true zurück, wenn jedes Arraymitglied den Test besteht.
some gibt true zurück, wenn einer den Test besteht.
forEach führt eine Funktion auf jedem Arraymitglied aus und gibt nichts zurück.
map ist wie forEach, gibt jedoch ein Array der Ergebnisse der Operation für jedes Element zurück.
Alle diese Methoden benötigen eine Funktion für das erste Argument und ein optionales zweites Argument. Hierbei handelt es sich um ein Objekt, dessen Gültigkeitsbereich Sie den Array-Mitgliedern beim Durchlaufen der Funktion auferlegen möchten.
Ignoriere es, bis du es brauchst.
indexOf und lastIndexOf finden die geeignete Position des ersten oder letzten Elements, das genau zu seinem Argument passt.
(function(){
var p, ap= Array.prototype, p2={
filter: function(fun, scope){
var L= this.length, A= [], i= 0, val;
if(typeof fun== 'function'){
while(i< L){
if(i in this){
val= this[i];
if(fun.call(scope, val, i, this)){
A[A.length]= val;
}
}
++i;
}
}
return A;
},
every: function(fun, scope){
var L= this.length, i= 0;
if(typeof fun== 'function'){
while(i<L){
if(i in this && !fun.call(scope, this[i], i, this))
return false;
++i;
}
return true;
}
return null;
},
forEach: function(fun, scope){
var L= this.length, i= 0;
if(typeof fun== 'function'){
while(i< L){
if(i in this){
fun.call(scope, this[i], i, this);
}
++i;
}
}
return this;
},
indexOf: function(what, i){
i= i || 0;
var L= this.length;
while(i< L){
if(this[i]=== what)
return i;
++i;
}
return -1;
},
lastIndexOf: function(what, i){
var L= this.length;
i= i || L-1;
if(isNaN(i) || i>= L)
i= L-1;
else
if(i< 0) i += L;
while(i> -1){
if(this[i]=== what)
return i;
--i;
}
return -1;
},
map: function(fun, scope){
var L= this.length, A= Array(this.length), i= 0, val;
if(typeof fun== 'function'){
while(i< L){
if(i in this){
A[i]= fun.call(scope, this[i], i, this);
}
++i;
}
return A;
}
},
some: function(fun, scope){
var i= 0, L= this.length;
if(typeof fun== 'function'){
while(i<L){
if(i in this && fun.call(scope, this[i], i, this))
return true;
++i;
}
return false;
}
}
}
for(p in p2){
if(!ap[p])
ap[p]= p2[p];
}
return true;
})();
Verwenden Sie die while-Schleife ...
var i=0, item, items = ['one','two','three'];
while(item = items[i++]){
console.log(item);
}
protokolle: 'Eins', 'Zwei', 'Drei'
Und für die umgekehrte Reihenfolge eine noch effizientere Schleife
var items = ['one','two','three'], i = items.length;
while(i--){
console.log(items[i]);
}
protokolle: 'drei', 'zwei', 'eins'
Oder die klassische for-Schleife
var items = ['one','two','three']
for(var i=0, l = items.length; i < l; i++){
console.log(items[i]);
}
protokolle: 'Eins', 'Zwei', 'Drei'
Referenz: http://www.sitepoint.com/google-closure-how-not-to-write-javascript/
Intro
Seit meiner College-Zeit programmiere ich in Java, JavaScript, Pascal, [~ # ~] abap [~ # ~] , PHP, Progress 4GL, C/C++ und möglicherweise a Einige andere Sprachen, an die ich im Moment nicht denken kann.
Obwohl sie alle ihre eigenen sprachlichen Besonderheiten haben, teilt jede dieser Sprachen viele der gleichen Grundkonzepte. Solche Konzepte umfassen Prozeduren/Funktionen, IF -Anweisungen, FOR-Schleifen und WHILE-Schleifen.
Eine traditionelle for- Schleife
Eine traditionelle for -Schleife besteht aus drei Komponenten:
- Die Initialisierung: wird ausgeführt, bevor der Look-Block zum ersten Mal ausgeführt wird
- Die Bedingung: prüft jedes Mal eine Bedingung, bevor der Schleifenblock ausgeführt wird, und beendet die Schleife, wenn sie falsch ist
- Der nachträgliche Gedanke: wird jedes Mal ausgeführt, nachdem der Schleifenblock ausgeführt wurde
Diese drei Komponenten sind durch ein ; - Symbol voneinander getrennt. Der Inhalt für jede dieser drei Komponenten ist optional. Dies bedeutet, dass die folgende for -Schleife so minimal wie möglich ist:
for (;;) {
// Do stuff
}
Natürlich müssen Sie eine if(condition === true) { break; } oder eine if(condition === true) { return; } irgendwo in diese for-Schleife einfügen, damit sie nicht mehr ausgeführt wird.
Normalerweise wird die Initialisierung verwendet, um einen Index zu deklarieren, die Bedingung wird verwendet, um diesen Index mit einem minimalen oder maximalen Wert zu vergleichen, und der nachträgliche Gedanke wird verwendet, um den Index zu erhöhen:
for (var i = 0, length = 10; i < length; i++) {
console.log(i);
}
Verwenden einer herkömmlichen for -Schleife zum Durchlaufen eines Arrays
Die herkömmliche Methode zum Durchlaufen eines Arrays lautet wie folgt:
for (var i = 0, length = myArray.length; i < length; i++) {
console.log(myArray[i]);
}
Oder, wenn Sie es vorziehen, rückwärts zu schleifen, tun Sie dies:
for (var i = myArray.length - 1; i > -1; i--) {
console.log(myArray[i]);
}
Es sind jedoch viele Variationen möglich, wie zum Beispiel diese:
for (var key = 0, value = myArray[key], length = myArray.length; key < length; value = myArray[++key]) {
console.log(value);
}
... oder dieses ...
var i = 0, length = myArray.length;
for (; i < length;) {
console.log(myArray[i]);
i++;
}
... oder dieses:
var key = 0, value;
for (; value = myArray[key++];){
console.log(value);
}
Was am besten funktioniert, hängt hauptsächlich vom persönlichen Geschmack und dem konkreten Anwendungsfall ab, den Sie implementieren.
Beachten Sie, dass jede dieser Varianten von allen Browsern unterstützt wird, auch von sehr, sehr alten!
Eine while Schleife
Eine Alternative zu einer for Schleife ist eine while Schleife. So durchlaufen Sie ein Array:
var key = 0;
while(value = myArray[key++]){
console.log(value);
}
Wie herkömmliche for-Schleifen werden while-Schleifen auch von den ältesten Browsern unterstützt.
Beachten Sie außerdem, dass jede while-Schleife als for-Schleife umgeschrieben werden kann. Zum Beispiel verhält sich die while -Schleife genau so wie diese for- -Schleife:
for(var key = 0; value = myArray[key++];){
console.log(value);
}
For...in Und for...of
In JavaScript können Sie dies auch tun:
for (i in myArray) {
console.log(myArray[i]);
}
Dies sollte jedoch mit Vorsicht angewendet werden, da es sich nicht in allen Fällen wie eine herkömmliche for -Schleife verhält und potenzielle Nebenwirkungen berücksichtigt werden müssen. Siehe Warum ist die Verwendung von "for ... in" mit Array-Iteration eine schlechte Idee? für weitere Details.
Alternativ zu for...in gibt es jetzt auch für for...of . Das folgende Beispiel zeigt den Unterschied zwischen einer for...of - und einer for...in - Schleife:
var myArray = [3, 5, 7];
myArray.foo = "hello";
for (var i in myArray) {
console.log(i); // logs 0, 1, 2, "foo"
}
for (var i of myArray) {
console.log(i); // logs 3, 5, 7
}
Darüber hinaus müssen Sie berücksichtigen, dass keine Version von Internet Explorer for...of ( Edge 12 + unterstützt ) und dass for...in mindestens Internet Explorer 10 benötigt.
Array.prototype.forEach()
Eine Alternative zu for- Schleifen ist Array.prototype.forEach() , das verwendet die folgende Syntax:
myArray.forEach(function(value, key, myArray) {
console.log(value);
});
Array.prototype.forEach() wird von allen modernen Browsern sowie von Internet Explorer 9 und höher unterstützt.
Bibliotheken
Schließlich haben viele Dienstprogrammbibliotheken auch ihre eigene Variation foreach. AFAIK, die drei beliebtesten sind diese:
jQuery.each() , in jQuery :
$.each(myArray, function(key, value) {
console.log(value);
});
_.each() , in Underscore.js :
_.each(myArray, function(value, key, myArray) {
console.log(value);
});
_.forEach() , in Lodash.js :
_.forEach(myArray, function(value, key) {
console.log(value);
});
Wenn Sie einen schnellen Weg zum Schreiben einer schnellen Schleife und wünschen, können Sie in umgekehrter Reihenfolge durchlaufen:
for (var i=myArray.length;i--;){
var item=myArray[i];
}
Dies hat den Vorteil, dass die Länge zwischengespeichert wird (ähnlich wie for (var i=0, len=myArray.length; i<len; ++i) und anders als for (var i=0; i<myArray.length; ++i)), während weniger Zeichen eingegeben werden müssen.
Es gibt sogar Situationen, in denen Sie in umgekehrter Reihenfolge durchlaufen müssen, z. B. wenn Sie über eine live NodeList durchlaufen, wenn Sie planen, Elemente während der Iteration aus dem DOM zu entfernen.
Einige Anwendungsfälle des Durchlaufens eines Arrays in der funktionalen Programmierweise in JavaScript:
1. Schleifen Sie einfach durch ein Array
const myArray = [{x:100}, {x:200}, {x:300}];
myArray.forEach((element, index, array) => {
console.log(element.x); // 100, 200, 300
console.log(index); // 0, 1, 2
console.log(array); // same myArray object 3 times
});
Anmerkung: Array.prototype.forEach () ist streng genommen keine Funktion, da die als Eingabeparameter verwendete Funktion keinen Wert zurückgeben soll, der daher nicht als reine Funktion betrachtet werden kann.
2. Prüfen Sie, ob eines der Elemente in einem Array einen Test besteht
const people = [
{name: 'John', age: 23},
{name: 'Andrew', age: 3},
{name: 'Peter', age: 8},
{name: 'Hanna', age: 14},
{name: 'Adam', age: 37}];
const anyAdult = people.some(person => person.age >= 18);
console.log(anyAdult); // true
3. Wandeln Sie in ein neues Array um
const myArray = [{x:100}, {x:200}, {x:300}];
const newArray= myArray.map(element => element.x);
console.log(newArray); // [100, 200, 300]
Anmerkung: Die map () - Methode erstellt ein neues Array mit den Ergebnissen des Aufrufs einer bereitgestellten Funktion für jedes Element im aufrufenden Array.
4. Fassen Sie eine bestimmte Eigenschaft zusammen und berechnen Sie ihren Durchschnitt
const myArray = [{x:100}, {x:200}, {x:300}];
const sum = myArray.map(element => element.x).reduce((a, b) => a + b, 0);
console.log(sum); // 600 = 0 + 100 + 200 + 300
const average = sum / myArray.length;
console.log(average); // 200
5. Erstellen Sie ein neues Array basierend auf dem Original, ohne es jedoch zu ändern
const myArray = [{x:100}, {x:200}, {x:300}];
const newArray= myArray.map(element => {
return {
...element,
x: element.x * 2
};
});
console.log(myArray); // [100, 200, 300]
console.log(newArray); // [200, 400, 600]
6. Zählen Sie die Anzahl jeder Kategorie
const people = [
{name: 'John', group: 'A'},
{name: 'Andrew', group: 'C'},
{name: 'Peter', group: 'A'},
{name: 'James', group: 'B'},
{name: 'Hanna', group: 'A'},
{name: 'Adam', group: 'B'}];
const groupInfo = people.reduce((groups, person) => {
const {A = 0, B = 0, C = 0} = groups;
if (person.group === 'A') {
return {...groups, A: A + 1};
} else if (person.group === 'B') {
return {...groups, B: B + 1};
} else {
return {...groups, C: C + 1};
}
}, {});
console.log(groupInfo); // {A: 3, C: 1, B: 2}
7. Rufen Sie eine Teilmenge eines Arrays basierend auf bestimmten Kriterien ab
const myArray = [{x:100}, {x:200}, {x:300}];
const newArray = myArray.filter(element => element.x > 250);
console.log(newArray); // [{x:300}]
Anmerkung: Die filter () -Methode erstellt ein neues Array mit allen Elementen, die den von der bereitgestellten Funktion implementierten Test bestehen.
8. Sortieren Sie ein Array
const people = [
{ name: "John", age: 21 },
{ name: "Peter", age: 31 },
{ name: "Andrew", age: 29 },
{ name: "Thomas", age: 25 }
];
let sortByAge = people.sort(function (p1, p2) {
return p1.age - p2.age;
});
console.log(sortByAge);
9. Suchen Sie ein Element in einem Array
const people = [ {name: "john", age:23},
{name: "john", age:43},
{name: "jim", age:101},
{name: "bob", age:67} ];
const john = people.find(person => person.name === 'john');
console.log(john);
Die Array.prototype.find () - Methode gibt den Wert des ersten Elements im Array zurück, das die bereitgestellte Testfunktion erfüllt.
Verweise
Es gibt verschiedene Möglichkeiten, ein Array in JavaScript zu durchlaufen.
Allgemeine Schleife:
var i;
for (i = 0; i < substr.length; ++i) {
// Do something with `substr[i]`
}
ES5 für jeden:
substr.forEach(function(item) {
// Do something with `item`
});
jQuery.each:
jQuery.each(substr, function(index, item) {
// Do something with `item` (or `this` is also `item` if you like)
});
Schauen Sie sich this für detaillierte Informationen an, oder überprüfen Sie MDN für das Durchlaufen eines Arrays in JavaScript und mit jQuery check - jQuery für jeden .
Es gibt einen Weg, dies zu tun, bei dem Sie sehr wenig impliziten Geltungsbereich in Ihrer Schleife haben und auf zusätzliche Variablen verzichten müssen.
var i = 0,
item;
// note this is weak to sparse arrays or falsey values
for ( ; item = myStringArray[i++] ; ){
item; // This is the string at the index.
}
Oder wenn Sie wirklich die ID bekommen wollen und eine wirklich klassische for-Schleife haben:
var i = 0,
len = myStringArray.length; // cache the length
for ( ; i < len ; i++ ){
myStringArray[i]; // Don't use this if you plan on changing the length of the array
}
Moderne Browser unterstützen alle Iterator-Methoden forEach, map, reduce, filter und einen Host mit anderen Methoden auf dem Array-Prototyp .
Ich würde die Verwendung der Bibliothek underscore.js uneingeschränkt empfehlen. Es bietet Ihnen verschiedene Funktionen, mit denen Sie Arrays/Sammlungen durchlaufen können.
Zum Beispiel:
_.each([1, 2, 3], function(num){ alert(num); });
=> alerts each number in turn...
Array-Schleife:
for(var i = 0; i < things.length; i++){
var thing = things[i];
console.log(thing);
}
Objektschleife:
for(var prop in obj){
var propValue = obj[prop];
console.log(propValue);
}
Ja, Sie können dasselbe in JavaScript mithilfe von loop tun, aber nicht darauf beschränkt, viele Möglichkeiten, Arrays in JavaScrip zu schleifen. Stellen Sie sich vor, Sie haben dieses Array unten und möchten eine Schleife darüber machen:
var arr = [1, 2, 3, 4, 5];
Dies sind die Lösungen:
1) Für Schleife
For-Schleife ist eine gängige Methode, um Arrays in JavaScript zu durchlaufen, aber keine der schnellsten Lösungen für große Arrays:
for (var i=0, l=arr.length; i<l; i++) {
console.log(arr[i]);
}
2) While-Schleife
Eine Schleife wird zwar als die schnellste Methode zum Durchlaufen langer Arrays betrachtet, wird jedoch in JavaScript normalerweise weniger verwendet:
let i=0;
while (arr.length>i) {
console.log(arr[i]);
i++;
}
3) Währenddessen
Machen Sie das Gleiche wie beim Syntaxunterschied wie folgt:
let i=0;
do {
console.log(arr[i]);
i++;
}
while (arr.length>i);
Dies sind die wichtigsten Methoden, um Javascript-Schleifen zu erstellen, es gibt jedoch einige weitere Möglichkeiten, dies zu tun.
Außerdem verwenden wir for in-Schleife zum Durchlaufen von Objekten in Javascript.
Schauen Sie sich auch die Funktionen map(), filter(), reduce() usw. auf Array in JavaScript an. Sie können Dinge viel schneller und besser erledigen als while und for.
Dies ist ein guter Artikel, wenn Sie mehr über die asynchronen Funktionen über Arrays in JavaScript erfahren möchten.
Die funktionale Programmierung hat in der .__ ziemlich viel Aufsehen erregt. Entwicklungswelt in diesen Tagen. Und das aus gutem Grund: Functional Techniken können Ihnen dabei helfen, mehr deklarativen Code zu schreiben, der einfacher zu __ ist. auf einen blick verstehen, umgestalten und testen.
Einer der Eckpfeiler der funktionalen Programmierung ist ihre besondere Verwendung von Listen und Listenoperationen. Und diese Dinge sind genau das, was die klingt wie sie sind: Arrays von Dingen und die Sachen, die du ihnen anstellst . Die funktionale Denkweise behandelt sie jedoch etwas anders als Sie vielleicht erwarten.
In diesem Artikel wird näher darauf eingegangen, was ich als "big Drei" -Listenoperationen bezeichnen möchte: Zuordnen, Filtern und Verkleinern. Den Kopf einwickeln um diese drei Funktionen herum ist ein wichtiger Schritt in der Lage zu sein um sauberen Funktionscode zu schreiben, und öffnet die Türen zu den .ly. leistungsstarke Techniken der funktionalen und reaktiven Programmierung.
Es bedeutet auch, dass Sie nie wieder eine for-Schleife schreiben müssen.
Lesen Sie mehr >> hier :
Wenn Sie die jQuery-Bibliothek verwenden, ziehen Sie die Verwendung von http://api.jquery.com/jQuery.each/ in Betracht
Aus der Dokumentation:
jQuery.each( collection, callback(indexInArray, valueOfElement) )Rückgabe: Objekt
Beschreibung: Eine generische Iteratorfunktion, mit der nahtlos über Objekte und Arrays iteriert werden kann. Arrays und arrayähnliche Objekte mit einer length -Eigenschaft (z. B. das Argumentobjekt einer Funktion) werden durch einen numerischen Index von 0 bis Länge-1 iteriert. Andere Objekte werden über ihre benannten Eigenschaften iteriert.
Die Funktion
$.each()ist nicht mit der Funktion$(selector).each()identisch, mit der ausschließlich ein jQuery-Objekt durchlaufen wird. Mit der Funktion$.each()können Sie jede Sammlung durchlaufen, unabhängig davon, ob es sich um eine Karte (JavaScript-Objekt) oder ein Array handelt. Im Falle eines Arrays wird dem Callback jedes Mal ein Array-Index und ein entsprechender Array-Wert übergeben. (Auf den Wert kann auch über das Schlüsselwortthiszugegriffen werden, aber Javascript umschließt den Wertthisimmer alsObject, auch wenn es sich um eine einfache Zeichenfolge oder einen einfachen Zahlenwert handelt.) Die Methode gibt zurück Das erste Argument ist das Objekt, das iteriert wurde.
Wenn sich jemand für die Leistungsseite der verschiedenen für Array-Iterationen .__ verfügbaren Mechanismen interessiert, habe ich die folgenden JSPerf-Tests vorbereitet:
https://jsperf.com/fastest-array-iterator
Ergebnisse :
Der traditionelle for()-Iterator ist bei weitem die schnellste Methode, besonders wenn er mit der array-Länge zwischengespeichert wird.
let arr = [1,2,3,4,5];
for(let i=0, size=arr.length; i<size; i++){
// do something
}
Die Array.prototype.forEach()- und die Array.prototype.map()-Methode sind die langsamsten Näherungen, wahrscheinlich als Folge des function-Aufrufs.
Ich habe diese Variante noch nicht gesehen, die mir persönlich am besten gefällt:
Gegeben ein Array:
var someArray = ["some", "example", "array"];
Sie können darüber eine Schleife machen, ohne jemals auf die length-Eigenschaft zugreifen zu müssen:
for (var i=0, item; item=someArray[i]; i++) {
// item is "some", then "example", then "array"
// i is the index of item in the array
alert("someArray[" + i + "]: " + item);
}
Sehen Sie sich diese JsFiddle an, die Folgendes demonstriert: http://jsfiddle.net/prvzk/
Dies funktioniert nur für Arrays, die nicht spärlich sind. Das bedeutet, dass tatsächlich an jedem Index im Array ein Wert vorhanden ist. Ich habe jedoch festgestellt, dass ich in der Praxis selten spärliche Arrays in Javascript verwende ... In solchen Fällen ist es normalerweise viel einfacher, ein Objekt als Map/Hashtable zu verwenden. Wenn Sie ein spärliches Array haben und eine Schleife über 0 .. Länge-1 haben möchten, benötigen Sie das for (var i = 0; i <someArray.length; ++ i) -Konstrukt, aber Sie benötigen immer noch ein if im Schleife, um zu prüfen, ob das Element am aktuellen Index tatsächlich definiert ist.
Wie CMS in einem Kommentar unten erwähnt, können Sie dies nur für Arrays verwenden, die keine falschen Werte enthalten. Das String-Array aus dem Beispiel funktioniert, aber wenn Sie leere Strings oder Zahlen wie 0 oder NaN usw. haben, bricht die Schleife vorzeitig ab. In der Praxis ist dies wieder selten ein Problem für mich, aber es ist etwas zu bedenken, was es zu einer Schleife macht, über die man nachdenken muss, bevor man es benutzt ... Das kann es für einige Leute disqualifizieren :)
Was ich an dieser Schleife mag, ist:
- Es ist kurz zu schreiben
- Es ist kein Zugriff auf die length-Eigenschaft erforderlich
- Das Element, auf das zugegriffen werden soll, wird automatisch innerhalb des Körpers der Schleife Unter dem von Ihnen ausgewählten Namen definiert.
- Kann sehr natürlich mit array.Push und array.splice kombiniert werden, um Arrays wie Listen/Stacks zu verwenden
Der Grund dafür ist, dass die Array-Spezifikation vorsieht, dass beim Lesen eines Elements aus einem Index> = Länge des Arrays undefined zurückgegeben wird. Wenn Sie an einen solchen Ort schreiben, wird die Länge tatsächlich aktualisiert.
Für mich emuliert dieses Konstrukt am besten die Java-5-Syntax, die ich liebe:
for (String item : someArray) {
}
... mit dem zusätzlichen Vorteil, dass Sie auch über den aktuellen Index in der Schleife Bescheid wissen
Der eleganteste und schnellste Weg
var arr = [1, 2, 3, 1023, 1024];
for (var value; value = arr.pop();) {
value + 1
}
http://jsperf.com/native-loop-performance/8
Bearbeitet (weil ich falsch lag)
Vergleichen von Methoden zum Durchlaufen eines Arrays von 100000 Elementen und Ausführen eines minimalen Vorgangs mit dem neuen Wert jedes Mal.
Vorbereitung:
<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script>
Benchmark.prototype.setup = function() {
// Fake function with minimal action on the value
var tmp = 0;
var process = function(value) {
tmp = value; // Hold a reference to the variable (prevent engine optimisation?)
};
// Declare the test Array
var arr = [];
for (var i = 0; i < 100000; i++)
arr[i] = i;
};
</script>
Tests:
<a href="http://jsperf.com/native-loop-performance/16"
title="http://jsperf.com/native-loop-performance/16"
><img src="http://i.imgur.com/YTrO68E.png" title="Hosted by imgur.com" /></a>
Es gibt mehrere Möglichkeiten, dies in JavaScript zu tun. Die ersten beiden Beispiele sind JavaScript-Beispiele. Der dritte verwendet eine JavaScript-Bibliothek, dh jQuery verwendet die Funktion .each().
var myStringArray = ["hello", "World"];
for(var i in myStringArray) {
alert(myStringArray[i]);
}var myStringArray = ["hello", "World"];
for (var i=0; i < myStringArray.length; i++) {
alert(myStringArray[i]);
}var myStringArray = ["hello", "World"];
$.each(myStringArray, function(index, value){
alert(value);
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>Es gibt eine Methode, die nur die eigenen Objekteigenschaften durchläuft, nicht aber die des Prototyps.
for (var i in array) if (array.hasOwnProperty(i)) {
// do something with array[i]
}
es wird jedoch immer noch über benutzerdefinierte Eigenschaften iteriert.
In Javascript kann jede benutzerdefinierte Eigenschaft einem beliebigen Objekt einschließlich Array zugewiesen werden.
Wenn man ein Array mit weniger Daten durchlaufen möchte, sollte for (var i = 0; i < array.length; i++) if (i in array) oder array.forEach mit es5shim verwendet werden.
In JavaScript gibt es so viele Lösungen, um ein Array zu schleifen.
Die folgenden Codes sind beliebt
/** Declare inputs */
const items = ['Hello', 'World']
/** Solution 1. Simple for */
console.log('solution 1. simple for')
for (let i = 0; i < items.length; i++) {
console.log(items[i])
}
console.log()
console.log()
/** Solution 2. Simple while */
console.log('solution 2. simple while')
let i = 0
while (i < items.length) {
console.log(items[i++])
}
console.log()
console.log()
/** Solution 3. forEach*/
console.log('solution 3. forEach')
items.forEach(item => {
console.log(item)
})
console.log()
console.log()
/** Solution 4. for-of*/
console.log('solution 4. for-of')
for (const item of items) {
console.log(item)
}
console.log()
console.log()Der optimierte Ansatz besteht darin, die Länge des Arrays zwischenzuspeichern und ein einzelnes var-Muster zu verwenden, das alle Variablen mit einem einzelnen var-Schlüsselwort initialisiert.
var i, max, myStringArray = ["Hello","World"];
for (i = 0, max = myStringArray.length; i < max; i++) {
alert(myStringArray[i]);
//Do something
}
Wenn die Reihenfolge der Iteration keine Rolle spielt, als Sie die umgekehrte Schleife versuchen sollten, ist sie am schnellsten, da der Overhead-Bedingungstest reduziert wird und die Dekrementierung in einer Anweisung erfolgt:
var i,myStringArray = ["item1","item2"];
for (i = myStringArray.length; i--) {
alert(myStringArray[i]);
}
oder besser und sauberer während der Schleife verwenden:
var myStringArray = ["item1","item2"],i = myStringArray.length;
while(i--) {
// do something with fruits[i]
}
Kurze Antwort: Ja. Das kannst du machen:
var myArray = ["element1", "element2", "element3", "element4"];
for (i = 0; i < myArray.length; i++) {
console.log(myArray[i]);
}
In einer Browserkonsole können Sie etwas wie "element1", "element2" usw. drucken.
Der beste Weg ist meiner Meinung nach die Funktion Array.forEach. Wenn Sie das nicht verwenden können, würde ich vorschlagen, den Polyfill von MDN zu erhalten, um i verfügbar zu machen. Dies ist sicherlich der sicherste Weg, ein Array in JavaScript zu durchlaufen.
https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
Wie von anderen vorgeschlagen, ist dies fast immer das, was Sie wollen:
var numbers = [1,11,22,33,44,55,66,77,88,99,111];
var sum = 0;
numbers.forEach(function(n){
sum += n;
});
Dadurch wird sichergestellt, dass alles, was Sie für die Verarbeitung des Arrays benötigen, innerhalb dieses Gültigkeitsbereichs bleibt und dass Sie nur die Werte des Arrays verarbeiten, nicht die Objekteigenschaften und andere Member. Dies erledigt for .. in.
wenn Sie einen normalen c-Stil für Schleifen verwenden, ist es in den meisten Fällen wichtig, sich daran zu erinnern, dass alles innerhalb der Schleife seinen Gültigkeitsbereich mit dem Rest Ihres Programms teilt. Mit {} wird kein neuer Gültigkeitsbereich erstellt.
Daher:
var sum = 0;
var numbers = [1,11,22,33,44,55,66,77,88,99,111];
for(var i = 0; i<numbers.length; ++i){
sum += numbers[i];
}
alert(i);
gibt "11" aus - was Sie vielleicht wollen oder nicht.
Beispiel für jsFiddle: https://jsfiddle.net/workingClassHacker/pxpv2dh5/7/
Zum Beispiel habe ich in einer Firefox-Konsole verwendet:
[].forEach.call(document.getElementsByTagName('pre'), function(e){
console.log(e);
})
var x = [4, 5, 6];
for (i = 0, j = x[i]; i < x.length; j = x[++i]) {
console.log(i,j);
}
Viel sauberer ...
Wenn Sie jQuery verwenden möchten, hat es ein schönes Beispiel in der Dokumentation:
$.each([ 52, 97 ], function( index, value ) {
alert( index + ": " + value );
});
Es ist nicht zu 100% identisch, aber ähnlich:
var myStringArray = ['Hello', 'World']; // array uses [] not {}
for (var i in myStringArray) {
console.log(i + ' -> ' + myStringArray[i]); // i is the index/key, not the item
}Nur eine einfache einzeilige Lösung
arr = ["table", "chair"];
// solution
arr.map((e) => {
console.log(e);
return e;
});Sicher ist es ineffizient und viele verachten es, aber es ist einer der am nächsten zu den genannten:
var myStringArray = ["Hello","World"];
myStringArray.forEach(function(f){
// Do something
})
Es scheint, dass alle Varianten außer forEach von lodash aufgelistet sind:
_.forEach([1, 2], (value) => {
console.log(value);
});
Nun, wie wäre es damit:
for (var key in myStringArray) {
console.log(myStringArray[key]);
}
var myStringArray = ["hello", "World"];
myStringArray.forEach(function(val, index){
console.log(val, index);
})
Es ist besser, eine sequentielle for-Schleife zu verwenden:
for (var i = 0; i < myStringArray.length; i++) {
// Do something
}
Zusammenfassung:
Wenn wir über ein Array iterieren, möchten wir oft eines der folgenden Ziele erreichen:
- Erstellen Sie ein neues Array-Array, und lassen Sie das Original intakt: Verwenden Sie
map() - Führen Sie eine Aktion mit/für jedes Array-Element aus und mutieren Sie möglicherweise das Array: Verwenden Sie
for..of,forEach()oder eine reguläre for-Schleife
Beispiele:
const arr1 = [1, 2, 3];
const arr2 = arr1.map(el => el * 2);
// with map we create a new arr2, arr1 is left untouched
console.log(arr2, arr1);
// regular for loop
for (let i = 0; i < arr1.length; i++) {
console.log(arr1[i]);
}
console.log('\n');
// for of loop
for (let el of arr1) {
console.log(el);
}
console.log('\n');
// forEach()
arr1.forEach(el => {
console.log(el)
})Welches verwenden?
Meistens ist es nicht so wichtig. Es gibt jedoch einige Edge-Fälle, bei denen eine Art von Iteration besser zu Ihren Anforderungen passt:
- Wenn Sie ein Array manipulieren möchten, aber das alte Array intakt lassen möchten (z. B. funktionale Programmierung), können Sie
map()am besten für die Iteration verwenden. Wenn Sie kein neues Array zurückgeben müssen, verwenden Sie nichtmap().map()hat die langsamste Leistung aller Schleifenmethoden. - Wenn die Leistung eine Rolle spielt, wenn Sie sehr viel iterieren müssen, eine reguläre for-Schleife:
for(let i=0; i < arr.length; i++) {}
hat oft (kann aufgrund von Unterschieden in der JS-Engine abweichen) die beste Leistung, weil es die "niedrigste" Form der Iteration ist.
var obj = ["one","two","three"];
for(x in obj){
console.log(obj[x]);
}
Durchlaufen eines Arrays rekursiv
const data = ['one', 'two', 'three']
const loop = (items, index=0) => {
if (items.length === index) {
return;
}
console.log(items[index], index)
loop(items, index+=1)
}
loop(data)
Sie können entweder arr.forEach(...) verwenden:
var arr = ["Apple", "banana", "cherry", "mango"];
arr.forEach((item, index)=>{
//Some code...
});
Oder arr.map(...):
var arr = ["Apple", "banana", "cherry", "mango"];
arr.map((item, index)=>{
//Some code...
});
Oder die jquery oder for loop ways zuvor erwähnt.
var array = ['hai', 'hello', 'how', 'are', 'you']
$(document).ready(function () {
$('#clickButton').click(function () {
for (var i = 0; i < array.length; i++) {
alert(array[i])
}
})
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<input id="clickButton" value="click Me" type="button"/>
<div id="show"></div>