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

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

In JS, the copy of the array and the object is assumed = to be duplicated using the number. That's just a shallow copy.

For example, to demonstrate:

Above arrchanges 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

All the way to Rome, to achieve a deep copy of the array. There are several ways to do this. The proportions are as follows:

A For loop implements a deep copy of an array

The For loop is very useful. Suppose you don't know the advanced method. We can complete most of our needs through a for loop.

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

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

Slice method implements deep copy of array

This code is easy to implement. The principle is also better understood, he is to extract the original array out of the part to form a new array. We're just going to set the deep copy of the array to get out of all that can be finished.

The code is as follows:

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

The results of the execution are as follows:

A lot of other slice content please visit W3school JavaScript slice method

Concat method implements deep copy of array

This code is also very easy. The principle is even more brutal.

It is a method for connecting multiple arrays to form a new array. So. We just have to connect to it ourselves, we can complete the deep copy of the array. The code is as follows:

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

The results of the execution are as follows:

A lot of other concat content please visit W3school JavaScript concat method

Deep copy of Object

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

Universal for loop implements deep copy of object

In many cases, a for loop can solve a big problem.

var obj = {  ‘FungLeo‘,  ‘man‘,  ‘18‘}var obj2 = copyObj(obj)function copyObj(obj) {  let res = {}  for (varin obj) {    res[key] = obj[key]  }  return res}

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

The code above is really longer, so use a more violent approach. The code is as follows:

var obj = {  ‘FungLeo‘,  ‘man‘,  ‘18‘}varJSON.parse(JSON.stringify(obj))

There is no explanation for this principle, it is simply rough enough.

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. Many other arrays and the operation of the object, you can lodash refer to the source code, to see its source can make your JS base becomes very strong. I am also in the study.

Copyright statement: This article by Fungleo original. Agree to reprint, but reprint must note the initial link.

Thank you.

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