Thay đổi phần tử theo id trong JavaScript

Giả sử trong biến arr chứa một mảng các đối tượng:

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',
	},
];

Giả sử chúng ta muốn thay đổi một phần tử nào đó của mảng. Giả sử dữ liệu mới được lưu trong một biến, ví dụ như sau:

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

Trong đối tượng đã cho, id trùng khớp với id của phần tử thứ hai trong mảng, còn giá trị của các thuộc tính thì khác. Nói cách khác, trong data, thuộc tính id lưu trữ id của phần tử mảng mà chúng ta muốn thay đổi.

Hãy thực hiện việc thay đổi này. Để làm điều đó, chúng ta sẽ lặp qua các phần tử của mảng bằng vòng lặp và nếu id trùng khớp với id cần tìm, chúng ta sẽ thực hiện thay thế phần tử, còn nếu không trùng khớp, chúng ta sẽ giữ nguyên phần tử đó:

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

Có thể rút gọn mã bằng cách sử dụng toán tử ba ngôi:

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

Giả sử trong một biến lưu trữ id của một phần tử mảng. Hãy tạo một nút bấm, khi nhấp vào đó, phần tử tương ứng trong mảng sẽ được thay đổi.