Обновление значения в массиве объектов JavaScript и Lodash

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

Чтобы обновить значения в массиве объектов, можно воспользоваться методом .map(), который создает новый массив, включающий изменённые элементы. Ниже приведен пример функции:

const updateItems = (arr, prop, match, newVal) =>
  arr.map(item => item[prop] === match ? { ...item, [prop]: newVal } : item);

// Пример применения функции:
const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
const updatedUsers = updateItems(users, 'name', 'Bob', 'Robert'); // Bob теперь Robert!

В результате выполнения этой функции значение свойства name изменится с 'Bob' на 'Robert', при этом все остальные свойства останутся без изменений.

Прямой подход: использование findIndex

Если вам необходимо внести изменения непосредственно в исходный массив, можно применить метод .findIndex():

const index = users.findIndex(user => user.name === 'Alice');
if (index !== -1) {
  users[index].name = 'Alison'; // Alice становится Alison
}

Примечание: Этот метод изменяет исходный массив users. Используйте его только в том случае, если вам это приемлемо.

Работа с дубликатами: forEach

Если в массиве присутствуют объекты с одинаковыми значениями, вы можете использовать метод .forEach(), чтобы обновить все соответствующие объекты:

users.forEach(user => {
  if(user.name === 'Alice') {
    user.name = 'Alison';
  }
});

Будьте внимательны к уникальности идентификаторов

Уникальные идентификаторы критически важны для обеспечения корректности результатов. Если у вас нет уникальности, вы можете случайно обновить данные неправильного объекта.

Удачная практика с Object.assign

Чтобы сохранить исходные ссылки без изменений, используйте Object.assign. Этот метод объединяет свойства объектов:

const usersCopy = users.map(user =>
  user.name === 'Bob' ? Object.assign({}, user, { name: 'Robert' }) : user
); // Bob становится Robert

Соблюдайте реактивность: Переприсваивание обновленных массивов

В реактивных фреймворках важно переприсваивать обновленные массивы обратно в исходную переменную:

this.setState({ users: updatedUsers }); // React обновит состояние

Увеличиваем производительность: Использование словарей

Доступ к элементам с помощью словарных объектов обычно происходит быстрее, чем итерационный доступ, особенно при работе с большими массивами:

const userDict = { '1': { name: 'Alice' }, '2': { name: 'Bob' }};
userDict['2'].name = 'Robert'; // Быстрое обновление для Robert

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

Вставьте рабочего библиотекаря, ваши задачи подобны упорядочиванию книг:

Массив библиотеки: [{Title: "Основы JS", ID: 101, CheckedOut: false}, ...]

Обновление статуса книги — это как найти нужный том на полке:

libraryArray.find(book => book.ID === 101).CheckedOut = true;

Как выглядела и как стала полка:

До:      [📘📗📕, 📗(ID: 101), 📙]
После:   [📘📗📕, 📗✅(ID: 101, CheckedOut: true), 📙]  // Книга обновлена, штраф отменяется

Введение в оператор распространения

Воспользуйтесь оператором распространения для безопасного обновления объектов:

users.map(user => 
  user.id === targetId ? { ...user, ...newProps } : user
);

Сторонняя помощь: библиотека lodash

Если вам необходимы дополнительные возможности, библиотека lodash предлагает удобные функции:

_.set(users, '[0].name', 'Alison'); // с помощью lodash Alice меняет имя на Alison

Аккуратная работа с реактивными фреймворками

При использовании реактивных фреймворков важно проводить обновление состояния корректно:

Пример для Vue:

this.$set(this.users, index, updatedUser) // Vue обрабатывает изменения правильно

Поддерживаем читаемость и здоровую кодовую базу

В рамках больших проектов рекомендуется создавать вспомогательные функции для работы с объектами и хранить их в отдельных модулях. Это повышает читаемость кода и соблюдает принцип DRY (Don’t Repeat Yourself).

Гармония с функциональным программированием

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

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

1. Array.prototype.find() – JavaScript | MDN — мощный метод для поиска элементов.
2. Array.prototype.findIndex() – JavaScript | MDN — поиск индексов элементов.
3. Array.prototype.map() – JavaScript | MDN — руководство MDN по трансформации массивов.
4. Array.prototype.forEach() – JavaScript | MDN — итерация через каждый элемент массива.
5. Array.prototype.filter() – JavaScript | MDN — отбор элементов для создания нового массива.