深入理解javascript 中的forEach方法

最近在深入學習JavaScript，總結了一些知識點，分享給大家。此文主要講述了JavaScript中，數組的forEach方法，需要的朋友可以參考學習一下，希望對你有用。

forEach 方法按升序為數組中含有效值的每一項執行一次callback函數，那些已刪除(使用daleta方法等情況)或者未初始化的項將被跳過(但不包括那些指為undefined的項) ；
方法接受一個回呼函數，回呼函數接受三個參數：目前項、索引、操作的陣列。

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

forEach() 方法對陣列的每個元素執行一次提供的函數。

案例：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"]

案例：列印出陣列的內容

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 後加入陣列中的項目不會被 回呼 存取。如果已經存在的值被改變，則傳遞給 回呼的值是 forEach 遍歷到他們那一刻的值。已刪除的項目不會遍歷到。如果已訪問的元素在迭代時被刪除了(例如使用shift()) ，之後的元素將被跳過——看代碼

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

上面的代碼不知道有看懂沒有，是因為當你執行到two的時候刪除數組的第一項，然而呢本來索引是1 的項因為你把前面的項刪掉了以後，索引就變成0 了，而0 你已經執行過了，所以並不會在執行一邊，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 的時候輸出的結果為空，即使是你已經給他重新賦值了一次，再來看下words的結果：

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

以上是我的總結，也希望大佬補充補充。

#

以上是深入理解javascript 中的forEach方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！