Cómo cambiar el valor del objeto que está dentro de una matriz usando JavaScript?

Cómo cambiar el valor del objeto que está dentro de una matriz usando JavaScript?
Mientras trabajan con JavaScript, los desarrolladores pueden necesitar actualizar los datos dinámicamente. Está dentro de la matriz, objeto o una matriz de objetos. Una matriz es un grupo o recopilación de valores, y cada valor puede ser de cualquier tipo de datos, incluidos los objetos. Para cambiar el valor de un objeto dentro de una matriz, primero acceda al objeto y luego modifique sus propiedades. En JavaScript, existen múltiples métodos preconstruidos para cambiar el valor de un objeto dentro de una matriz.

Este tutorial demostrará los enfoques para cambiar el valor de un objeto dentro de una matriz en JavaScript.

Cómo cambiar/actualizar el valor de un objeto que está dentro de una matriz usando JavaScript?

Para cambiar el valor de un objeto que está dentro de una matriz, use los siguientes métodos predefinidos de JavaScript:

  • método findIndex ()
  • Método map () con operador de propagación
  • Método Find ()
  • para el bucle

Método 1: Cambiar el valor del objeto que está dentro de una matriz utilizando el método "findIndex ()"

Para cambiar el valor de un objeto dentro de la matriz, use el "findindex ()" método. Este método encuentra el índice del elemento en una matriz que cumple con la determinada condición. Para especificar la condición, utiliza una función de devolución de llamada.

Sintaxis
Siga la sintaxis dada para cambiar el valor de un objeto utilizando el método findindex ():

arrayobject.findIndex (obj =>
//condición
);

Ejemplo
Cree una matriz que contenga diferentes objetos:

var arsrobj = [id: 5, nombre: "Mayer", edad: 25,
id: 9, nombre: "Pablo", edad: 26,
id: 12, nombre: "Steven", edad: 20]

Llame al método findIndex () con la función de devolución de llamada que verifica la identificación de objetos equivalentes a "12", Y almacene el índice del objeto en una variable"getindex":

const getIndex = Arrobj.findIndex (obj =>
regresar obj.id === 12;
);

Cambiar el valor de la propiedad "edad"De objeto:

Arrobj [getIndex].edad = 24;

Finalmente, imprima la matriz actualizada de objetos en la consola:

consola.log ("La matriz actualizada del objeto es:");
consola.log (Arrobj);

La salida indica que el valor de "edad"Del objeto cuya identificación es 12 ha sido cambiado con éxito de"20" a "24":

Método 2: Cambiar el valor del objeto que está dentro de una matriz utilizando el método "map ()" con el operador de extensión

Utilizar el "mapa()"Método con el"operador de propagación"Para cambiar el valor del objeto dentro de una matriz. "Map ()" se utiliza para crear una nueva matriz llamando a una función en cada elemento de una matriz existente. Mientras que el operador spread permite extender o copiar elementos de matriz en una nueva matriz o los argumentos de una llamada de función. El método "map ()" no modifica/cambia la matriz original, pero genera una nueva matriz con los elementos modificados.

Sintaxis
Para cambiar el valor de un objeto utilizando el método MAP () con el operador de propagación, utilice la siguiente sintaxis:

arrayobject.mapa (obj =>
if (condición)
return ... obj, clave: newValue;

regresar obj;
);

Ejemplo
Llame al método MAP () con el operador Spread para cambiar el nombre del objeto cuya identificación es "9":

const newobjectarr = Arrobj.mapa (obj =>
if (obj.id === 9)
return ... obj, nombre: 'Alice';

regresar obj;
);

Imprima la matriz modificada del objeto en la consola:

consola.log (newobjectarr);

La propiedad "nombre"Del objeto cuya identificación es"9"Ha sido cambiado de"Pablo" a "Alicia":

Método 3: Cambiar el valor del objeto que está dentro de una matriz usando el método "find ()"

Para cambiar el valor de un objeto dentro de una matriz, use el "encontrar()" método. Se utiliza para encontrar el elemento en una matriz que cumple una condición dada. Emite el valor del elemento si satisface la condición. De lo contrario, da "indefinido, "Indicando que no se encuentra dicho elemento.

Sintaxis
Use la sintaxis dada para el método find () para encontrar el elemento en una matriz:

arrayobject.encontrar (obj =>
//condición
);

Ejemplo
Invocar el método find () para encontrar el objeto cuya identificación es "5"Y almacene el objeto en una variable"findindex":

const findindex = Arrobj.encontrar (obj =>
regresar obj.id === 5;
);

Compruebe si la variable "FindIndex" no es igual a "indefinido"Significa, si se encuentra el objeto, cambie el valor de la propiedad"nombre"Del objeto:

if (findIndex !== Undefined)
findindex.nombre = 'John';

Finalmente, imprima el objeto en la consola:

consola.log (findindex);

La salida muestra solo el objeto especificado cambiando su valor:

Método 4: Cambiar el valor del objeto que está dentro de una matriz utilizando el bucle "para" para "

También puedes usar el "para"Bucle para cambiar el valor de un objeto dentro de la matriz. Se usa para iterar sobre la matriz de objetos y verificar la condición para cambiar el valor del objeto. Después de acceder y cambiar el valor del objeto, termine el bucle usando el "romperPalabra clave.

Sintaxis
Siga la sintaxis dada para el bucle "para" para ":

para (const obj de ArrayObject)
if (condición)
//declaración
romper;

Ejemplo
Use el bucle para el bucle y verifique el objeto cuya identificación sea "5"Y cambia el"edad" a "27":

para (const obj de Arrobj)
if (obj.id === 5)
obj.edad = 27;
romper;

Imprima el objeto actualizado dentro de la matriz en la consola:

consola.log (Arrobj);

Producción

Hemos reunido toda la información esencial relevante para el valor cambiante de un objeto que está dentro de la matriz en JavaScript.

Conclusión

Para cambiar el valor de un objeto que está dentro de una matriz, use los métodos predefinidos de JavaScript, incluido el "findindex (), "mapa()"Método con"operador de propagación","encontrar()Método "o el"para" bucle. Estos métodos cambiaron con éxito los valores de un objeto dentro de una matriz. Este tutorial demostró los diferentes enfoques para cambiar el valor de un objeto que está dentro de una matriz en JavaScript.