Αλλαγή στοιχείου κατά 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',
  },
];

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

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

Στο παραπάνω αντικείμενο id ταιριάζει με το id του δεύτερου στοιχείου του πίνακα, ενώ οι τιμές των ιδιοτήτων είναι διαφορετικές. Με άλλα λόγια στο data στην ιδιότητα id αποθηκεύεται το id του στοιχείου του πίνακα που θέλουμε να αλλάξουμε.

Ας εκτελέσουμε αυτήν την αλλαγή. Για αυτό θα επαναλάβουμε τα στοιχεία του πίνακα με βρόχο και, εάν το id ταιριάζει με το επιθυμητό, θα εκτελέσουμε αντικατάσταση του στοιχείου, ενώ εάν δεν ταιριάζει, θα αφήσουμε το στοιχείο αμετάβλητο:

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

Μπορούμε να συντομεύσουμε τον κώδικα, χρησιμοποιώντας τον τριαδικό τελεστή:

javascriptlet res = arr.map(elem => elem.id === data.id ? data : elem);
Задание 1

Ας υποθέσουμε ότι σε μια μεταβλητή αποθηκεύεται το id ενός στοιχείου του πίνακα. Δημιουργήστε ένα κουμπί, upon pressing το οποίο θα αλλάξει το αντίστοιχο στοιχείο του πίνακα.