一、浅拷贝
浅拷贝特点是：一是对于引用类型数据只会拷贝其引用（内存地址），不会拷贝其值；二是对于具有相同属性的两个数据源，后面的属性值会覆盖掉前面的。对象有Object.assign、展开运算等；数组有slice、concact、展开运算等
1）Object.assign
将一个或多个对象的可枚举或自有属性拷贝到目标对象，并返回修改后的目标对象。也就是说返回值跟目标对象是同一个值。
var target = { a:1 };var source = { a:2, b:{ c:[1] } };
- 引用类型数据会拷贝其引用
var ret = Object.assign(target, source);ret.a.b.c.push(2);console.log(ret); // { a:2, b:{ c:[1,2] } }console.log(source); // { a:2, b:{ c:[1,2] } }
- 支持拷贝Symbol类型属性
Object.assign({}, { a:1, [Symbol("b")]:2 });// logs { a:1, Symbol(b): 2 }
- 支持对象循环引用复制
var o1 = { a:1 };var o2 = { b:2 };o1.ref = o2;o2.ref = o1;Object.assign(o1, o2);// logs { a:1, b:2, ref:[circular] }
2）展开运算符（…）
它不仅可以用于对象的展开，还可以用于数组、Set等。
var source = { a:1 };var ret = { a:2, c:3, ...source };// logs { a:2, c:3 }
二、深拷贝
深拷贝会对所有数据类型的值进行复制。实现深拷贝有多种方式，常用的有JSON.parse、循环遍历对象依次拷贝属性、第三方工具（lodash等）。
function deepCopy(obj) {// 每当递归执行deepCopy时，都会创建了一个新的作用域，// 它跟第一次执行deepCopy时，名称相同但却不会被后面的覆盖var res = Array.isArray(obj) ? [] : {};for (var key in obj) {// 忽略掉原型对象上的属性if (obj.hasOwnProperty(key)) {res[key] = typeof obj[key] === "object"? deepCopy(obj[key]): obj[key];}}return res;}
三、循环引用
循环引用就是一个对象的属性引用另一个对象，而另一个对象的属性又引用该对象，此时就形成了一个首尾相接的环状。
var o1 = { a:1 };var o2 = { b:2 };o1.ref = o2; // { a:1, ref:{ b:2, ref:{...} } }o2.ref = o1; // { b:1, ref:{ a:2, ref:{...} } }
循环引用存在的问题是会导致内存占用过多，进而导致内存泄露。如何解决循环引用在拷贝时报错的问题？看看下面这个例子。
function deepCopy(obj, map = new Map()) {// 暂且不考虑RegExp、Function等拷贝场景var res = Array.isArray(obj) ? [] : {};if (map.get(obj)) {// 当进行到第三次递归时，此时map已经存在对应的valuereturn map.get(obj);}// 第一次obj: { a:1, ref:{ b:2, ... } }// 第二次obj: { b:2, ref:{...} }// 第三次obj: { a:1, ref:{ b:2, ... } }map.set(obj, res);for (var key in obj) {if (obj.hasOwnProperty(key)) {// 这里res的g更新会同步到Map对应的value中res[key] = typeof obj[key] === "object"? deepCopy(obj[key], map): obj[key];}}return res;}// testdeepCopy(o1);
上述代码，通过Map将已访问过的属性记录下来，如果下次再访问到之前的属性，则直接返回已存有的属性值，程序停止往下执行，deepCopy一层层出栈，直到for循环执行完，最后return最终拷贝的结果。
原创文章，作者：guozi，如若转载，请注明出处：https://www.sudun.com/ask/90904.html
