objects - Für-über einem Array in JavaScript?




javascript multidimensional array (19)

Wie kann ich mit JavaScript alle Einträge eines Arrays durchlaufen?

Ich dachte, es wäre so etwas:

forEach(instance in theArray)

Wobei theArray mein Array ist, aber das scheint falsch zu sein.

https://code.i-harness.com


Schleife rückwärts

Ich denke, die umgekehrte for-Schleife verdient hier eine Erwähnung:

for (var i = array.length; i--; ) {
     // process array[i]
}

Vorteile:

  • Es ist nicht erforderlich, eine temporäre len Variable zu deklarieren oder bei jeder Iteration mit array.length zu vergleichen. array.length kann eine Minute-Optimierung sein.
  • Das Entfernen von Geschwistern aus dem DOM in umgekehrter Reihenfolge ist normalerweise effizienter . (Der Browser muss weniger Elemente in seinen internen Arrays verschieben.)
  • Wenn Sie das Array während des Loops am oder nach dem Index i ändern (z. B. entfernen oder fügen Sie ein Element im array[i] ), würde eine Vorwärtsschleife das Element, das sich nach links in Position i verschoben hat, überspringen oder das i erneut verarbeiten der Punkt, der nach rechts verschoben wurde. In einer traditionellen for-Schleife könnten Sie i aktualisieren, um auf das nächste Element zu verweisen, das bearbeitet werden muss - 1. Die Umkehrung der Iteration ist jedoch oft einfacher und eleganter .
  • Wenn Sie verschachtelte DOM-Elemente ändern oder entfernen, kann eine umgekehrte Verarbeitung Fehler vermeiden . Ziehen Sie beispielsweise in Betracht, die innerHTML eines übergeordneten Knotens zu ändern, bevor Sie die untergeordneten Knoten behandeln. Wenn der untergeordnete Knoten erreicht ist, wird er vom DOM getrennt und durch ein neu erstelltes untergeordnetes Element ersetzt, als das innerHTML des übergeordneten Objekts geschrieben wurde.
  • Es ist kürzer zu tippen und zu lesen als einige der anderen verfügbaren Optionen. Obwohl es für forEach() und für ES6 for ... of verliert.

Nachteile:

  • Es verarbeitet die Artikel in umgekehrter Reihenfolge. Wenn Sie aus den Ergebnissen ein neues Array erstellen oder Dinge auf dem Bildschirm drucken, wird die Ausgabe natürlich in Bezug auf die ursprüngliche Reihenfolge umgekehrt .
  • Das wiederholte Einfügen von Geschwistern als erstes Kind in das DOM, um ihre Bestellung beizubehalten, ist weniger effizient . (Der Browser müsste die Dinge immer nach rechts verschieben.) Um DOM-Knoten effizient und in der richtigen Reihenfolge zu erstellen, müssen Sie nur vorwärts und normal anhängen (und auch ein "Dokumentfragment" verwenden).
  • Die umgekehrte Schleife ist für junge Entwickler verwirrend . (Abhängig von Ihrem Ausblick kann dies als Vorteil angesehen werden.)

Soll ich es immer benutzen?

Einige Entwickler verwenden standardmäßig die umgekehrte for-Schleife, es sei denn, es gibt einen guten Grund, Vorwärtsschleifen durchzuführen.

Obwohl die Leistungssteigerungen in der Regel unbedeutend sind, schreien sie:

"Tun Sie dies einfach mit jedem Artikel in der Liste, die Reihenfolge ist mir egal!"

In der Praxis ist dies jedoch kein verlässlicher Hinweis auf die Absicht, da es von den Gelegenheiten nicht zu unterscheiden ist, wenn Sie sich für die Reihenfolge interessieren und wirklich eine Umkehrung durchführen müssen. In der Tat wäre ein anderes Konstrukt erforderlich, um die Absicht "egal" genau auszudrücken, etwas, das derzeit in den meisten Sprachen nicht verfügbar ist, einschließlich ECMAScript, das jedoch beispielsweise forEachUnordered() .

