Copy arrays and objects, deep copy, shallow copy

JavaScript arrays and methods for deep copies of objects (copying arrays or copying objects) preface

in JS, the copying of arrays and objects is only a shallow copy if the use = number is used for copying. As demonstrated :

As above, arr the modification will affect arr2 the value, which obviously in most cases is not the result we need.
Therefore, the array and the deep copy of the object is javascript a basic skill.

deep copy of array

There are several ways to achieve a deep copy of the array, all avenues to Rome. Examples are as follows:

A For loop implements a deep copy of an array

The For loop is very useful. If you do not know the advanced method, we can accomplish most of our requirements through a for loop.

var arr = [1,2,3,4,5]var arr2 = copyArr(arr)function copyArr(arr) { let res = [] for (let i = 0; i < arr.length; i++) { res.push(arr[i]) } return res}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

As above, a deep copy of the array can be realized by a for loop of the array.

Slice method implements deep copy of array

This code implementation is very simple. The principle is also relatively good understanding, he is the original array out of the part to form a new array. We can complete the deep copy of the array as long as it is set to extract all. The code is as follows:

var arr = [1,2,3,4,5]var arr2 = arr.slice(0)arr[2] = 5console.log(arr)console.log(arr2)

• 1
• 2
• 3
• 4
• 5

The results of the operation are as follows:

For more slice information, please visit the W3school JavaScript slice method

Concat method implements deep copy of array

This code is also very simple, the principle is more rude. It is a method for connecting multiple arrays to form a new array. So we can do a deep copy of the array just by connecting it to itself. The code is as follows:

var arr = [1,2,3,4,5]var arr2 = arr.concat()arr[2] = 5console.log(arr)console.log(arr2)

• 1
• 2
• 3
• 4
• 5

The results of the operation are as follows:

For more concat information, please visit the W3school JavaScript concat method

October 31, 2017 add: ES6 extended operator implements deep copy of array

OK, the previous method is all out of date, the following method to implement the deep copy of the array is the simplest.

var arr = [1,2,3,4,5]var [ ...arr2 ] = arrarr[2] = 5console.log(arr)console.log(arr2)

• 1
• 2
• 3
• 4
• 5

The results of the operation are as follows:

Deep copy of Object

The deep copy of the object is not a lot more difficult than the array, listing two methods.

Universal for loop implements deep copy of object

In many cases, the For loop can solve big problems.

var obj = {  name: ‘FungLeo‘,  sex: ‘man‘,  old: ‘18‘}var obj2 = copyObj(obj)function copyObj(obj) { let res = {} for (var key in obj) { res[key] = obj[key] } return res}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

Convert to JSON and convert to object to implement deep copy of object

The code above is quite long, so use a more violent approach! The code is as follows:

var obj = {  name: ‘FungLeo‘,  sex: ‘man‘,  old: ‘18‘}var obj2 = JSON.parse(JSON.stringify(obj))

• 1
• 2
• 3
• 4
• 5
• 6

There is no explanation for this principle, it is simple and rough!

October 31, 2017 supplement: Extended operators implement deep copies of objects

var obj = {  name: ‘FungLeo‘,  sex: ‘man‘,  old: ‘18‘}var { ...obj2 } = objobj.old = ‘22‘console.log(obj)console.log(obj2)

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

The results of the operation are as follows:

Summary

The deep copy of arrays and objects is the most common application in JS. It is necessary to understand the various methods. We hope to help you.
In this paper, the exception is not processed, mainly in the theory. More arrays and how to manipulate the object, you can refer to lodash the source code, to see its source code can make your JS base becomes very strong. I'm learning, too.

Copy arrays and objects, deep copy, shallow copy