Mengubah Elemen Mengikut id dalam JavaScript

Katakan dalam pembolehubah arr terdapat tatasusunan objek:

let arr = [
	{
		id: 'GYi9GauC4gBF1e2SixDvu',
		prop1: 'value11',
		prop2: 'value12',
		prop3: 'value13',
	},
	{
		id: 'IWSpfBPSV3SXgRF87uO74',
		prop1: 'value21',
		prop2: 'value22',
		prop3: 'value23',
	},
	{
		id: 'JAmjRlfQT8rLTm5tG2m1L',
		prop1: 'value31',
		prop2: 'value32',
		prop3: 'value33',
	},
];

Katakan kita ingin mengubah salah satu elemen tatasusunan. Katakan data baru disimpan dalam pembolehubah, contohnya, seperti berikut:

let data = {
	id: 'IWSpfBPSV3SXgRF87uO74',
	prop1: 'value21 !',
	prop2: 'value22 !',
	prop3: 'value23 !',
};

Dalam objek yang diberikan, id sepadan dengan id elemen kedua tatasusunan, manakala nilai sifat-sifat lain adalah berbeza. Dengan kata lain, dalam data, sifat id menyimpan id elemen tatasusunan yang ingin kita ubah.

Mari lakukan perubahan ini. Untuk itu, kita akan mengulangi elemen tatasusunan dengan gelung dan, jika id sepadan dengan yang dicari, lakukan penukaran elemen, dan jika tidak sepadan, biarkan elemen tersebut tidak berubah:

let res = arr.map(elem => {
	if (elem.id === data.id) {
		return data;
	} else {
		return elem;
	}
});

Kod boleh dipendekkan dengan menggunakan operator ternary:

let res = arr.map(elem => elem.id === data.id ? data : elem);

Katakan dalam pembolehubah disimpan id elemen tatasusunan. Buatkan butang, yang apabila ditekan akan mengubah elemen tatasusunan yang sepadan.