Wenn die Reihenfolge keine Rolle spielt und die Effizienz ein Problem darstellt (in der innersten Schleife einer Spiel- oder Animations-Engine), kann es akzeptabel sein, die umgekehrte for-Schleife als Ihr Einstiegsmuster zu verwenden. Denken Sie daran, dass das Sehen einer umgekehrten for-Schleife in vorhandenem Code nicht unbedingt bedeutet, dass die Reihenfolge irrelevant ist!

Es ist besser, forEach () zu verwenden.

Generell empfehle ich für höherstufige Codes, bei denen Klarheit und Sicherheit von größter Bedeutung sind, die Verwendung von Array::forEach als Standardmuster:

  • Es ist klar zu lesen.
  • Es zeigt an, dass ich nicht innerhalb des Blocks verschoben werde (was immer eine mögliche Überraschung ist, die sich lange for und while Schleifen versteckt.)
  • Es gibt Ihnen einen Freiraum für Schließungen.
  • Es reduziert das Austreten lokaler Variablen und versehentlicher Kollision mit (und Mutation) äußerer Variablen.

Wenn Sie in Ihrem Code die umgekehrte for-Schleife sehen, ist dies ein Hinweis darauf, dass sie aus gutem Grund umgekehrt wird (vielleicht einer der oben beschriebenen Gründe). Wenn Sie eine traditionelle For-For-Schleife sehen, kann dies darauf hindeuten, dass das Schalten stattfinden kann.

(Wenn die Diskussion der Absicht für Sie keinen Sinn ergibt, könnten Sie und Ihr Code von Crockfords Vorlesung über Programmierstil & Ihr Gehirn profitieren.)

Wie funktioniert es?

for (var i = 0; i < array.length; i++) { ... }   // Forwards

for (var i = array.length; i--; )    { ... }   // Reverse

Sie werden feststellen, dass i-- die mittlere Klausel ist (wo wir normalerweise einen Vergleich sehen) und die letzte Klausel leer ist (wo wir normalerweise i++ ). Das bedeutet, dass i-- auch als Bedingung für die Fortsetzung verwendet wird. Entscheidend ist, dass es vor jeder Iteration ausgeführt und geprüft wird.

  • Wie kann es bei array.length ohne zu explodieren?

    Da i-- vor jeder Iteration ausgeführt wird, greifen wir bei der ersten Iteration tatsächlich auf das Element array.length - 1 zu. array.length - 1 werden Probleme mit undefined Array-out-of-bounds- Elementen vermieden.

  • Warum hört es nicht auf, vor Index 0 zu iterieren?

    Die Schleife i-- zu iterieren, wenn die Bedingung i-- einen Falsey-Wert ergibt (wenn sie 0 ergibt).

    Der Trick ist, dass der --i i-- Operator im Gegensatz zu --i i verringert, aber den Wert vor dem Dekrement ergibt. Ihre Konsole kann dies demonstrieren:

    > var i = 5; [i, i--, i];

    [5, 5, 4]

    Bei der letzten Iteration war ich vorher 1 und der i-- Ausdruck ändert ihn in 0 , ergibt aber tatsächlich 1 (wahrheitsgemäß), und so geht die Bedingung vorüber. Bei der nächsten Iteration ändert sich i-- in -1 , ergibt aber 0 (falsey), wodurch die Ausführung sofort aus dem unteren Ende der Schleife fällt.

    In der traditionellen Forwards-for-Schleife sind i++ und ++i austauschbar (wie Douglas Crockford herausstellt). In der umgekehrten for-Schleife müssen wir jedoch, da unser Dekrement auch unser Bedingungsausdruck ist, bei i-- wenn wir das Element am Index 0 verarbeiten wollen.

Trivia

Manche Leute ziehen gerne einen kleinen Pfeil auf der Rückseite for Schleife und enden mit einem Augenzwinkern:

