Bagaimana Mengubah Nilai Objek Yang Ada Di Dalam Array Menggunakan JavaScript?

Bagaimana Mengubah Nilai Objek Yang Ada Di Dalam Array Menggunakan Javascript



Saat bekerja dengan JavaScript, pengembang mungkin perlu memperbarui data secara dinamis. Itu ada di dalam array, objek, atau array objek. Array adalah grup atau kumpulan nilai, dan setiap nilai dapat berupa tipe data apa pun, termasuk objek. Untuk mengubah nilai objek di dalam array, akses objek terlebih dahulu, lalu ubah propertinya. Dalam JavaScript, ada beberapa metode pra-bangun untuk mengubah nilai objek di dalam array.

Tutorial ini akan mendemonstrasikan pendekatan untuk mengubah nilai objek di dalam array di JavaScript.

Bagaimana Mengubah/Memperbarui Nilai Objek yang Ada di Dalam Array Menggunakan JavaScript?

Untuk mengubah nilai objek yang ada di dalam array, gunakan metode standar JavaScript berikut:







Metode 1: Ubah Nilai Objek yang Ada di Dalam Array Menggunakan Metode “findIndex()”.

Untuk mengubah nilai objek di dalam array, gunakan tombol “ findIndex() ' metode. Metode ini menemukan indeks elemen dalam array yang memenuhi kondisi tertentu. Untuk menentukan kondisi, ini menggunakan fungsi callback.



Sintaksis
Ikuti sintaks yang diberikan untuk mengubah nilai objek menggunakan metode findIndex() :



arrayObject. findIndex ( obj => {
//kondisi
} ) ;

Contoh
Buat array yang berisi objek berbeda:





dulu arrObj = [ { pengenal : 5 , nama : 'Mayer' , usia : 25 } ,
{ pengenal : 9 , nama : 'Paul' , usia : 26 } ,
{ pengenal : 12 , nama : 'Steven' , usia : dua puluh } ]

Panggil metode findIndex() dengan fungsi panggilan balik yang memeriksa id objek yang setara dengan “ 12 ”, dan simpan indeks objek dalam variabel “ getIndex ”:

const getIndex = arrObj. findIndex ( obj => {
kembali obj. pengenal === 12 ;
} ) ;

Ubah nilai properti “ usia ” dari objek:



arrObj [ getIndex ] . usia = 24 ;

Terakhir, cetak susunan objek yang diperbarui di konsol:

menghibur. catatan ( 'Array Objek yang diperbarui adalah:' ) ;
menghibur. catatan ( arrObj ) ;

Output menunjukkan bahwa nilai “ usia ” objek yang id-nya 12 berhasil diubah dari “ dua puluh ' ke ' 24 ”:

Metode 2: Ubah Nilai Objek Yang Ada Di Dalam Array Menggunakan Metode “map()” Dengan Operator Spread

Gunakan “ peta() ” metode dengan “ operator penyebaran ” untuk mengubah nilai objek di dalam array. “map()” digunakan untuk membuat array baru dengan memanggil fungsi pada setiap elemen array yang ada. Sedangkan operator spread memungkinkan untuk menyebarkan atau menyalin elemen array ke dalam array baru atau argumen pemanggilan fungsi. Metode “map()” tidak memodifikasi/mengubah larik asli tetapi menghasilkan larik baru dengan elemen yang dimodifikasi.

Sintaksis
Untuk mengubah nilai objek menggunakan metode map() dengan operator spread, gunakan sintaks berikut:

arrayObject. peta ( obj => {
jika ( kondisi ) {
kembali { ... obj , kunci : nilai baru } ;
}
kembali obj ;
} ) ;

Contoh
Panggil metode map() dengan operator spread untuk mengubah nama objek yang id-nya adalah “ 9 ”:

const newObjectArr = arrObj. peta ( obj => {
jika ( obj. pengenal === 9 ) {
kembali { ... obj , nama : 'Alice' } ;
}
kembali obj ;
} ) ;

Cetak array objek yang dimodifikasi di konsol:

menghibur. catatan ( newObjectArr ) ;

Properti ' nama ” dari objek yang id-nya adalah “ 9 ” telah diubah dari “ Paulus ' ke ' Alice ”:

Metode 3: Ubah Nilai Objek Yang Ada Di Dalam Array Menggunakan Metode “find()”.

Untuk mengubah nilai objek di dalam array, gunakan ' menemukan() ' metode. Ini digunakan untuk menemukan elemen dalam array yang memenuhi kondisi tertentu. Ini menampilkan nilai elemen jika memenuhi kondisi. Jika tidak, itu memberi ' belum diartikan , ” menunjukkan tidak ada elemen yang ditemukan.

Sintaksis
Gunakan sintaks yang diberikan untuk metode find() untuk menemukan elemen dalam array:

arrayObject. menemukan ( obj => {
//kondisi
} ) ;

Contoh
Panggil metode find() untuk menemukan objek yang id-nya adalah “ 5 ” dan simpan objek dalam variabel “ findIndex ”:

const findIndex = arrObj. menemukan ( obj => {
kembali obj. pengenal === 5 ;
} ) ;

Periksa apakah variabel 'findIndex' tidak sama dengan ' belum diartikan ” berarti, jika objek ditemukan, ubah nilai properti “ nama ” dari objek:

jika ( findIndex !== belum diartikan ) {
findIndex. nama = 'Yohanes' ;
}

Terakhir, cetak objek di konsol:

menghibur. catatan ( findIndex ) ;

Output hanya menampilkan objek yang ditentukan dengan mengubah nilainya:

Metode 4: Ubah Nilai Objek Yang Ada Di Dalam Array Menggunakan Loop 'for-of'.

Anda juga dapat menggunakan “ untuk-dari ” loop untuk mengubah nilai objek di dalam array. Ini digunakan untuk mengulangi array Objek dan memeriksa kondisi untuk mengubah nilai objek. Setelah mengakses dan mengubah nilai objek, hentikan perulangan menggunakan “ merusak ” kata kunci.

Sintaksis
Ikuti sintaks yang diberikan untuk loop 'for-of':

untuk ( const objek dari arrayObject ) {
jika ( kondisi ) {
//penyataan
merusak ;
}
}

Contoh
Gunakan for-of loop dan periksa objek yang id-nya adalah “ 5 ” dan ubah “ usia ' ke ' 27 ”:

untuk ( const obj dari arrObj ) {
jika ( obj. pengenal === 5 ) {
obj. usia = 27 ;
merusak ;
}
}

Cetak objek yang diperbarui di dalam larik di konsol:

menghibur. catatan ( arrObj ) ;

Keluaran

Kami telah mengumpulkan semua informasi penting yang relevan dengan nilai perubahan objek yang ada di dalam array di JavaScript.

Kesimpulan

Untuk mengubah nilai objek yang ada di dalam array, gunakan metode yang telah ditentukan JavaScript, termasuk ' findIndex() , “ peta() ” metode dengan “ operator penyebaran ”, “ menemukan() ” metode, atau “ untuk-dari ' lingkaran. Metode ini berhasil mengubah nilai objek di dalam array. Tutorial ini mendemonstrasikan berbagai pendekatan untuk mengubah nilai objek yang ada di dalam array di JavaScript.