Изменение значений объекта в массиве: 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);
Сохранность исходных данных
Несмотря на возможные искушения, старайтесь не изменять исходные данные. Это поможет не только сохранить их в первоначальной форме, но и снизит вероятность возникновения ошибок в будущем.
Полезные материалы
- Array.prototype.map() – JavaScript | MDN – основной ресурс об использовании Array.prototype.map().
- Array.prototype.find() – JavaScript | MDN – подробное описание поиска объектов в массивах через Array.prototype.find().
- Как перебрать или перечислить объект JavaScript? – Stack Overflow – обсуждение и советы по работе с объектами JavaScript от других разработчиков.
- Ссылки на объекты и их копирование – детальный обзор темы клонирования и объединения объектов.
- Объекты JavaScript – освежим основные сведения об объектах JavaScript.
- Как добавить пару ключ/значение в объект JavaScript? – Stack Overflow – разумные методы добавления пар ключ/значение в объекты JavaScript.