Глубокая копия JavaScript для массива и объекта

В JavaScript Когда я создаю копии примитивов и массивов или объектов, интересующихся результатом, примитивы не меняют происхождение, но массив и копия объекта меняют значения источника, поэтому здесь мы увидим, как справиться с этой проблемой с помощью Deep copy.

let a = 0;
let b = a;
b = 1;
console.log(‘b =’+b);//b =1
console.log(‘a =’+a);//a =0

Это нормально для примитивов, тогда сделайте копию с массивом.

let c = [1,2,3];
let d = c;
d[0] = 0;
console.log(c)//[0, 2, 3]
console.log(d)//[0, 2, 3]

OMG, это будет изменение происхождения. Почему это происходит? Это происходит с «Мелкой копией». В javascript при создании копий массивов или объектов можно сделать глубокую копию или мелкую копию. так что мы увидим, что такое глубокая копия, а что неглубокая, и как решить эту проблему.

Глубокая копия или глубокий клон

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

Мелкая копия мелкий клон

Неглубокая копия — это побитовая копия объекта. Создается новый объект, который имеет точную копию значений в исходном объекте. копируются только ссылочные адреса, т. е. копируется только адрес памяти. это повлияет на источник.

Вы готовы решить

Array.from () и Object.create ()

Для массива мы будем использовать ‘Array.from ()’. Метод Array.from () создает новый экземпляр Array из объекта, подобного массиву или повторяемого объекта.

let a = [1,2,3];
let b = Array.from(a);
b[0] = 0;
console.log(a); // [1, 2, 3]
console.log(b); // [0, 2, 3]

Здесь у нас есть решение для массива, но для объекта внутри массива?

let a = [{x:1,y:2,z:3}];
let b = Array.from(a);
b[0].x = 0;
console.log(JSON.stringify(a)); // [{"x":0,"y":2,"z":3}]
console.log(JSON.stringify(b)); // [{"x":0,"y":2,"z":3}]

Метод JSON.stringify() преобразует значение JavaScript в строку JSON. Да, теперь мы знаем, что это неправильное решение.

Для объекта мы будем использовать Object.create ()

let a = {x:1,y:2,z:3};
let b = Object.create(a);
b.x = 0;
console.log(JSON.stringify(a)); // {"x":1,"y":2,"z":3}
console.log(JSON.stringify(b)); // {"x":0}

Здесь это не идеальное решение, но оно не влияет на происхождение. И ‘ $ .extend ’ и ‘ Object.clone ’ также дают правильное решение. Это тоже неглубокая копия. А как насчет объекта внутри массива?

let a = [{x: 1,y: 2,z: 3}];
let b = Array.from(Object.create(a));
b[0].x = 0;
console.log(JSON.stringify(a)); // [{"x":0,"y":2,"z":3}]
console.log(JSON.stringify(b)); // [{"x":0,"y":2,"z":3}]

Итак, мы решили, что все это делает мелкую копию.

Object.assign ()

let a = {x: 1,y: 2,z: 3};
let b = Object.assign({},a);
b.x = 0;
console.log(JSON.stringify(a)); // {"x":1,"y":2,"z":3}
console.log(JSON.stringify(b)); // {"x":0,"y":2,"z":3}

Object.assign () отлично работает с объектами. но для объектов json это будет неправильно.

let a = { x: {z:1} , y: 2};
let b = Object.assign({}, a);
b.x.z=0

console.log(JSON.stringify(a)); // {"x":{"z":0},"y":2}
console.log(JSON.stringify(b)); // {"x":{"z":0},"y":2}

Тогда каково решение?

Решения для глубокого копирования

$ .extend

Я считаю, что $ .extend — это решение для глубокого копирования вложенных объектов и объектов внутри массива.

//Deep Clone
let a = { x: {z:1} , y: 2};
let b = $.extend(true,{},a);
b.x.z=0;
console.log(JSON.stringify(a)); // {"x":{"z":1},"y":2}
console.log(JSON.stringify(b)); // {"x":{"z":0},"y":2}

Это также решение для объектов глубокого копирования внутри массива.

//Deep Clone
let a = [{ x:{z:1} , y: 2}];
let b = $.extend(true, [], a);;
b[0].x.z=0
console.log(JSON.stringify(a)); //[{"x":{"z":1},"y":2}]
console.log(JSON.stringify(b)); // [{"x":{"z":0},"y":2}]

JSON.parse и JSON.stringify

Наконец, я считаю, что JSON.parse и JSON.stringify — лучший и простой способ глубокой копии. Метод JSON.stringify() преобразует значение JavaScript в строку JSON. Метод JSON.parse() анализирует строку JSON, создавая значение или объект JavaScript, описываемый строкой.

// Deep Copy
let a = { x:{z:1} , y: 2};
let b = JSON.parse(JSON.stringify(a));
b.x.z=0

console.log(JSON.stringify(a)); // {"x":{"z":1},"y":2}
console.log(JSON.stringify(b)); // {"x":{"z":0},"y":2}

Это также решение для объектов глубокого копирования внутри массива.

//Deep Clone
let a = [{ x:{z:1} , y: 2}];
let b = JSON.parse(JSON.stringify(a));
b[0].x.z=0
console.log(JSON.stringify(a)); //[{"x":{"z":1},"y":2}]
console.log(JSON.stringify(b)); // [{"x":{"z":0},"y":2}]

Вот и все. Надеюсь, вы все получите четкое представление о JavaScript Deep copy для массива и объекта. Увидимся