forEach

No return value


var a = [1.2.3.4.5]
var b = a.forEach((item) = > {
    item = item * 2
})
console.log(b) // undefined
Copy the code

Unable to interrupt execution

You cannot interrupt execution during a forEach traversal. If you want certain conditions to be met, you interrupt the traversal, using a for loop.

var arr = [1.2.3];

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

Skip the vacancy

The forEach() method also skips the array space.

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
});
Copy the code

In the above code, the forEach() method does not skip undefined and null, but does skip empty Spaces. The for loop doesn’t skip the space, it thinks undefined.

Changing the array

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]
Copy the code

The array hasn’t changed.

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

We’re modifying the value of item, but we’re still not modifying the array.

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]
Copy the code

When you modify a property of an object in an array, the property changes. The other values remain unchanged.

Why is that?

Here is the introduction of the stack (stack) memory and heap (heap), the concept of memory for JS the basic data types, such as String, Number, Boolean, Undefined, Null is present in the stack in memory, in the stack memory storage variable names and the corresponding values. Object,Array, and Function are stored in the heap, where variable names and reference locations are stored.

  • In the first example, why can’t you modify the original array by modifying the item directly? Because the value of the item is not the corresponding value of the original array, but a new variable is created, with the same value as the original array. Therefore, if item is the underlying data type, then the value in the array will not change. If it is a reference type, then both item and the value in the array will change if they point to the same memory address.
  • In the second example, the values of the objects in the array do not change because the newly created variable refers to the same address as the objects in the original array, but the value of the new variable changes, i.eTo assign a valueThat is, the new object has a value of 2, and the objects in the original array remain{num:1}.
  • In the third example, because the object is a reference type, the new object and the old object both point to the same address, so the new object changes num to 2, and the objects in the original array change.
var a = [1.2.3.4.5] 
a.forEach((item, index, arr) = > { 
    arr[index] = item * 2 
}) 
console.log(a)  / /,4,6,8,10 [2]
Copy the code

When you change the value of arr in the callback function, the array changes.

This example is similar to example 3. The arR in the argument is just a copy of the original array, but the arR is a reference type. If you change one of the items in the array then the array changes because it points to the same reference address, and if you give arr something else, which is a new assignment, then the array doesn’t change. As follows:

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

map

Returns a value

Returns a new processed 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)  / /,4,6,8,10 [2]
Copy the code

Unable to interrupt execution

With forEach, cannot interrupt execution

Skip the vacancy

With forEach, it skips the space

Changing the array

Map can change the original array and the principle is the same as forEach

The performance comparison

  1. The for loop is of course the easiest because it doesn’t have any extra function call stack and context;

  2. ForEach second, because it’s a little bit more complicated than we thought, its function signature is actually array.foreach (function(currentValue, index, arr), thisValue). It’s not just a generic for loop syntax sugar, There are many parameters and contexts that need to be taken into account during execution, which can drag on

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