Vertiefendes Verständnis der forEach-Methode in Javascript

Ich habe mich in letzter Zeit eingehend mit JavaScript beschäftigt und einige Wissenspunkte zusammengefasst, die ich mit Ihnen teilen möchte. In diesem Artikel geht es hauptsächlich um die forEach-Methode von Arrays in JavaScript. Freunde, die sie benötigen, können darauf zurückgreifen und hoffen, dass sie für Sie nützlich sind.

Die forEach-Methode führt die Callback-Funktion einmal für jedes Element im Array aus, das einen gültigen Wert in aufsteigender Reihenfolge enthält. Die Elemente, die gelöscht (mit der Daleta-Methode usw.) oder nicht initialisiert wurden, werden übersprungen (aber nicht diejenigen, die angeben, dass es sich um ein undefiniertes Element handelt); Die Methode
akzeptiert eine Rückruffunktion, und die Rückruffunktion akzeptiert drei Parameter: das aktuelle Element, den Index und das Array von Operationen. Die Methode

var array1 = ['a', 'b', 'c'];
array1.forEach(function(element) {
  console.log(element);
});
// a
// b
// c

forEach() führt die bereitgestellte Funktion einmal für jedes Element des Arrays aus.

Fall: Die for-Schleife wird in forEach konvertiert

Vor der Konvertierung

const items = ['item1', 'item2', 'item3'];
const copy = [];
for (let i=0; i<items.length; i++) {
  copy.push(items[i])
}

Nach der Konvertierung

const items = ['item1', 'item2', 'item3'];
const copy = [];
items.forEach(function(item){
  copy.push(item)
});

Die Ergebnisse sind alle

copy： ["item1", "item2", "item3"]

Fall: Drucken Sie den Inhalt des Arrays aus

function logArrayElements(element, index, array) {
    console.log("a[" + index + "] = " + element);
}
// 注意索引2被跳过了，因为在数组的这个位置没有项
[2, 5, ,9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[3] = 9
[2, 5,"" ,9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[2] = 
// a[3] = 9
[2, 5, undefined ,9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[2] = undefined
// a[3] = 9
let xxx;
// undefined
[2, 5, xxx ,9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[2] = undefined
// a[3] = 9

forEach Der durchquerte Bereich wird bestimmt, bevor der Rückruf zum ersten Mal aufgerufen wird. Auf Elemente, die dem Array nach dem Aufruf von forEach hinzugefügt werden, wird durch den Rückruf nicht zugegriffen. Wenn ein vorhandener Wert geändert wird, sind die an den Rückruf übergebenen Werte die Werte in dem Moment, in dem forEach sie durchläuft. Gelöschte Elemente werden nicht durchlaufen. Wenn das Element, auf das zugegriffen wird, während der Iteration gelöscht wird (z. B. mit Shift()), werden nachfolgende Elemente übersprungen – schauen Sie sich den Code an

var words = ["one", "two", "three", "four"];
words.forEach(function(word) {
  console.log(word);
  if (word === "two") {
    words.shift();
  }
});
// one
// two
// four

Ich weiß nicht, ob Sie den obigen Code verstehen, denn wann Wann Wenn Sie zwei ausführen, löschen Sie das erste Element des Arrays. Das Element mit dem ursprünglichen Index 1 wird jedoch zu 0, nachdem Sie das vorherige Element gelöscht haben, und 0 wurde bereits ausgeführt, sodass dies nicht der Fall ist Auf der Ausführungsseite wird der Bereich durchlaufen von forEach wurde vor dem ersten Aufruf der Rückruffunktion ermittelt und gelöschte Elemente werden nicht durchlaufen.

Schauen wir uns ein Beispiel an, ändern Sie es einfach leicht:

var words = ["one", "two", "three","", "four"];
words.forEach(function(word) {
words =  ["one", "two", "three","fix", "four"];
  console.log(word);
  if (word === "two") {
    words.shift();
 }
});
// one
// two
// three
//  
// four

Wenn der obige Index 3 ist, ist das Ausgabeergebnis leer, auch wenn Sie es einmal neu zugewiesen haben, versuchen Sie es erneut. Schauen Sie sich das an bei den Ergebnissen der Wörter:

console.log(words)
// ["one", "two", "three", "fix", "four"]

Das Obige ist meine Zusammenfassung, und ich hoffe, Sie können mehr hinzufügen.

Das obige ist der detaillierte Inhalt vonVertiefendes Verständnis der forEach-Methode in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!