Αλλαγή μιας ιδιότητας by id σε JavaScript

Μπορεί να χρειαστεί να αλλάξετε όχι ολόκληρο το αντικείμενο, αλλά μία συγκεκριμένη ιδιότητα. Ας δούμε πώς γίνεται αυτό.

Ας υποθέσουμε ότι στη μεταβλητή arr υπάρχει ένας πίνακας αντικειμένων:

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

Ας υποθέσουμε ότι στις μεταβλητές αποθηκεύονται το id του στοιχείου, το όνομα της ιδιότητας για αλλαγή και η νέα τιμή της ιδιότητας:

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

Για την επίλυση του προβλήματος είναι βολικό να χρησιμοποιήσετε αποδόμηση (destructuring) και υπολογιζόμενα ονόματα ιδιοτήτων:

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

Задание 1

Δίνονται οι ακόλουθες μεταβλητές:

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

Δημιουργήστε ένα κουμπί, upon click στο οποίο θα παίρνεται το στοιχείο του πίνακα με το καθορισμένο id, θα παίρνεται η ιδιότητα με το καθορισμένο όνομα και στο τέλος της τιμής αυτής της ιδιότητας θα προστίθεται το σύμβολο '!'.

Задание 2

Ας υποθέσουμε ότι δίνονται δύο μεταβλητές με ονόματα ιδιοτήτων:

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

Τροποποιήστε το προηγούμενο πρόβλημα έτσι ώστε upon click οι αλλαγές να εκτελούνται αμέσως για δύο καθορισμένες ιδιότητες.

Задание 3

Μετατρέψτε τη λύση που δόθηκε στη θεωρία χρησιμοποιώντας αντιγραφή αντικειμένου με τη βοήθεια του Object.assign.