深拷贝浅拷贝及其实现方法

目录

1.如何区分深拷贝与浅拷贝

2.实现深拷贝的方法

3.实现浅拷贝的方法

---

1.如何区分深拷贝与浅拷贝

简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝，拿人手短，如果B没变，那就是深拷贝，自食其力。

• 1. 如果是基本数据类型，名字和值都会储存在栈内存中

• 2. 如果是引用数据类型，名字存在栈内存中，值存在堆内存中，但是栈内存会提供一个引用的地址指向堆内存中的值

2.实现深拷贝的方法

• 拓展运算符...

PS:拓展运算符拷贝一级数据为深拷贝，若内部有深层嵌套数据则为浅拷贝。

var a1 = {
    w:'first',
    z:'second',
    y:'third',
    a2:{
        newchild:'111'
    }
}
var b1 = {...a1};
a1.w='five';
console.log(a1.w);//five
console.log(b1.w);//first
a1.a2.newchild = "123456"
console.log(a1.a2);//123456
console.log(b1.a2);//123456

• json.parse()+json.stringify()

var obj1 = {
    a: 1,
    b: 2,
    c: 3
}
var obj2 = JSON.parse(JSON.stringify(obj1));
obj1.a = 5;
console.log(obj1.a);  // 5
console.log(obj2.a)  //1

• jQuery.extend(boolean,desc,src1,src2,src3...)

 extend(boolean,dest,src1,src2,src3...)

 第一个参数boolean代表是否进行深度拷贝

function deepCloneExtend(arr){
    let arrClone=[];//es6 
    arrClone=$.extend(true,[],arr);
    return arrClone;
}
var arr1 = ["aaa",1,2,{obj:{newValue:'newValue'}},]
console.log(deepCloneExtend(arr1));

3.实现浅拷贝的方法

• 1.Object.assgin()

Object.assign 是 Object 的一个方法，该方法可以用于 JS 对象的合并等多个用途，其中一个用途就是可以进行浅拷贝。该方法的第一个参数是拷贝的目标对象，后面的参数是拷贝的来源对象（也可以是多个来源）。

const obj = {};
const source = {
    name: 'nordon',
    info: {
        age: 18
    }
};

Object.assign(obj, source);
console.log(obj); // {name: 'nordon', info: {…}}

注意点：

• 它不会拷贝对象的继承属性；
• 它不会拷贝对象的不可枚举的属性；
• 可以拷贝 Symbol 类型的属性。

• 2.拓展运算符...

同深拷贝和object.assgin()道理相同

var a1 = {
    w: 'first',
    z: 'second',
    y: 'third',
    a2: {
        newchild: '111'
    }
}
var b1 = { ...a1 };
a1.w = 'five';
console.log(a1.w);//five
console.log(b1.w);//first
a1.a2.newchild = "123456"
console.log(a1.a2);//123456
console.log(b1.a2);//123456

 还有Array的concat()和slice()方法也可以实现浅拷贝，这里就不写了，若想了解可以转到下面链接点击这里https://blog.csdn.net/qq_38983511/article/details/120595393?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166158807616781667880043%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=166158807616781667880043&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-2-120595393-null-null.142%5Ev42%5Epc_rank_34_1,185%5Ev2%5Econtrol&utm_term=%E6%B5%85%E6%8B%B7%E8%B4%9D%E5%AE%9E%E7%8E%B0%E6%96%B9%E6%B3%95&spm=1018.2226.3001.4187