Intenté hacer algunos cambios en el código javascript de la escuela W33 para conocer la diferencia entre forEach y map. ¿Alguien puede decirme por qué el resultado de este código sigue siendo:
45,4,9,16,25
en vez de
90,8,18,32,50
¿No es forEach significa llamar a una función para cada elemento de esta matriz? Sé que no debería usar return porque forEach no devuelve un resultado válido.
const numbers = [45, 4, 9, 16, 25]; numbers.forEach(myFunction); document.getElementById("demo").innerHTML = numbers; function myFunction(value, index, array) { value * 2; } <!DOCTYPE html> <html> <body> <h2>JavaScript Array.forEach()</h2> <p>Calls a function once for each array element.</p> <p id="demo"></p> </body> </html>El value * 2 realiza un cálculo, pero no hace nada con el resultado de ese cálculo. Podría cambiar la línea a value = value * 2 y eso asignaría el resultado del cálculo a la variable de value . Sin embargo, eso aún no cambiaría los valores en la matriz, porque la variable de value está restringida al alcance de la función.
Esto se debe a que cuando transfiere un número a otra variable, solo está transfiriendo el valor , no la referencia. es decir
let a = 1; let b = a; a = 2; // a is 2, b is 1Esto es diferente a las matrices y los objetos, donde se transfiere la referencia:
let a = [1]; let b = a; a[0] = 2; // a[0] is 2, b[0] is 2Entonces, una forma de arreglar su código podría ser manipular la matriz en su lugar, es decir
const numbers = [45, 4, 9, 16, 25]; numbers.forEach(myFunction); function myFunction(value, index, array) { array[index] = value * 2; } // numbers is [90,8,18,32,50] Esto funciona. Sin embargo, recomendaría la simplicidad de map en lugar de forEach . Array#map usa el valor de retorno de cada llamada de función para reemplazar cada elemento en la matriz.
const numbers = [45, 4, 9, 16, 25]; const doubles = numbers.map(myFunction); function myFunction(value, index, array) { return value * 2; } // numbers is [45,4,9,16,25] // doubles is [90,8,18,32,50]La función myFunction básicamente no hace nada, duplica el valor actual y no hace nada con él. En su caso, necesita mutar la matriz. Pero no es una buena idea mutar la matriz que está atravesando.
Para lograr su objetivo, recomiendo crear una nueva matriz utilizando la función de map .
const numbers = [45, 4, 9, 16, 25]; const doubledNumbers = numbers.map((value) => val * 2); // [90, 8, 18, 32, 50] document.getElementById("demo").innerHTML = doubledNumbers;Esto se debe a que no está restableciendo el valor de los números con el valor multiplicado.
Debe configurarlo de acuerdo con los numbers[index] dentro de la función de mapa.
const numbers = [45, 4, 9, 16, 25]; numbers.forEach(myFunction); document.getElementById("demo").innerHTML = numbers; function myFunction(value, index, array) { numbers[index] = value * 2; }