【JavaScript 基础】深浅拷贝与赋值 三者区别及深浅拷贝实现方式

三者关系

类型	和原数组是否指向同一个对象	第一层数据为基本数据类型	原数据中包含引用数据类型
赋值	是	改变会使原数据一同改变	改变会使原数据一同改变
浅拷贝	否	改变不会使原数据一同改变	改变会使原数据一同改变
深拷贝	否	改变不会使原数据一同改变	改变不会使原数据一同改变

赋值

当把一个对象赋值给一个新的变量的时，赋值的其实是该对象在栈中的地址，而不是在堆中的数据。赋值后的新对象和当前对象这两个对象指向的是同一个存储空间，两者对象是联动的，无论两者之间哪个对象发生改变，都会影响存储空间的内容

// 对象赋值
var obj1 = {
    'name' : 'mirror',
    'age' :  '3',
    'language' : [1,2,3],
};
var obj2 = obj1;
obj2.name = "no-mirror";
obj2.language = ["一","二","三"];
console.log('obj1',obj1)
console.log('obj2',obj2)

浅拷贝

浅拷贝会创建一个新的对象，这个对象有着原始对象属性值的一份精确拷贝
如果属性是基本类型，拷贝的就是基本类型的值；
如果属性是引用类型，拷贝的就是内存地址，如果改变了地址，或者地址对应的堆内存中数据发生改变，都会影响原对象

// 浅拷贝
 var obj1 = {
    'name' : 'zhangsan',
    'age' :  '18',
    'language' : [1,[2,3],[4,5]],
};
 var obj3 = shallowCopy(obj1);
 obj3.name = "lisi";
 obj3.language[1] = ["二","三"];
 function shallowCopy(src) {
    var dst = {};
    for (var prop in src) {
        if (src.hasOwnProperty(prop)) {
            dst[prop] = src[prop];
        }
    }
    return dst;
}
console.log('obj1',obj1)
console.log('obj3',obj3)

浅拷贝的实现

1. Object.assign()
Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。
   Object.assign()进行的是浅拷贝，拷贝的是对象的属性的引用，而不是对象本身。

   var obj = { a: {a: "kobe", b: 39} };
   var initalObj = Object.assign({}, obj);
   initalObj.a.a = "wade";
   console.log(obj.a.a); //wade
   

   **注意：**当object只有一层的时候，是深拷贝

   let obj = {
       username: 'kobe'
       };
   let obj2 = Object.assign({},obj);
   obj2.username = 'wade';
   console.log(obj);//{username: "kobe"}
   

2. Array.prototype.concat()

   let arr = [1, 3, {
       username: 'kobe'
       }];
   let arr2=arr.concat();    
   arr2[2].username = 'wade';
   console.log(arr);
   

   修改新对象会改到原对象:
   

3. Array.prototype.slice()

let arr = [1, 3, {
    username: ' kobe'
    }];
let arr3 = arr.slice();
arr3[2].username = 'wade'
console.log(arr);

同样修改新对象会改到原对象:

深拷贝

深拷贝就是完全拷贝，不仅复制地址，也将原对象中地址对应的资源也复制了一份。

深拷贝的实现方式

1. JSON.parse(JSON.stringify())

let arr = [1, 3, {
    username: ' kobe'
}];
let arr4 = JSON.parse(JSON.stringify(arr));
arr4[2].username = 'duncan'; 
console.log(arr, arr4)

原理： 用JSON.stringify将对象转成JSON字符串，再用JSON.parse()把字符串解析成对象，一去一来，新的对象产生了，而且对象会开辟新的栈，实现深拷贝。

这种方法虽然可以实现数组或对象深拷贝,但不能处理函数和正则

还可以通过自定义函数方式实现

相关好文推荐

浅拷贝与深拷贝：https://juejin.cn/post/6844904197595332622#heading-10
如何写出一个惊艳面试官的深拷贝?：https://segmentfault.com/a/1190000020255831