Take you to understand the Array.map() method

Preface

Last time we introduced the forEach() method, today we will introduce a method for traversing an array-Array.map(), its usage is similar to the forEach method. We will focus on the difference between map and forEach today.

1.map() method

Syntax: array.map(function(currentValue,index,arr), thisValue)
where
callbackis the function executed by each element in the array, the function accepts 1-3 parameters:

  currentvalueThe parameter indicates the current element item of the array, the required parameter
  index parameter indicates the current element index, the optional parameter
  arrparameter indicates the array to which the current element belongs, and the optional parameter

thisValueRepresents the this point when the callback function callback() is executed. Optional parameters. When not written, the default is to point to the window global
map() method to return a new array, and the elements in the array are the values ​​processed by the original array elements after calling the function.

2. The difference between map and forEach

Let's take a look at their similarities first:

    var arr = ['a','b','c','d'];

    arr.forEach(function(item,index,arr){
    
    //item表示数组中的每一项，index标识当前项的下标，arr表示当前数组
        console.log(item);
        console.log(index);
        console.log(arr);
        console.log(this);
    },123);　　　　　　//这里的123参数，表示函数中的this指向，可写可不写，如果不写，则this指向window


    arr.map(function(item,index,arr){
    
       //参数含义同forEach
        console.log(item);
        console.log(index);
        console.log(arr);
        console.log(this);
    },123);

After running, you can see that there is no difference between the two parameters. In addition, there is a feature between the two, that is, the traversal inside cannot be stopped unless the program reports an error.

    var arr2 = [1, 3, , 13, 2];
      var newarr = [];
      arr2.map(function (item, index) {
    
    
        if (arr2[index] == 3) {
    
    
          arr2.push(14);
          arr2.push(5);
        }
        console.log("数组循环了" + index + "次");
      });
      console.log(arr2);

The map method also cannot loop while adding array elements to try to change the number of loops.

What is the difference between them?

• return value

    var arr = [1, 3, 5, 13, 2];
      var res = arr.map(function (item, index) {
    
    
        item += 1;
        return item + 1;
      });
      console.log(res);

      var res2 = arr.forEach(function (item, index) {
    
    
        item += 1;
        return item + 1;
      });
      console.log(res2);

operation result:

The map method returns a new array, and the elements in the array are the values ​​processed by the original array elements after calling the function.
The return value of the forEach method is always undefined.

• Execution speed
  jsPref is a very good website to compare the execution speed of different JavaScript functions

Since the jsPref website cannot be accessed now,

I found a graph of the test results of other testers on the Internet

It can be clearly seen that the execution speed of forEach() is 70% slower than that of map.