Modifier une propriété par id en JavaScript

Vous pouvez avoir besoin de modifier non pas tout l'objet, mais une propriété spécifique. Voyons comment cela se fait.

Supposons que la variable arr contienne un tableau d'objets :

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

Supposons que les variables contiennent l'id de l'élément, le nom de la propriété à modifier et la nouvelle valeur de la propriété :

let id = 'IWSpfBPSV3SXgRF87uO74';
let prop = 'prop1';
let value = '!!!';

Pour résoudre le problème, il est pratique d'utiliser la déstructuration et les noms de propriétés calculés :

let res = arr.map(elem => {
	if (elem.id === id) {
		return {...elem, [prop]: value};
	} else {
		return elem;
	}
});

Les variables suivantes sont données :

let id = 'JAmjRlfQT8rLTm5tG2m1L';
let prop = 'prop2';

Créez un bouton sur lequel, en cliquant, l'élément du tableau avec l'id spécifié sera récupéré, la propriété avec le nom spécifié sera récupérée en son sein et le signe '!' sera ajouté à la fin de la valeur de cette propriété.

Supposons que deux variables avec des noms de propriétés soient données :

let id = 'JAmjRlfQT8rLTm5tG2m1L';
let prop1 = 'prop2';
let prop2 = 'prop3';

Modifiez la tâche précédente pour que les changements soient effectués immédiatement pour les deux propriétés spécifiées lors du clic.

Reconcevez la solution présentée dans la théorie en utilisant la copie d'objet avec Object.assign.