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

Come Modificare Il Valore Dell Oggetto Che Si Trova All Interno Di Un Array Utilizzando 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, accedere prima all'oggetto e quindi modificarne le proprietà. In JavaScript esistono più metodi predefiniti per modificare il valore di un oggetto all'interno di un array.

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

Come modificare/aggiornare il valore di un oggetto che si trova all'interno di un array utilizzando JavaScript?

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







Metodo 1: modifica del valore dell'oggetto che si trova all'interno di un array utilizzando il metodo 'findIndex ()'.

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



Sintassi
Segui la sintassi data per cambiare il valore di un oggetto usando il metodo findIndex():



matriceOggetto. findIndice ( ogg => {
//condizione
} ) ;

Esempio
Crea un array che contenga diversi oggetti:





era arrObj = [ { id : 5 , nome : 'Mayer' , età : 25 } ,
{ id : 9 , nome : 'Paolo' , età : 26 } ,
{ id : 12 , nome : 'Stefano' , età : venti } ]

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 ”:

cost getIndex = arrObj. findIndice ( ogg => {
ritorno ogg. id === 12 ;
} ) ;

Cambia il valore della proprietà “ età ” di oggetto:



arrObj [ getIndex ] . età = 24 ;

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

consolare. tronco d'albero ( 'L'array di oggetti aggiornato è:' ) ;
consolare. tronco d'albero ( arrObj ) ;

L'output indica che il valore di ' età ” dell'oggetto il cui id è 12 è stato modificato con successo da “ venti ' A ' 24 ”:

Metodo 2: modifica del valore dell'oggetto che si trova all'interno di un array utilizzando il metodo 'map ()' con l'operatore Spread

Utilizza il “ carta geografica() ” metodo con il “ operatore di diffusione ” per modificare il valore dell'oggetto all'interno di un array. 'map()' viene utilizzato per creare un nuovo array chiamando una funzione su ciascun elemento di un array esistente. Mentre l'operatore spread consente di diffondere o copiare gli elementi dell'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 utilizzando il metodo map() con l'operatore spread, utilizzare la seguente sintassi:

matriceOggetto. carta geografica ( ogg => {
Se ( condizione ) {
ritorno { ... ogg , chiave : nuovoValore } ;
}
ritorno ogg ;
} ) ;

Esempio
Chiama il metodo map() con l'operatore spread per cambiare il nome dell'oggetto il cui id è ' 9 ”:

cost newObjectArr = arrObj. carta geografica ( ogg => {
Se ( ogg. id === 9 ) {
ritorno { ... ogg , nome : 'Alice' } ;
}
ritorno ogg ;
} ) ;

Stampa l'array modificato dell'oggetto sulla console:

consolare. tronco d'albero ( newObjectArr ) ;

La proprietà ' nome ” dell'oggetto il cui id è “ 9 ” è stato modificato da “ Paolo ' A ' Alice ”:

Metodo 3: modifica del valore dell'oggetto che si trova all'interno di un array utilizzando il metodo 'find ()'.

Per modificare il valore di un oggetto all'interno di un array, utilizzare 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 tale elemento non è stato trovato.

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

matriceOggetto. Trovare ( ogg => {
//condizione
} ) ;

Esempio
Invoca il metodo find() per trovare l'oggetto il cui id è ' 5 ” e memorizza l'oggetto in una variabile “ findIndice ”:

cost findIndice = arrObj. Trovare ( ogg => {
ritorno ogg. id === 5 ;
} ) ;

Controlla se la variabile 'findIndex' non è uguale a ' non definito ” significa, se l'oggetto viene trovato, cambia il valore della proprietà “ nome ” dell'oggetto:

Se ( findIndice !== non definito ) {
findIndice. nome = 'John' ;
}

Infine, stampa l'oggetto sulla console:

consolare. tronco d'albero ( findIndice ) ;

L'output visualizza solo l'oggetto specificato modificandone il valore:

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

Puoi anche usare il ' per-di ” ciclo per modificare il valore di un oggetto all'interno dell'array. Viene utilizzato per scorrere l'array di oggetti e verificare la condizione per modificare il valore dell'oggetto. Dopo l'accesso e la modifica del valore dell'oggetto, terminare il ciclo utilizzando il ' rottura ' parola chiave.

Sintassi
Segui la sintassi data per il ciclo 'for-of':

per ( cost obj di arrayObject ) {
Se ( condizione ) {
//dichiarazione
rottura ;
}
}

Esempio
Usa il ciclo for-of e controlla l'oggetto il cui id è ' 5 ” e cambia il “ età ' A ' 27 ”:

per ( cost obj di arrObj ) {
Se ( ogg. id === 5 ) {
ogg. età = 27 ;
rottura ;
}
}

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

consolare. tronco d'albero ( arrObj ) ;

Produzione

Abbiamo raccolto tutte le informazioni essenziali relative al valore variabile di un oggetto che si trova 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 di JavaScript, incluso ' trovaIndice() , “ carta geografica() ” metodo con “ operatore di diffusione ”, “ Trovare() ” metodo, o il “ per-di ' ciclo continuo. Questi metodi hanno modificato con successo 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.