JavaScript の forEach メソッドについての深い理解

私は最近 JavaScript を徹底的に勉強しているので、いくつかの知識ポイントをまとめました。この記事では主に JavaScript の配列の forEach メソッドについて説明します。必要な方は参考にして学習していただければ幸いです。

forEach メソッドは、有効な値を含む配列内の項目ごとにコールバック関数を 1 回実行します (daleta メソッドなどを使用して) 削除された項目や初期化されていない項目はスキップされます。 (ただし、未定義項目であることを示すものは除きます);
メソッドはコールバック関数を受け取り、コールバック関数は 3 つのパラメーター (現在の項目、インデックス、および操作の配列) を受け取ります。

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

forEach() メソッドは、配列の要素ごとに指定された関数を 1 回実行します。

ケース: for ループが forEach に変換される

変換前

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

変換後

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

結果はすべて

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

Case : 配列の内容を出力します

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 走査される範囲は、コールバックが初めて呼び出される前に決定されます。 forEach を呼び出した後に配列に追加された項目には、コールバックはアクセスしません。既存の値が変更された場合、コールバックに渡される値は、それぞれを反復処理した時点の値です。削除されたアイテムはスキャンされません。アクセスされた要素が反復中に (たとえば、shift() を使用して) 削除される場合、後続の要素はスキップされます。コードを見てください。

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

上記のコードを理解できるかどうかはわかりません。 2 つを実行すると、配列の最初の項目が削除されます。ただし、前の項目を削除すると、元のインデックスが 1 の項目は 0 になります。0 はすでに実行されているため、実行側では範囲が走査されません。 by forEach はコールバック関数が初めて呼び出される前に決定されており、削除されたアイテムは走査されません。

例を見てみましょう。少し変更してください:

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

上記のインデックスが 3 の場合、出力結果は空です。一度再割り当てした場合でも、もう一度試してください。言葉の結果:

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

上記は私の要約です。上司がさらに追加できることを願っています。

以上がJavaScript の forEach メソッドについての深い理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。