JS 數組和對象的淺拷貝和深拷貝

JS 數組和對象的淺拷貝和深拷貝

---

一，數組的淺拷貝

1，淺拷貝

    let arr=[1,2,3,4,5];
    // es5
    const tt01 = arr.slice();
    const tt02 = arr.concat();
    //es6
    const tt03 = [...arr];
    
    tt01.push('dd');
    tt02.push('dd');
    tt03.push('dd');
    
    console.log(tt01); // [1,2,3,4,5,'dd']
    console.log(tt02); // [1,2,3,4,5,'dd']
    console.log(tt03); // [1,2,3,4,5,'dd']
    
    console.log(arr); // [1,2,3,4,5]

1，對於上面的單一字符數組來說可以實現深淺拷貝

    let arr=[1,{name: 'jack'},{age: 20}];
        
    const tt01 = arr.slice();
    const tt02 = arr.concat();
    const tt03 = [...arr];
    
    tt01[1].name = 'test';
    tt02.push('dd');
    tt03.push('dd');
    
    console.log(tt01);
    console.log(tt02);
    console.log(tt03);
    
    console.log(arr);

1，當數組是上面這種有對象子集時，就只能實現淺拷貝，修改就會互相影響，因爲對象內部都是指針指向的內存地址。

2，深拷貝

    let arr=[1,{name: 'jack'},{age: 20}];
        
    const tt01 = JSON.parse(JSON.stringify(arr));
   
    tt01[1].name = 'test';
    
    console.log(tt01);
    
    console.log(arr);

二，對象的深淺拷貝

1，淺拷貝

const obj = {
            a: 1,
            name: 'jack'
        };
        
        const obj01 = Object.assign({}, obj);
        const obj02 = {...obj};
        
        obj01.a = 2;
        
        console.log(obj01); // {a: 2, name: "jack"}
        console.log(obj02); // {a: 1, name: "jack"}
        console.log(obj); // {a: 1, name: "jack"}

2，深拷貝

const obj = {
            a: { name: 'ross'},
            b: [1,2],
            c: 3
        };
    
        const obj01 =JSON.parse( JSON.stringify(obj));
        obj01.a.name = 'joe';
        obj01.b[0] = 33;
        
        console.log(obj01);
        console.log(obj);

三，使用遞歸的方式實現數組、對象的深拷貝

function deepClone(obj) {
    //判斷拷貝的要進行深拷貝的是數組還是對象，是數組的話進行數組拷貝，對象的話進行對象拷貝
    let objClone = Array.isArray(obj) ? [] : {};
    //進行深拷貝的不能爲空，並且是對象或者是數組
    if (obj && typeof obj === "object") {
        for (key in obj) {
            if (obj.hasOwnProperty(key)) {
                if (obj[key] && typeof obj[key] === "object") {
                    objClone[key] = deepClone(obj[key]);
                } else {
                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
}