Изменение значений объекта в массиве: jQuery UI Autocomplete

Быстрый ответ

Чтобы просто и быстро изменить объект внутри массива, применяйте метод findIndex для его локации в массиве. Затем измените значение его свойства по следующему образцу:

let myArray = [{ id: 1, value: 'a' }, { id: 2, value: 'b' }];
// Используем метод "рабочая лошадка" – быстрое обновление
myArray[myArray.findIndex(obj => obj.id == 2)].value = 'обновлено';

console.log(myArray); // И вот, значение изменилось!

Изменение без мутаций

Если вы не хотите изменять исходный массив, воспользуйтесь методом map. Он эквивалентен применению хитрых техник, усвоенных в шпионских фильмах:

// Клонирование – безопасная стратегия изменения данных с помощью оператора распространения и map
const updatedArray = myArray.map(obj => 
  obj.id === 2 ? { ...obj, value: 'обновлено' } : obj
);

console.log(updatedArray); // Вуаля! Исходный массив остался прежним.

Остановка в нужный момент

Когда требуется обработать большие массивы, используйте цикл for в сочетании с оператором break для остановки процесса сразу после обновления объекта. Представьте, что это как поезд, остановившийся на нужной станции:

let index;
for (let i = 0; i < myArray.length; i++) {
  if (myArray[i].id === 2) {
    index = i;
    break; // "Мы достигли цели, можно прекращать!"
  }
}
if (index !== undefined) myArray[index].value = 'обновлено'; // Объект успешно обновлён.

Тернарные операторы для увеличения скорости

Для быстрого обновления объекта примените тернарные операторы внутри map, аналогично работы напористого автора:

const updatedArray = myArray.map(obj =>
  obj.id === 2 ? {...obj, value: 'обновлено'} : obj
);

Визуализация

Полезно представить процесс изменения массива наглядно:

Приравниваем массив к поезду (🚂), где каждый вагон – это объект в массиве:

Поезд-Массив: [🚃(Объект 1), 🚃(Объект 2), 🚃(Объект 3)]

Хотите обновить пассажира (значение объекта) во втором вагоне?

До:      [🚃(👩‍💼), 🚃(👨‍🔧), 🚃(👩‍🚀)]
После: [🚃(👩‍💼), 🚃(👨‍🍳), 🚃(👩‍🚀)] // 👨‍🔧 сменился на 👨‍🍳!

Проверка наличия объекта перед обновлением

Проверьте присутствует ли в массиве объект, которыи вы намерены обновить:

let index = myArray.findIndex(obj => obj.id === 2);

if (index !== -1) {
  myArray[index].value = 'обновлено';
} else {
  console.log('Невидимка! Объект не обнаружен.'); // Данные остались нетронутыми.
}

Читаемость или производительность – выбор за вами

Использование map способствует читаемости кода, в то время как for ориентирован на производительность. Определите приоритеты вашего приложения и выбирайте наиболее подходящий подход.

ES6 для компактного кода

Применяйте стрелочные функции ES6 для создания более лаконичного кода:

// Стрелочные функции – отличное решение для любителей компактного кода
myArray = myArray.map(obj => obj.id === 2 ? {...obj, value: 'обновлено'} : obj);

Сохранность исходных данных

Несмотря на возможные искушения, старайтесь не изменять исходные данные. Это поможет не только сохранить их в первоначальной форме, но и снизит вероятность возникновения ошибок в будущем.

Полезные материалы

1. Array.prototype.map() – JavaScript | MDN – основной ресурс об использовании Array.prototype.map().
2. Array.prototype.find() – JavaScript | MDN – подробное описание поиска объектов в массивах через Array.prototype.find().
3. Как перебрать или перечислить объект JavaScript? – Stack Overflow – обсуждение и советы по работе с объектами JavaScript от других разработчиков.
4. Ссылки на объекты и их копирование – детальный обзор темы клонирования и объединения объектов.
5. Объекты JavaScript – освежим основные сведения об объектах JavaScript.
6. Как добавить пару ключ/значение в объект JavaScript? – Stack Overflow – разумные методы добавления пар ключ/значение в объекты JavaScript.