Diferencia entre forEach y los métodos de mapa en JavaScript

Diferencia entre forEach y los métodos de mapa en JavaScript

En este tutorial, aprenderemos la diferencia entre forEach método y map método en JavaScript usando ejemplos.

considera que tenemos una gama de users y tenemos que pasar por cada usuario y registrar cada user nombre en la consola.

const users = [
  { name: "king", received: false },
  { name: "sai", received: true }
];
Índice
  1. para cada método
  2. Tarjeta de método
  3. Conclusión

para cada método

EL forEach() El método toma la función de devolución de llamada como argumento y se ejecuta una vez en cada elemento de la matriz.

Nota: el método forEach no puede devolver nada.

Nosotros podemos usar forEach método para registrar cada user.name en la consola

users.forEach(user=>{
    console.log(user.name);
})

Tarjeta de método

EL map El método toma la función de devolución de llamada como argumento y devuelve la nueva matriz con los resultados de llamar a una función de devolución de llamada en cada elemento.

También podemos usar map método para registrar cada user.name.

users.map(user=>{
    console.log(user.name);
})

Pero esa es la forma incorrecta de usar map método, en lugar de guardar el user.name podemos usar el método del mapa para transformar todo user nombres presentes dentro del users matriz a mayúscula.

const upperCase = user => {
  return {
    ...user,
    name: user.name.toUpperCase()
  };
};

const updatedUsers = users.map(upperCase);

console.log(updatedUsers);


Nota: El método map no modifica la matriz original, pero crea una nueva matriz con resultados modificados.

Si utiliza forEach método para transformar la user nombres en mayúscula no funcionará porque forEach no devuelve nada

const upperCase = user => {
  return {
    ...user,
    name: user.name.toUpperCase()
  };
};

const updatedUsers = users.forEach(upperCase);

console.log(updatedUsers); 

Ahora usemos ambos métodos para mostrar el user.name en la pantalla en lugar de iniciar sesión en la consola.

índice.html

<!DOCTYPE html>
<html>
<head>
    <title>Hello</title>
    <meta charset="UTF-8" />
</head>

<body>
    <div id="app"></div>
    <script src="index.js"></script></body>

</html>

índice.js

const app = document.getElementById("app");

const users = [
  { name: "king", received: false },
  { name: "sai", received: true }
];

const upperCase = user => {
  return {
    ...user,
    name: user.name.toUpperCase()
  };
};

users.map(upperCase).forEach(user => {  const h1 = document.createElement("h1");  h1.textContent = user.name;  h1.addEventListener("click", () => {    alert(`Don't hit ${user.name}`);  });  app.appendChild(h1);});

En el código anterior, primero transformamos todo user nombres en mayúsculas y luego encadenarlo con forEach método y creó un h1 elemento para cada usuario, luego lo agregó como un elemento secundario a app.

Conclusión

  • Usar forEach método solo cuando necesita hacer algo con cada elemento de la matriz, como en el ejemplo anterior, creamos un h1 elemento para cada elemento de la matriz.

  • Usar map método solo cuando necesita algo con una matriz de elementos, como en el ejemplo anterior que usamos map método para transformar la user nombres en mayúscula, sin modificar la tabla original para que podamos usar la tabla original para otros fines.

Si quieres conocer otros artículos parecidos a Diferencia entre forEach y los métodos de mapa en JavaScript puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas