Le lleva a comprender el método Array.map ()

Prefacio

La última vez presentamos el método forEach (), y hoy presentaremos un método para atravesar una matriz-Array.map (). Su uso es similar al método forEach. Nos centraremos en la diferencia entre map y forEach hoy.

Método 1.map ()

Sintaxis: array.map (function (currentValue, index, arr), thisValue)
donde
callbackes la función ejecutada por cada elemento en la matriz, la función acepta 1-3 parámetros:

  currentvalueEl parámetro indica el elemento actual del elemento de la matriz, el parámetro de
  index parámetro requerido indica el índice del elemento actual, el parámetro de
  arrparámetro opcional indica la matriz a la que pertenece el elemento actual y el parámetro opcional

thisValueRepresenta este punto cuando se ejecuta la función de devolución de llamada callback (). Parámetros opcionales. Cuando no está escrito, el valor predeterminado es apuntar al
método map global () de la ventana para devolver una nueva matriz, y los elementos de la matriz son los valores procesados ​​por los elementos originales de la matriz después de llamar a la función.

2. La diferencia entre map y forEach

Primero echemos un vistazo a sus similitudes:

    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);

Después de la ejecución, puede ver que no hay diferencia entre los dos parámetros, además, hay una característica entre los dos, es decir, el recorrido interior no se puede detener a menos que el programa informe un 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);

El método del mapa tampoco puede realizar un bucle al agregar elementos de matriz para intentar cambiar el número de bucles.

¿Cuál es la diferencia entre ellos?

• valor de retorno

    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);

resultado de la operación:

El método de mapa devuelve una nueva matriz y los elementos de la matriz son los valores procesados ​​por los elementos originales de la matriz después de llamar a la función.
El valor de retorno del método forEach siempre es indefinido.

• Velocidad de ejecución
  jsPref es un muy buen sitio web para comparar la velocidad de ejecución de diferentes funciones de JavaScript

Dado que ahora no se puede acceder al sitio web jsPref,

encontré un gráfico de los resultados de las pruebas de otros evaluadores en Internet

Se puede ver claramente que la velocidad de ejecución de forEach () es un 70% más lenta que la de map.