работы с массивами. Все демонстрируют стандартное поведение из документации, кроме 7, где при изменении копии может изменится и оригинал.
Почему так? Массив копируется, а объекты в нём нет?
Как тогда правильно копировать сложные многоуровневые объекты (без использования JSON)?
let array = [1, 2, 3];
let temp = array;
temp[0] = 5; // изменяет и оригинал
console.log(1, JSON.stringify(array));
console.log(2, JSON.stringify(temp));
let array = [{ name: "val1" }, { name: "val2" }];
let temp = array;
temp[0] = 5; // изменяет и оригинал
console.log(1, JSON.stringify(array));
console.log(2, JSON.stringify(temp));
let array = [{ name: "val1" }, { name: "val2" }];
let temp = array;
temp[0].name = "qwe"; // изменяет и оригинал
console.log(1, JSON.stringify(array));
console.log(2, JSON.stringify(temp));
let array = [1, 2, 3];
let temp = [...array];
temp[0] = 5; // изменяет только копию
console.log(1, JSON.stringify(array));
console.log(2, JSON.stringify(temp));
let array = [{ name: "val1" }, { name: "val2" }];
let temp = [...array];
temp[0] = 5; // изменяет только копию
console.log(1, JSON.stringify(array));
console.log(2, JSON.stringify(temp));
let array = [{ name: "val1" }, { name: "val2" }];
let temp = JSON.parse(JSON.stringify(array));
temp[0].name = "qwe"; // изменяет только копию
console.log(1, JSON.stringify(array));
console.log(2, JSON.stringify(temp));
let array = [{ name: "val1" }, { name: "val2" }];
let temp = [...array]; // или Array.from(array), array.map(x => x), array.slice()
temp[0] = 5; // изменяет только копию
console.log(1, JSON.stringify(array));
console.log(2, JSON.stringify(temp));
temp[1].name = "qwe"; // изменяет и оригинал!
console.log(1, JSON.stringify(array));
console.log(2, JSON.stringify(temp));
import produce from 'immer'; const temp = produce(array, (draft) => { draft[0] = 5 }) https://immerjs.github.io/immer/
Так потому, что массив не копируется, а создаётся новый объект-массив с теми же объектами-элементами внутри То есть внутри нового массива находятся "ссылки" на те же объекты, что были созданы при создании старого Решается в каждом случае в зависимости от задачи Можно immer, как было предложено Можно temp = arr.map(el => ({...el})) Ну и самый корявый, но простой в написании — через JSON
Обсуждают сегодня