map() no puede mutar la matriz de llamadas, sino que devuelve una nueva matriz con valores modificados. Pero, el siguiente código que muta la matriz original, ¿hay algún error en mi entendimiento?
const arr = [1, 2, 3, 4, 5]; arr.map((num, index, arr1) => { return arr1[index] = num * 2; }); console.log(arr); // [2, 4, 6, 8, 10]Bueno, está mutando la matriz original pasando su referencia a la función de devolución de llamada dentro de map() ( arr1 ) y luego accediendo manualmente a los índices. Creará una nueva matriz si solo devuelve el valor de esa función.
const arr = [1, 2, 3, 4, 5]; const arr1 = arr.map((num) => { return num * 2; }); console.log(arr); // [1, 2, 3, 4, 5] console.log(arr1); // [2, 4, 6, 8, 10]El tercer argumento de la función de devolución de llamada del
mapes la matriz original/fuente en la que se invoca el mapa.
Tanto arr como arr1 son iguales, es decir, ambos hacen referencia a la misma matriz. Puede verlo usando console.log(arr === arr1) . Entonces, cualquiera que sea la operación que realice en el arr1 , afectará al arr .
const arr = [1, 2, 3, 4, 5]; arr.map((num, index, arr1) => { console.log(arr1 === arr); return num * 2; }); Simplemente puede devolver num * 2 desde la función de devolución de llamada. map crea internamente una nueva matriz y la devuelve. Así que no tienes que asignarlo como
arr1[index] = num * 2 También puede hacerlo de one-liner como:
arr.map((num, index, arr1) => num * 2) const arr = [1, 2, 3, 4, 5]; const result = arr.map((num, index, arr1) => { return num * 2; }); console.log(arr); // [2, 4, 6, 8, 10] console.log(result); // [2, 4, 6, 8, 10]Array.map crea una nueva matriz con los resultados de llamar a una función proporcionada en cada elemento de la matriz de llamadas.
Aquí se especifica que debe llamar o ejecutar una función en cada elemento de la matriz de llamadas.
¿Cuál es el problema con tu código?
En realidad, no está llamando a una función, sino que está actualizando la matriz original. Si está buscando crear una nueva matriz multiplicando cada nodo del elemento con 2, debe hacer algo como a continuación.
Ejemplo de trabajo
const arr = [1, 2, 3, 4, 5]; const newArray = arr.map((nodeFromOriginalArray, indexOfCurrentElement, arrayFromMapCalled) => { return nodeFromOriginalArray * 2; }); console.log(arr); console.log(newArray);Vamos a depurar los parámetros dentro de la función de mapa.
Aquí hemos proporcionado tres argumentos.
Primer argumento nodeFromOriginalArray : el elemento actual que se procesa en la matriz. Este será cada nodo de su matriz de llamadas.
Segundo argumento indexOfCurrentElement : el índice del elemento actual que se procesa en la matriz. Lo que significa, el índice del elemento actual en la matriz de llamadas.
Tercer argumento arrayFromMapCalled : se invocó el map de matriz. Esta es la matriz en la que se ejecuta la función de map . Tenga en cuenta que esta es la matriz original. La actualización de las propiedades dentro de esta matriz da como resultado la actualización de su matriz de llamada. Esto es lo que sucedió en tu caso.
No debe modificar su matriz original, que es el tercer parámetro. En su lugar, debe devolver su nodo multiplicado por 2 dentro del map y asignarlo a una nueva matriz. Actualizar el tercer parámetro dentro de la función de map mutará su matriz de llamadas.