for (var i = array.length; i --> 0 ;) {

Credits gehen an WYL, weil sie mir die Vorzüge und Schrecken der umgekehrten for-Schleife gezeigt haben.


Zusammenfassung:

Beim Durchlaufen eines Arrays können wir oft eines der folgenden Ziele erreichen:

  1. Wir möchten das Array durchlaufen und ein neues Array erstellen:

    Array.prototype.map

  2. Wir möchten über das Array iterieren und erstellen kein neues Array:

    Array.prototype.forEach

    for..of Schleife

In JS gibt es viele Möglichkeiten, diese beiden Ziele zu erreichen. Einige sind jedoch sinnvoller als andere. Nachfolgend finden Sie einige häufig verwendete Methoden (die gängigsten imo), um eine Array-Iteration in Javascript durchzuführen.

Neues Array erstellen: Map

map()ist eine Funktion, in Array.prototypeder jedes Element eines Arrays umgewandelt werden kann und ein neues Array zurückgegeben wird. map()nimmt als Argument eine Rückruffunktion und arbeitet auf folgende Weise:

let arr = [1, 2, 3, 4, 5];

let newArr = arr.map((element, index, array) => {
  return element * 2;
})

console.log(arr);
console.log(newArr);

Der Rückruf, den wir map()als Argument übergeben haben, wird für jedes Element ausgeführt. Dann wird ein Array zurückgegeben, das die gleiche Länge wie das ursprüngliche Array hat. In diesem neuen Array-Element wird die Callback-Funktion als Argument an übergeben map().

Der deutliche Unterschied zwischen mapund anderer Schleife Mechanismus wie forEachund eine for..ofSchleife ist , dass mapkehrt als neues Array und verläßt das alte Array intakt (außer wenn Sie es explizit manipulieren mit denken wie splice).

Beachten Sie auch, dass der mapCallback der Funktion als zweites Argument die Indexnummer der aktuellen Iteration bereitstellt. Außerdem liefert das dritte Argument das Array, für das mapaufgerufen wurde. Manchmal können diese Eigenschaften sehr nützlich sein.

Schleife mit forEach

forEachist eine Funktion, auf Array.prototypeder sich eine Callback-Funktion als Argument befindet. Sie führt dann diese Callback-Funktion für jedes Element im Array aus. Im Gegensatz zur map()Funktion gibt die Funktion forEach nichts zurück ( undefined). Zum Beispiel:

let arr = [1, 2, 3, 4, 5];

arr.forEach((element, index, array) => {

  console.log(element * 2);

  if (index === 4) {
    console.log(array)
  }
  // index, and oldArray are provided as 2nd and 3th argument by the callback

})

console.log(arr);

Genau wie die mapFunktion forEachliefert der Rückruf als zweites Argument die Indexnummer der aktuellen Iteration. Das dritte Argument gibt auch das Array an, für das forEachaufgerufen wurde.

Durchlaufen Sie Elemente mit for..of

Die for..ofSchleife durchläuft jedes Element eines Arrays (oder jedes andere iterierbare Objekt). Es funktioniert auf folgende Weise:

let arr = [1, 2, 3, 4, 5];

for(let element of arr) {
  console.log(element * 2);
}

Im obigen Beispiel elementsteht für ein Array-Element und arrist das Array, das wir schleifen wollen. Nicht dass der Name elementwillkürlich ist und wir hätten einen anderen Namen wie 'el' oder etwas mehr Deklaratives wählen können, wenn dies zutrifft.

Verwechseln Sie die for..inSchleife nicht mit der for..ofSchleife. for..indurchläuft alle aufzählbaren Eigenschaften des Arrays, während die for..ofSchleife nur die Arrayelemente durchläuft Zum Beispiel:

let arr = [1, 2, 3, 4, 5];

arr.foo = 'foo';

for(let element of arr) {
  console.log(element);
}

for(let element in arr) {
  console.log(element);
}


Wenn Sie die jQuery Bibliothek verwenden, können Sie jQuery.each :

$.each(yourArray, function(index, value) {
  // do your stuff here
});

BEARBEITEN:

Wie pro Frage möchte der Benutzer Code in Javascript anstelle von jquery, so dass die Bearbeitung erfolgt

var length = yourArray.length;   
for (var i = 0; i < length; i++) {
  // Do something with yourArray[i].
}

Wenn Sie ein Array durchlaufen möchten, verwenden Sie die standardmäßige dreiteilige for Schleife.

for (var i = 0; i < myArray.length; i++) {
    var arrayItem = myArray[i];
}

Sie können einige Leistungsoptimierungen erhalten, indem Sie myArray.length oder rückwärts iterieren.


Bearbeiten : Diese Antwort ist hoffnungslos veraltet. Um einen moderneren Ansatz zu erhalten, sehen Sie sich die verfügbaren Methoden für ein Array an . Methoden von Interesse könnten sein:

  • für jeden
  • Karte
  • Filter
  • Postleitzahl
  • reduzieren
  • jeden
  • etwas

Die Standardmethode zum Durchlaufen eines Arrays in JavaScript ist eine Vanille for -loop:

var length = arr.length,
    element = null;
for (var i = 0; i < length; i++) {
  element = arr[i];
  // Do something with element
}

Beachten Sie jedoch, dass dieser Ansatz nur dann gut ist, wenn Sie ein dichtes Array haben und jeder Index von einem Element belegt wird. Wenn das Array spärlich ist, können Sie bei diesem Ansatz auf Leistungsprobleme stoßen, da Sie viele Indizes durchlaufen, die im Array nicht wirklich vorhanden sind. In diesem Fall könnte eine for .. in Schleife eine bessere Idee sein. Sie müssen jedoch die entsprechenden Sicherheitsvorkehrungen verwenden, um sicherzustellen, dass nur die gewünschten Eigenschaften des Arrays (d. for..in Der Array-Elemente) berücksichtigt werden, da der for..in -loop auch in älteren Browsern aufgelistet wird Eigenschaften sind als enumerable definiert.

In ECMAScript 5 gibt es eine forEach-Methode für den Array-Prototyp, die in älteren Browsern jedoch nicht unterstützt wird. Um es konsistent nutzen zu können, müssen Sie entweder über eine Umgebung verfügen, die es unterstützt (z. B. Node.js für serverseitiges JavaScript), oder eine "Polyfill" verwenden. Das Polyfill für diese Funktionalität ist jedoch trivial und da es den Code leichter lesbar macht, ist es ein guter Polyfill.


Mit Loops mit ES6 destructuring und Verbreitung Betreiber

Die Umstrukturierung und die Verwendung des Spread-Operators haben sich für Neueinsteiger von ES6 als von Menschen lesbarer / ästhetischer als recht nützlich erwiesen, auch wenn einige Javascript-Veteranen dies als unordentlich ansehen, Junioren oder andere Personen dies für nützlich halten.

In den folgenden Beispielen werden for...ofAnweisung und .forEachMethode verwendet.

Beispiele 6, 7 und 8 können mit beliebigen Funktionsschleifen verwendet werden , wie .map, .filter, .reduce, .sort, .every, .some, für weitere Informationen zu diesen Methoden Besuche das Array - Objekt .

Beispiel 1: Normale for...ofSchleife - hier keine Tricks.

let arrSimple = ['a', 'b', 'c'];

for (let letter of arrSimple) {
  console.log(letter);
}

Beispiel 2: Wörter in Zeichen aufteilen

let arrFruits = ['apple', 'orange', 'banana'];

for (let [firstLetter, ...restOfTheWord] of arrFruits) {
  // Create a shallow copy using the spread operator
  let [lastLetter] = [...restOfTheWord].reverse();
  console.log(firstLetter, lastLetter, restOfTheWord);

}

Beispiel 3: Schleifen mit a keyundvalue

// let arrSimple = ['a', 'b', 'c'];

// Instead of keeping an index in `i` as per example `for(let i = 0 ; i<arrSimple.length;i++)`
// this example will use a multi-dimensional array of the following format type: 
// `arrWithIndex: [number, string][]`

let arrWithIndex = [
  [0, 'a'],
  [1, 'b'],
  [2, 'c'],
];

// Same thing can be achieved using `.map` method
// let arrWithIndex = arrSimple.map((i, idx) => [idx, i]);

// Same thing can be achieved using `Object.entries`
// NOTE: `Object.entries` method doesn't work on internet explorer unless it's polyfilled
// let arrWithIndex = Object.entries(arrSimple);

for (let [key, value] of arrWithIndex) {
  console.log(key, value);
}

Beispiel 4: Objekteigenschaften inline abrufen

let arrWithObjects = [{
    name: 'Jon',
    age: 32
  },
  {
    name: 'Elise',
    age: 33
  }
];

for (let { name, age: aliasForAge } of arrWithObjects) {
  console.log(name, aliasForAge);
}

Beispiel 5: Erhalten Sie tiefe Objekteigenschaften von dem, was Sie benötigen

let arrWithObjectsWithArr = [{
    name: 'Jon',
    age: 32,
    tags: ['driver', 'chef', 'jogger']
  },
  {
    name: 'Elise',
    age: 33,
    tags: ['best chef', 'singer', 'dancer']
  }
];

for (let { name, tags: [firstItemFromTags, ...restOfTags] } of arrWithObjectsWithArr) {
  console.log(name, firstItemFromTags, restOfTags);
}

Beispiel 6: Wird Beispiel 3 mit verwendet.forEach

let arrWithIndex = [
  [0, 'a'],
  [1, 'b'],
  [2, 'c'],
];

// Not to be confused here, `forEachIndex` is the real index
// `mappedIndex` was created by "another user", so you can't really trust it

arrWithIndex.forEach(([mappedIndex, item], forEachIndex) => {
  console.log(forEachIndex, mappedIndex, item);
});

Beispiel 7: Wird Beispiel 4 mit verwendet.forEach

let arrWithObjects = [{
    name: 'Jon',
    age: 32
  },
  {
    name: 'Elise',
    age: 33
  }
];
// NOTE: Destructuring objects while using shorthand functions 
// are required to be surrounded by parenthesis
arrWithObjects.forEach( ({ name, age: aliasForAge }) => {
  console.log(name, aliasForAge)
});

Beispiel 8: Wird Beispiel 5 mit verwendet.forEach

let arrWithObjectsWithArr = [{
    name: 'Jon',
    age: 32,
    tags: ['driver', 'chef', 'jogger']
  },
  {
    name: 'Elise',
    age: 33,
    tags: ['best chef', 'singer', 'dancer']
  }
];

arrWithObjectsWithArr.forEach(({
  name,
  tags: [firstItemFromTags, ...restOfTags]
}) => {
  console.log(name, firstItemFromTags, restOfTags);
});


Die Lambda-Syntax funktioniert normalerweise nicht in IE 10 oder darunter.

Ich benutze normalerweise die

[].forEach.call(arrayName,function(value,index){
    console.log("value of the looped element" + value);
    console.log("index of the looped element" + index);
});


If you are a jQuery Fan and already have a jQuery file running, you should reverse the positions of the index and value parameters

$("#ul>li").each(function(**index,value**){
    console.log("value of the looped element" + value);
    console.log("index of the looped element" + index);
});

Dies ist ein Iterator für eine Liste mit wenig Sparen, bei der der Index bei 0 beginnt. Dies ist das typische Szenario, wenn mit document.getElementsByTagName oder document.querySelectorAll gearbeitet wird.

function each( fn, data ) {

    if(typeof fn == 'string')
        eval('fn = function(data, i){' + fn + '}');

    for(var i=0, L=this.length; i < L; i++) 
        fn.call( this[i], data, i );   

    return this;
}

Array.prototype.each = each;  

Anwendungsbeispiele:

Beispiel 1

var arr = [];
[1, 2, 3].each( function(a){ a.push( this * this}, arr);
arr = [1, 4, 9]

Beispiel # 2

each.call(document.getElementsByTagName('p'), "this.className = data;",'blue');

Jedes p-Tag erhält class="blue"

Beispiel # 3

each.call(document.getElementsByTagName('p'), 
    "if( i % 2 == 0) this.className = data;",
    'red'
);

Jedes zweite p-Tag wird class="red">

Beispiel # 4

each.call(document.querySelectorAll('p.blue'), 
    function(newClass, i) {
        if( i < 20 )
            this.className = newClass;
    }, 'green'
);

Und schließlich werden die ersten 20 blauen p-Tags in grün geändert

Vorsicht bei der Verwendung von Zeichenfolge als Funktion: Die Funktion wird außerhalb des Kontextes erstellt und sollte nur verwendet werden, wenn Sie sich sicher sind, dass der Bereich der Variablen sicher ist. Andernfalls sollten Sie Funktionen besser übergeben, bei denen das Scoping intuitiver ist.


Ich möchte dies auch als Komposition einer umgekehrten Schleife und als Antwort oben für jemanden hinzufügen, der auch diese Syntax möchte.

var foo = [object,object,object];
for (var i = foo.length, item; item = foo[--i];) {
    console.log(item);
}

Pros:

Der Vorteil dabei: Sie haben die Referenz bereits im ersten Like, die später nicht mit einer anderen Zeile deklariert werden muss. Es ist praktisch, wenn Sie das Objektarray durchlaufen.

Nachteile:

Dies wird unterbrochen, wenn der Verweis falsch ist (falscher Wert usw.). Es kann jedoch als Vorteil genutzt werden. Es würde jedoch das Lesen etwas schwieriger machen. Und je nach Browser kann es "nicht" optimiert werden, um schneller als der ursprüngliche zu arbeiten.


Sie können forEach wie folgt anrufen:

var a = ["car", "bus", "truck"]
a.forEach(function(item, index) {
    console.log("Index" + index);
    console.log("Element" + item);
})

Element hat den Wert jedes Index von 0 bis zur Länge des Arrays.

Ausgabe:

let Array = [1,3,2];

theArray.forEach((element)=>{ 
  // use the element of the array
  console.log(element) 
}

Erklärung:

forEach ist in der Prototypenklasse. Sie können dies auch als theArray.prototype.forEach (...) bezeichnen.

Prototyp: https://hackernoon.com/prototypes-in-javascript-5bba2990e04b

Sie können auch ein Array wie folgt ändern:

1    
3    
2

Eine forEach Implementierung ( siehe in jsFiddle ):

function forEach(list,callback) {
  var length = list.length;
  for (var n = 0; n < length; n++) {
    callback.call(list[n]);
  }
}

var myArray = ['hello','world'];

forEach(
  myArray,
  function(){
    alert(this); // do something
  }
);

Eine Methode, die Ihrer Idee am nächsten kommt, wäre die Verwendung Array.forEach()einer Clojure-Funktion, die für jedes Element des Arrays ausgeführt wird.

myArray.forEach(
  (item) => {
    // do something 
    console.log(item);
  }
);

Ein anderer praktikabler Weg wäre die Verwendung, Array.map()die auf dieselbe Weise funktioniert, aber auch mutatesjedes Element und gibt es wie folgt zurück:

var myArray = [1, 2, 3];
myArray = myArray.map(
  (item) => {
    return item + 1;
  }
);

console.log(myArray); // [2, 3, 4]

Es gibt drei Implementierungen foreachin jQuery wie folgt.

var a = [3,2];

$(a).each(function(){console.log(this.valueOf())}); //Method 1
$.each(a, function(){console.log(this.valueOf())}); //Method 2
$.each($(a), function(){console.log(this.valueOf())}); //Method 3

Es gibt keine for eachSchleife im nativen JavaScript . Sie können entweder Bibliotheken verwenden, um diese Funktionalität zu erhalten (ich empfehle Underscore.js ), verwenden Sie eine einfache forIn-Schleife.

for (var instance in objects) {
   ...
}

Beachten Sie jedoch, dass es Gründe geben kann, eine noch einfachere forSchleife zu verwenden (siehe -Frage Warum ist die Verwendung von "for ... in" mit Array-Iteration eine schlechte Idee? )

var instance;
for (var i=0; i < objects.length; i++) {
    var instance = objects[i];
    ...
}

Es gibt verschiedene Möglichkeiten , ein Array in JavaScript zu durchlaufen:

für - es ist das allgemeinste. Vollständiger Code-Block für das Looping

var languages = ["JAVA", "JavaScript", "C#", "Python"];
var i, len, text;
for (i = 0, len = languages.length, text = ""; i < len; i++) {
    text += languages[i] + "<br>";
}
document.getElementById("example").innerHTML = text;
<p id="example"></p>

while - Schleife, wenn eine Bedingung erfüllt ist. Es scheint die schnellste Schleife zu sein

var text = "";
var i = 0;
while (i < 10) {
    text +=  i + ") something<br>";
    i++;
}
document.getElementById("example").innerHTML = text;
<p id="example"></p>

do / while - Durchläuft auch einen Codeblock, solange die Bedingung erfüllt ist. Es wird mindestens einmal ausgeführt

var text = ""
var i = 0;
do {
    text += i + ") something <br>";
    i++;
}
while (i < 10);
document.getElementById("example").innerHTML = text;
<p id="example"></p>

Funktionsschleifen - forEach, map, filter, auch reduce(sie Schleife durch die Funktion, sondern verwendet , wenn Sie etwas mit Ihrem Array tun müssen, usw.

// For example, in this case we loop through the number and double them up using the map function
var numbers = [65, 44, 12, 4];
document.getElementById("example").innerHTML = numbers.map(function(num){return num * 2});
<p id="example"></p>

Weitere Informationen und Beispiele zur funktionalen Programmierung von Arrays finden Sie im Blogbeitrag Funktionale Programmierung in JavaScript: Zuordnen, Filtern und Reduzieren .


Ich weiß, dass dies ein alter Beitrag ist, und es gibt bereits so viele großartige Antworten. Für ein bisschen mehr Vollständigkeit dachte ich, ich würde eine andere mit AngularJS einwerfen . Dies gilt natürlich nur, wenn Sie Angular verwenden. Natürlich möchte ich es trotzdem sagen.

angular.forEachnimmt 2 Argumente und ein optionales drittes Argument. Das erste Argument ist das Objekt (Array), über das iteriert werden soll, das zweite Argument ist die Iteratorfunktion und das optionale dritte Argument ist der Objektkontext.

Es gibt verschiedene Möglichkeiten, die forEach-Schleife zu verwenden. Das einfachste und wahrscheinlich am meisten verwendete ist

var temp = [1, 2, 3];
angular.forEach(temp, function(item) {
    //item will be each element in the array
    //do something
});

Eine andere Möglichkeit zum Kopieren von Elementen von einem Array in ein anderes ist die

var temp = [1, 2, 3];
var temp2 = [];
angular.forEach(temp, function(item) {
    this.push(item); //"this" refers to the array passed into the optional third parameter so, in this case, temp2.
}, temp2);

Sie müssen das jedoch nicht tun, Sie können einfach Folgendes tun und entspricht dem vorherigen Beispiel:

angular.forEach(temp, function(item) {
    temp2.push(item);
});

Nun gibt es Vor- und Nachteile, die angular.forEachFunktion im Gegensatz zur eingebauten Vanille- forSchleife zu verwenden.

Pros

  • Einfache Lesbarkeit
  • Einfache Beschreibbarkeit
  • Wenn verfügbar, angular.forEachwird die ES5 forEach-Schleife verwendet. Nun werde ich im Cons-Bereich effizienter arbeiten, da die forEach-Schleifen viel langsamer sind als die for-Schleifen. Ich erwähne dies als Profi, weil es schön ist, konsequent und standardisiert zu sein.

Betrachten Sie die folgenden 2 geschachtelten Schleifen, die genau dasselbe tun. Nehmen wir an, wir haben 2 Arrays von Objekten und jedes Objekt enthält ein Array von Ergebnissen, von denen jedes eine Value-Eigenschaft hat, die eine Zeichenfolge ist (oder was auch immer). Nehmen wir an, wir müssen jedes Ergebnis durchlaufen und wenn sie gleich sind, führen Sie eine Aktion aus:

angular.forEach(obj1.results, function(result1) {
    angular.forEach(obj2.results, function(result2) {
        if (result1.Value === result2.Value) {
            //do something
        }
    });
});

//exact same with a for loop
for (var i = 0; i < obj1.results.length; i++) {
    for (var j = 0; j < obj2.results.length; j++) {
        if (obj1.results[i].Value === obj2.results[j].Value) {
            //do something
        }
    }
}

Zugegeben, dies ist ein sehr einfaches hypothetisches Beispiel, aber ich habe mit dem zweiten Ansatz dreifach eingebettete Schleifen geschrieben, und es war sehr schwer zu lesen und zu schreiben.

Cons

  • Effizienz angular.forEachund das Native forEachsind beide so viel langsamer als die normale forSchleife ... etwa 90% langsamer . Halten Sie sich daher für große Datensätze am besten an die native forSchleife.
  • Keine Unterbrechung, Fortsetzung oder Rückgabe der Unterstützung. continuewird eigentlich von " accident " unterstützt, um in einer angular.forEacheinfach fortzufahren, fügen Sie eine return;Anweisung in die Funktion ein, angular.forEach(array, function(item) { if (someConditionIsTrue) return; });die dazu führt, dass sie für diese Iteration aus der Funktion heraus fortgesetzt wird. Dies ist auch auf die Tatsache zurückzuführen, dass der native forEachweder break noch weiter unterstützt.

Ich bin sicher, dass es auch andere Vor-und Nachteile gibt, und fügen Sie bitte alles hinzu, was Sie für richtig halten. Unter dem Strich denke ich, wenn Sie Effizienz brauchen, bleiben Sie bei der nativen forSchleife für Ihre Schleifenanforderungen. Wenn Ihre Datensätze jedoch kleiner sind und eine gewisse Effizienz in Kauf genommen werden kann, um Lesbarkeit und Schreibbarkeit zu erhalten, werfen Sie auf jeden Fall einen angular.forEachin diesen bösen Jungen.


Wenn Sie ein riesiges Array haben, sollten Sie iteratorsetwas Effizienz erzielen. Iteratoren ist eine Eigenschaft bestimmter JavaScript Sammlungen (wie Map, Set, String, Array). Sogar for...ofverwendet iteratorunter der Haube.

Iteratoren verbessern die Effizienz, indem Sie die Elemente in einer Liste nacheinander konsumieren lassen, als ob sie ein Stream wären. Das Besondere an einem Iterator ist das Durchlaufen einer Sammlung. Andere Schleifen müssen die gesamte Sammlung nach vorne laden, um darüber zu iterieren, während ein Iterator nur die aktuelle Position in der Sammlung kennen muss.

Sie können auf das aktuelle Element zugreifen, indem Sie die nextMethode des Iterators aufrufen . Die nächste Methode gibt valueden aktuellen Artikel zurück und booleanzeigt an, wann Sie das Ende der Sammlung erreicht haben. Das folgende Beispiel zeigt das Erstellen eines Iterators aus einem Array.

Wandeln Sie Ihr reguläres Array mithilfe der folgenden values()Methode in einen Iterator um :

    const myArr = [2,3,4]

let it = myArr.values();

console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());

Sie können Ihr reguläres Array auch wie folgt in einen Iterator umwandeln Symbol.iterator:

const myArr = [2,3,4]

let it = myArr[Symbol.iterator]();

console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());

Sie können auch Ihren Stammtisch arrayin einen iteratorssolchen verwandeln :

let myArr = [8, 10, 12];

function makeIterator(array) {
    var nextIndex = 0;
    
    return {
       next: function() {
           return nextIndex < array.length ?
               {value: array[nextIndex++], done: false} :
               {done: true};
       }
    };
};

var it = makeIterator(myArr);

console.log(it.next().value);   // {value: 8, done: false}
console.log(it.next().value);   // {value: 10, done: false}
console.log(it.next().value);   // {value: 12, done: false}
console.log(it.next().value);   // {value: undefined, done: true}

HINWEIS :

  • Iteratoren sind in der Natur erschöpfbar.
  • Objekte sind nicht iterablestandardmäßig. Verwenden Sie for..inin diesem Fall, weil anstelle von Werten mit Schlüsseln gearbeitet wird.

Mehr darüber iteration protocol here Sie here .


Wenn Sie verwenden möchten forEach(), sieht es aus wie -

theArray.forEach ( element => { console.log(element); });

Wenn Sie verwenden möchten for(), sieht es aus wie -

for(let idx = 0; idx < theArray.length; idx++){ let element = theArray[idx]; console.log(element); }


for(let i=0;i<theArray.length;i++){
  console.log(i); //i will have the value of each index
}






iteration