Come modificare il valore dell'oggetto che si trova all'interno di un array usando JavaScript?

Mentre lavorano con JavaScript, gli sviluppatori potrebbero dover aggiornare i dati in modo dinamico. È all'interno dell'array, dell'oggetto o di un array di oggetti. Un array è un gruppo o una raccolta di valori e ogni valore può essere di qualsiasi tipo di dati, inclusi gli oggetti. Per modificare il valore di un oggetto all'interno di un array, prima accedere all'oggetto e quindi modificare le sue proprietà. In JavaScript, esistono più metodi pre-costruiti per modificare il valore di un oggetto all'interno di un array.

Questo tutorial dimostrerà gli approcci per cambiare il valore di un oggetto all'interno di un array in JavaScript.

Come modificare/aggiornare il valore di un oggetto all'interno di un array usando JavaScript?

Per modificare il valore di un oggetto che si trova all'interno di un array, utilizzare i seguenti metodi predefiniti JavaScript:

• Metodo findIndex ()
• Metodo mappa () con operatore di diffusione
• Find () Metodo
• per loop

Metodo 1: Valore di modifica dell'oggetto che si trova all'interno di un array usando il metodo "findindex ()"

Per modificare il valore di un oggetto all'interno dell'array, usa il "findindex ()" metodo. Questo metodo trova l'indice dell'elemento in un array che soddisfa la determinata condizione. Per specificare la condizione, utilizza una funzione di callback.

Sintassi
Seguire la sintassi data per modificare il valore di un oggetto usando il metodo findindex ():

ArrayObject.findindex (obj =>
//condizione
);

Esempio
Crea un array che contiene oggetti diversi:

var arrobj = [id: 5, nome: "Mayer", età: 25,
id: 9, nome: "Paul", età: 26,
id: 12, nome: "Steven", età: 20]

Chiama il metodo FindIndex () con la funzione di callback che controlla l'ID degli oggetti equivalenti a "12"E memorizza l'indice dell'oggetto in una variabile"getIndex":

const getindex = arrobj.findindex (obj =>
restituire obj.id === 12;
);

Modificare il valore della proprietà "età"Di oggetto:

arrobj [getindex].età = 24;

Infine, stampare l'array aggiornato di oggetti sulla console:

console.log ("L'array aggiornato dell'oggetto è:");
console.log (arrobj);

L'output indica che il valore di "età"Dell'oggetto il cui ID è 12 è stato cambiato con successo da"20" A "24":

Metodo 2: Valore di modifica dell'oggetto che si trova all'interno di un array usando il metodo "Map ()" con operatore di spread

Utilizzare il "carta geografica()Metodo "con il"operatore di diffusione"Per modificare il valore dell'oggetto all'interno di un array. "Map ()" viene utilizzato per la creazione di un nuovo array chiamando una funzione su ciascun elemento di un array esistente. Mentre l'operatore di diffusione consente di diffondere o copiare elementi di array in un nuovo array o gli argomenti di una chiamata di funzione. Il metodo "Map ()" non modifica/modifica l'array originale ma emette un nuovo array con gli elementi modificati.

Sintassi
Per modificare il valore di un oggetto usando il metodo Map () con l'operatore di spread, utilizzare la seguente sintassi:

ArrayObject.mappa (obj =>
if (condizione)
return … obj, chiave: newValue;

restituire obj;
);

Esempio
Chiama il metodo Map () con l'operatore di diffusione per modificare il nome dell'oggetto il cui ID è "9":

const newobjectr = arrobj.mappa (obj =>
if (obj.id === 9)
return … obj, nome: 'alice';

restituire obj;
);

Stampa l'array modificato dell'oggetto sulla console:

console.log (newObjectarr);

La proprietà "nome"Dell'oggetto il cui ID è"9"È stato cambiato da"Paolo" A "Alice":

Metodo 3: Modifica il valore dell'oggetto che si trova all'interno di un array usando il metodo "Find ()"

Per modificare il valore di un oggetto all'interno di un array, usa il "Trovare()" metodo. Viene utilizzato per trovare l'elemento in un array che soddisfa una determinata condizione. Emette il valore dell'elemento se soddisfa la condizione. Altrimenti, dà "non definito, "Indicando che non viene trovato alcun elemento del genere.

Sintassi
Usa la sintassi data per il metodo Find () per trovare l'elemento in un array:

ArrayObject.find (obj =>
//condizione
);

Esempio
Invoca il metodo find () per trovare l'oggetto il cui ID è "5"E memorizzare l'oggetto in una variabile"findindex":

const findindex = arrobj.find (obj =>
restituire obj.id === 5;
);

Controlla se la variabile "FindIndex" non è uguale a "non definito"Significa, se l'oggetto viene trovato, modificare il valore della proprietà"nome”DELL'OGGETTAZIONE:

if (findindex !== undefined)
findindex.name = 'John';

Infine, stampa l'oggetto sulla console:

console.log (findindex);

L'output visualizza solo l'oggetto specificato modificando il suo valore:

Metodo 4: modifica del valore dell'oggetto che si trova all'interno di un array usando il ciclo "for-of"

Puoi anche usare il “per di"Loop per modificare il valore di un oggetto all'interno dell'array. È usato per iterare sopra l'array di oggetti e controllare la condizione per modificare il valore dell'oggetto. Dopo aver acceduto e modificato il valore dell'oggetto, termina il loop utilizzando "rottura" parola chiave.

Sintassi
Segui la sintassi data per il loop "for-of":

per (const obj di arrayobject)
if (condizione)
//dichiarazione
rottura;

Esempio
Usa il ciclo for e controlla l'oggetto il cui ID è "5"E cambia il"età" A "27":

per (const obj di arrobj)
if (obj.id === 5)
obj.età = 27;
rottura;

Stampa l'oggetto aggiornato all'interno dell'array sulla console:

console.log (arrobj);

Produzione

Abbiamo raccolto tutte le informazioni essenziali rilevanti per il valore mutevole di un oggetto all'interno dell'array in JavaScript.

Conclusione

Per modificare il valore di un oggetto che si trova all'interno di un array, utilizzare i metodi predefiniti JavaScript, incluso il “findindex (), "carta geografica()Metodo "con"operatore di diffusione","Trovare()Metodo ", o"per di" ciclo continuo. Questi metodi hanno modificato correttamente i valori di un oggetto all'interno di un array. Questo tutorial ha dimostrato i diversi approcci per modificare il valore di un oggetto che si trova all'interno di un array in JavaScript.