Глубокая копия 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}]