In-depth understanding of the forEach method in javascript

I have been studying JavaScript in depth recently, and I have summarized some knowledge points to share with you. This article mainly talks about the forEach method of arrays in JavaScript. Friends who need it can refer to it and learn it. I hope it will be useful to you.

The forEach method executes the callback function once for each item in the array that contains a valid value in ascending order. Those items that have been deleted (using the daleta method, etc.) or uninitialized items will be skipped (but not those that indicate is an undefined item);
The method accepts a callback function, and the callback function accepts three parameters: the current item, the index, and the array of operations.

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

The forEach() method executes the provided function once for each element of the array.

Case: for loop is converted to forEach

Before conversion

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

After conversion

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

The results are all

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

Case: Print out the contents of the array

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 The range traversed will be determined before the callback is called for the first time. Items added to the array after calling forEach will not be accessed by the callback. If an existing value is changed, the values ​​passed to the callback are the values ​​at the moment forEach iterated through them. Deleted items will not be traversed. If the accessed element is deleted during iteration (for example, using shift()), subsequent elements will be skipped - look at the code

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

I don’t know if you understand the above code, because when When you execute two, delete the first item of the array. However, the item with the original index of 1 becomes 0 after you delete the previous item, and you have already executed 0, so it does not On the execution side, the range traversed by forEach has been determined before the callback function is called for the first time, and deleted items will not be traversed.

Let’s look at an example, just change it slightly:

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

When the above index is 3, the output result is empty, even if you have reassigned it once, come again Take a look at the results of words:

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

The above is my summary, and I hope the boss can add more.

The above is the detailed content of In-depth understanding of the forEach method in javascript. For more information, please follow other related articles on the PHP Chinese website!