Ändern eines Elements anhand der ID in JavaScript

Nehmen wir an, in der Variable arr liegt ein Array von Objekten:

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

Nehmen wir an, wir möchten ein Element des Arrays ändern. Nehmen wir an, die neuen Daten sind in einer Variable gespeichert, zum Beispiel so:

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

Im angegebenen Objekt id stimmt mit der id des zweiten Elements des Arrays überein, aber die Werte der Eigenschaften sind anders. Mit anderen Worten, in data ist in der Eigenschaft id die id des Array-Elements gespeichert, das wir ändern möchten.

Lassen Sie uns diese Änderung durchführen. Dazu durchlaufen wir die Elemente des Arrays mit einer Schleife und, wenn die id mit der gesuchten übereinstimmt, führen wir den Austausch des Elements durch, und wenn sie nicht übereinstimmt, lassen wir das Element unverändert:

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

Der Code kann durch Verwendung des ternären Operators verkürzt werden:

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

Nehmen wir an, in einer Variable ist die id eines Elements des Arrays gespeichert. Erstellen Sie einen Button, bei dessen Klick das entsprechende Element des Arrays geändert wird.