Actualizar un objeto en un array en JavaScript

1. Actualizar objeto usando map() en JavaScript
2. Actualizar objeto usando findIndex() en JavaScript

Los arrays son objetos en JavaScript con una clave numérica fija y valores dinámicos que pueden contener cualquier cantidad de datos en una sola variable. Un array puede ser unidimensional o multidimensional. El array de JavaScript puede almacenar valores directamente o almacenar objetos de JavaScript. A diferencia de otros lenguajes, los arrays JS pueden contener diferentes tipos de datos en diferentes índices de la misma matriz.

En la publicación de hoy, descubriremos cómo actualizar el objeto de un array en JavaScript.

JavaScript ofrece dos formas de actualizar el objeto, usando map() y findIndex().

Actualizar objeto usando map() en JavaScript

Este método incorporado en el array, proporcionado por JavaScript, itera sobre el array original y crea la nueva matriz, completando los elementos según las condiciones especificadas. En lugar de una función de flecha, también puede pasar la función de devolución de llamada. La única diferencia entre map() y forEach() es que map() creará el nuevo array mientras que forEach() muta el array original.

Sintaxis de map() en JavaScript

Array.prototype.map(element => $updateCondition);
Array.prototype.map($callbackFn);

Parámetro

$updateCondition: este parámetro obligatorio especifica qué acción debe llevarse a cabo para cada elemento.

$callbackFn: Es un parámetro obligatorio que especifica una función para cada elemento de un array que se va a llamar. Cada vez que se llama a la función, devuelve el resultado al nuevo array.

Valor devuelto

Devuelve el nuevo array en la que los elementos son el resultado de la función de devolución de llamada.

Código de ejemplo:

const osArray = [
  {id: 0, name: 'Windows'},
  {id: 1, name: 'Linux'},
  {id: 2, name: 'MacOS'},
];

const updatedOSArray =
    osArray.map(p => p.id === 1 ? {...p, name: 'Ubuntu'} : p);

console.log('After update: ', updatedOSArray);

Producción :

After update:  [
    {id: 0, name: "Windows"},
    {id: 1, name: "Ubuntu"},
    {id: 2, name: "MacOS"}
]

Actualizar objeto usando findIndex() en JavaScript

Este método de array incorporado es proporciona JavaScript, que encuentra el índice de elementos cuyo valor coincide con la condición especificada. En lugar de una función de flecha, también puede pasar la función de devolución de llamada. Hay una única diferencia entre los dos métodos, findIndex() e indexOf(). findIndex() se usa para condiciones de coincidencia complejas o tipos de datos de objeto, mientras que indexOf() se usa para condiciones simples o tipos de datos primitivos.

Sintaxis de findIndex() en JavaScript

Array.prototype.findIndex(element => $condition);
Array.prototype.findIndex($callbackFn);

Parámetro

$condition: Es un parámetro obligatorio. El usuario puede pasar cualquier condición relacionada con el elemento del array y encontrar el primer elemento coincidente que cumpla con la condición.

Valor devuelto

Devuelve el índice numérico que cumple la condición especificada. Si ningún elemento cumple la condición especificada, se devuelve -1.

Código de ejemplo:

const osArray = [
  {id: 0, name: 'Windows'},
  {id: 1, name: 'Linux'},
  {id: 2, name: 'MacOS'},
];

elementIndex = osArray.findIndex((obj => obj.id == 1));
console.log('Before update: ', osArray[elementIndex]);
osArray[elementIndex].name = 'Ubuntu';
console.log('After update: ', osArray[elementIndex]);

Producción :

Before update: {id: 1, name: 'Linux'}
After update: {id: 1, name: 'Ubuntu'}