ES6深拷贝与浅拷贝

Posted 2020-11-20

javascript 中变量的赋值

结论：JavaScript中变量的赋值分为「传值」与「传址」。

基本数据类型的赋值，就是「传值」；而引用类型变量赋值，实际上是「传址」。
基本数据类型变量的赋值、比较，只是值的赋值和比较，也即栈内存中的数据的拷贝和比较，参见如下代码：

var num1 = 123;
var num2 = 123;
var num3 = num1;
num1 === num2; // true
num1 === num3; // true
num1 = 456;
num1 === num2; // false
num1 === num3; // false

引用数据类型变量的赋值、比较，只是存于栈内存中的堆内存地址的拷贝、比较，参加如下代码：

var arr1 = [1, 2, 3];
var arr2 = [1, 2, 3];
var arr3 = arr1;
arr1 === arr2; // false
arr1 === arr3; // true
arr1 = [1, 2, 3];
arr1 === arr2; // false
arr1 === arr3; // false

JavaScript 中变量的拷贝

JavaScript中的拷贝区分为「浅拷贝」与「深拷贝」。

浅拷贝

浅拷贝只会将对象的各个属性进行依次复制，并不会进行递归复制，也就是说只会进行赋值目标对象的第一层属性。

对于目标对象第一层为基本数据类型的数据，就是直接赋值，即「传值」；而对于目标对象第一层为引用数据类型的数据，就是直接赋存于栈内存中的堆内存地址，即「传址」。

深拷贝

深拷贝不同于浅拷贝，它不但拷贝目标对象的第一层属性，而且还递归拷贝目标对象的所有属性。

一般来说，在JavaScript中考虑复合类型的深层复制的时候，往往就是指对于 Date 、Object 与 Array 这三个复合类型的处理。我们能想到的最常用的方法就是先创建一个空的新对象，然后递归遍历旧对象，直到发现基础类型的子节点才赋予到新对象对应的位置。

不过这种方法会存在一个问题，就是 JavaScript 中存在着神奇的原型机制，并且这个原型会在遍历的时候出现，然后需要考虑原型应不应该被赋予给新对象。那么在遍历的过程中，我们可以考虑使用 hasOwnProperty 方法来判断是否过滤掉那些继承自原型链上的属性。

引用

1，https://juejin.im/post/5acc7e606fb9a028c67609f7
2，https://zhuanlan.zhihu.com/p/28508795
3，http://www.zsoltnagy.eu/cloning-objects-in-javascript/
4,http://www.cnblogs.com/penghuwan/p/7359026.html
5,https://blog.csdn.net/github_38524608/article/details/78812761
6,https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax