При использовании метода map для создания нового массива объектов, возникает проблема, если объекты содержат вложенные объекты. Хотя map возвращает новый массив, вложенные объекты внутри элементов массива остаются ссылками на те же объекты, что и в оригинальном массиве.
const persons = [{
name: 'Ivan',
address: {
ul: 1
}
}]
const newPersons = persons.map(person => {
person.address.ul = 2
return {...person}
})
console.log(persons)
console.log(newPersons)
⚠️ Что происходит:
- В исходном массиве persons есть объект с вложенным объектом address.
- Метод map создает новый массив newPersons, в котором каждый элемент копируется с использованием оператора расширения {...person}.
- Однако, несмотря на создание нового объекта верхнего уровня, вложенный объект address в обоих массивах (persons и newPersons) ссылается на один и тот же объект.
📌 Результат
Изменения, внесенные в newPersons, также повлияют на оригинальный массив persons, так как вложенные объекты не были скопированы глубоко.
✔️ Решение
Чтобы избежать этого, нужно использовать глубокое копирование вложенных объектов, например, с использованием JSON.parse(JSON.stringify(person)) или библиотек, которые поддерживают глубокое копирование.
В реальных проектах стараются избегать необходимости глубокого клонирования на каждом шаге. Вместо этого можем частично склонировать
const newPersons = persons.map(person => {
return {
...person,
address: { ...person.address, ul: 2 }
}
})
#frontend #javascript