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 :

javascriptlet 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é :

javascriptlet 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 :

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

Задание 1

Les variables suivantes sont données :

javascriptlet 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é.

Задание 2

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

javascriptlet 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.

Задание 3

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