forEach
no return value

var a = [1,2,3,4,5]
var b = a.forEach((item) => {
    item = item * 2
})
console.log(b) // undefined

Cannot interrupt execution
The execution cannot be interrupted during forEach traversal. If you want to meet certain conditions, the traversal will be interrupted. Use the for loop.

var arr = [1, 2, 3];

for (var i = 0; i < arr.length; i++) {
  if (arr[i] === 2) break;
  console.log(arr[i]);
}

Skip space
The forEach() method also skips the empty bits of the array.

var a = [null, , undefined]
for (let i = 0; i < a.length; i++) {
    console.log('a', a[i]) // null undefined undefined
}
a.forEach(item => {
    console.log('item', item) // null undefined
});

In the above code, the forEach() method will not skip undefined and null, but will skip empty bits. The for loop does not skip empty bits and is considered undefined.

Change array condition

Here are some examples:

var a = [1,2,3,4,5]
a.forEach((item) => {
    item = item * 2
})
console.log(a) // [1,2,3,4,5]

The original array has not changed here.

var a = [1,'1',{num:1},true] 
a.forEach((item, index, arr) => {
    item = 2 
}) 
console.log(a) // [1,'1',{num:1},true]

The value of item is modified here, but the original array is still not modified.

var a = [1,'1',{num:1},true] 
a.forEach((item, index, arr) => { 
    item.num = 2 
    item = 2
}) 
console.log(a)  // [1,'1',{num:2},true]

When modifying a property of an object in the array, it is found that the property has changed. Other values remain unchanged.

Why?

Here we will introduce the concepts of stack memory and heap memory, Front end training For the basic data types in JS, such as string, number, Boolean, undefined and null, they exist in the stack memory, and the variable name and corresponding value are stored in the stack memory. Object, array and function exist in heap memory, where variable names and reference locations are stored.

In the first example, why can't you modify the original array directly by modifying item? Because the value of item is not the value in the corresponding original array, but a new variable is re established, and the value is the same as the original array. Therefore, if the item is a basic data type, the value in the array will not be changed. If it is a reference type, the value in the item and the array point to the same memory address, both will be changed.

In the second example, the value of the object in the array does not change because although the newly created variable points to the same address as the object in the original array, the value of the new variable is changed, that is, the value of the new object is 2, and the object in the original array is {num:1}.

In the third example, because the object is a reference type and the new object and the old object point to the same address, the new object changes num to 2 and the objects in the original array are also changed.

var a = [1,2,3,4,5] 
a.forEach((item, index, arr) => { 
    arr[index] = item * 2 
}) 
console.log(a)  // [2,4,6,8,10]

Changing the value of arr in the callback function changes the original array.

This example is the same as example 3. The ARR in the parameter is only a copy of the original array, but the ARR is a reference type. If you modify an item in the array, the original array will also change because it points to the same reference address. If you assign another value to the parameter arr, it is re assigned, and the original array will remain unchanged. As follows:

var a = [1,2,3,4,5] 
a.forEach((item, index, arr) => { 
    arr = 2
}) 
console.log(a)  // [1,2,3,4,5]

map
There is a return value
Returns a processed new array without changing the value of the original array.

var a = [1,2,3,4,5]
var b = a.map((item) => {
    return item = item * 2
})
console.log(a)  // [1,2,3,4,5]
console.log(b)  // [2,4,6,8,10]

Cannot interrupt execution

Same as forEach, execution cannot be interrupted

Skip space

The same as forEach, the empty space will be skipped

Change array condition

The situation and principle of changing the original array in map are the same as forEach

Performance comparison

1. The for loop is of course the simplest, because it does not have any additional function call stack and context;

2. forEach is second, because it is actually more complex than we think. Its function signature is actually array forEach (function (currentvalue, index, ARR), thisvalue) is not the syntax sugar of an ordinary for loop. There are many parameters and contexts that need to be considered during execution, which may slow down the performance

3. map is the slowest because its return value is a new array of equal length, and the performance overhead of array creation and assignment is very high.