Телеграмм чат группы sveltejs страница 8348

Сложности с копированием объектов и массивов
Внизу я привёл 7 примеров работы с массивами. Все демонстрируют стандартное поведение из документации, кроме 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));

источник

14:57пожаловаться #12

Alexander Ponomarev in Svelte [svelt] - All about Svelte JavaScript framework.

import produce from 'immer';

const temp = produce(array, (draft) => { draft[0] = 5 })

https://immerjs.github.io/immer/

immerjs.github.io

Introduction to Immer | Immer

источник

15:13пожаловаться #13

Eugene Mirotin in Svelte [svelt] - All about Svelte JavaScript framework.

Так потому, что массив не копируется, а создаётся новый объект-массив с теми же объектами-элементами внутри

То есть внутри нового массива находятся "ссылки" на те же объекты, что были созданы при создании старого

Решается в каждом случае в зависимости от задачи
Можно immer, как было предложено
Можно temp = arr.map(el => ({...el}))
Ну и самый корявый, но простой в написании — через JSON

источник

15:20пожаловаться #14

Александр in Svelte [svelt] - All about Svelte JavaScript framework.

Хорошо, спасибо

источник

15:22пожаловаться #15

Кирилл in Svelte [svelt] - All about Svelte JavaScript framework.

Привет всем, помогите пожалуйста понять предназначения ключа в циклах. Несколько раз прочитал документацию, не смог вдуплить.

источник

16:23пожаловаться #16

Кирилл in Svelte [svelt] - All about Svelte JavaScript framework.

Быть может какой-то практический пример, или типо того.