js 深浅拷贝

1.深浅拷贝理解

浅拷贝：拷贝基本数据类型时，不受任何影响，当拷贝引用类型时，源对象也会被修改。

深拷贝：深拷贝就是完完全全拷贝一份新的对象，它会在内存的堆区域重新开辟空间，修改拷贝对象就不会影响到源对象

2.实现深拷贝的四种方式

1、Object.assign
注意：Object.assign只针对第一层拷贝，对多层还是浅拷贝方式

let a = {
   name : '张三',
    age : '18',
    car: {
     	byd: '100'
    }
}
let b = {};
Object.assign(b,a);
b.name = '李四';
b.car.byd = '200';
console.log('a：',a);
console.log('b：',b);

2、es6的展开语法
注意：es6的展开语法只针对第一层，对多层还是浅拷贝方式

let a = {
   name : '张三',
    age : '18'
}
let b = {...a};
b.name = '李四';
console.log('a：',a);
console.log('b：',b);

3、JSON.parse(JSON.stringify(待拷贝对象))
注意：可实现多层拷贝，但是没法拷贝内部函数

let a = {
    name : '张三',
    age : '18',
    like(){
        console.log('喜欢唱歌、滑冰');
    }
}
let b =JSON.parse( JSON.stringify(a) );
b.name = '李四';
console.log('a：',a);
console.log('b：',b);

4、jQuery 中的 $.extend
注意：可实现多层拷贝. 需要引入jQuery.js

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>
let a = {
   name : '张三',
    age : '18',
    car: {
     	byd: '100'
    }
}
let b = {};
$.extend(b, a);
b.name = '李四';
b.car.byd = '200';
console.log('a：',a);
console.log('b：',b);

5、手写递归

function copyFn(obj) {
    let newObj = Array.isArray(obj) ? [] : {}
    for (const key in obj) {
        if (typeof obj[key] === 'object') {
            newObj[key] = copyFn(obj[key])
        }else{
            newObj[key] = obj[key]
        }
    }
    return newObj
}
let a = {
   name : '张三',
    age : '18',
    car: {
     	byd: '100'
    }
}
 let b = copyFn(a);
b.name = '李四';
b.car.byd = '200';
console.log('a：',a);
console.log('b：',b);