前言
最近闲来无事复习一下基础知识,身边的同事要去头条了,我深感恐慌啊。再不学习就只能去送外卖了。
btw,深拷贝和浅拷贝的概念只存在与引用类型之间,所以以下的讨论都是对象类型。
赋值
赋值操作就是让一个对象指向另一个对象,两个对象共享一块内存(!只讨论对象类型,基础类型不是酱紫)。如下:
var a = { x: 5, y: { z: 6 } };
var b = a;
对象a的任一属性的修改都会导致对象b的更改,这个很简单,就不赘述了。
浅拷贝
浅拷贝是两个对象指向两块的不同的内存,对象的属性为基础类型时,拥有不同的内存,当对象的属性为对象类型时,指向同一块内存。
上图:
实现方法
- Object.assign
var a = { x: 5, y: { z: 6 } };
var b = Object.assign({}, a);
- 解构语法
var a = { x: 5, y: { z: 6 } };
var b = {...a};
- 数组的concat、slice方法
这里要注意的是,如果我不去改b.y.z
的值,而是最直接去改b.y
的值,那么a对象就不会受影响。
深拷贝
深拷贝是两块独立空间,大家之间互不影响,如图。
实现方法
- JSON.stringify & JSON.parse
var a = { x: 5, y: { z: 6 } };
var b = JSON.stringify(a);
b = JSON.parse(b);
但是这个方法有坑!! 如果对象的属性是 undefined
、 function
或者是new Date()
就会出问题。undefined
和function
会直接被过滤掉,new Date()
的输出有问题。
直接在控制台输出的new Date()
长这个样子:
2. lodash 的cloneDeep
var a = { x: 5, y: { z: 6 } };
var b = cloneDeep(a);
最后
以上,如有错漏,恳请指正!