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;
}