This is the 17th day of my participation in the August Text Challenge.More challenges in August

Three, to achieve depth copy

Object.assign({}, c) and json.parse (json.stringify (c)) (beggar edition) have been introduced before, and this article will continue to implement other types of shallow copy

3.1 shallow copy

For shallow copy is generally a line of code on the line, the purpose of the implementation is relatively simple, only need the first layer for entity replication, mainly divided into two camps, one is ancient times, one is modern civilization.

Ancient times

In fact, it is also used now, not so old 😂, but the implementation is not so modern, the code is longer…

3.1.1 Array.prototype.slice() 和 Array.prototype.concat()

Take advantage of the fact that these two methods return new arrays to shallow copy arrays (because these two methods are array methods 😂)

let a = [[1.2].2.3.4]
let b = a.slice() // let b = a.concat()
b[0] [0] = 10
b[1] = 20       
Copy the code

The results of A and B are shown in the following figure, which is consistent with the weird phenomenon of shallow copy I mentioned above. The first layer copies entities while the second layer copies references, so when B [1] changes, A [1] does not change. When b[0][0] changes, a[0][0] also changes.

3.1.2 Object Shallow copy

No older method implementation is found, you can use a function loop to iterate through the implementation

function cloneObj (traget) {
    let ret = {}
    for (let key in target) {
        ret[key] = target[key]
    }
    return ret
}
Copy the code

Modern civilization

This can be implemented in two main ways in ES6: Object.assign and extension operators

3.1.3 Object.assign(target, ... sources)
let obj = {
  name: 'shengjingyin'.cc: {
    name:"juliya"}},let newObj = Object.assign({},  obj)
​
obj.name = 'juliya'
obj.cc.name = 'juliya'
Copy the code

3.1.4… Extended operator

The only difference is that the operation of the = sign is different, and the result is exactly the same. This is modernization, ok? Simple, comfortable and universal.

letnewObj = { ... obj }//-------- is the same for arrays -------
let oldArr = [[1.2].2.3.4]
let newArr = [ ...oldArr ]
Copy the code

Shallow copy introduces several methods of ancient and modern civilization. If I had to choose, I would recommend the latter two, especially the extension operators

3.2 deep copy

Deep copy can be implemented in many different ways (the main idea is recursion)

3.2.1 JSON.parse(JSON.stringify( target ))

let a = [[1.2].2.3.4]
let b = JSON.parse(JSON.stringify(a))
a[0] [0] = 5
a[1] = 20
Copy the code

The result is as follows: The multi-layer data is all replicated entities without any correlation

3.2.2 recursive

Simple version of the recursive deep copy, the main idea: determine whether the value is an object, is the object of recursive call, this version has many kinds!!

function cloneDeep1(source) {
    var target = {};
    for(var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
            if (typeof source[key] === 'object') {
                target[key] = cloneDeep1(source[key]); // Notice here
            } else{ target[key] = source[key]; }}}return target;
}
Copy the code