深入理解 JavaScript 之 浅拷贝和深拷贝
1、数据类型
数据类型分为两种， 基本类型 和 引用类型
基本类型： String, Number, Boolean, Null, Undefined，Symbol
引用类型： Object，Array，Date，Function，regexp…
1.1 区别
基本类型是按值访问的，不会影响到其他数据，例如：
var a = '前端'
var b = a
a = '前端工程师'
b // 前端
引用类型的值是按地址访问的，简单的赋值，实际上只是把地址复制了一遍，修改任意一个值会影响到另外一个，例如：
var a = [1,2,3,4]
var b = a
a[1] = '已修改'
b // [1, "已修改", 3, 4]
2、什么是深/浅拷贝？
-
深拷贝和浅拷贝是只针对引用数据类型的。
-
浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。
-
深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。
2.1 为什么要使用深拷贝？
我们希望在改变新的数组（对象）的时候，不改变原数组（对象）
3、浅拷贝的实现方式
3.1 Object.assign()
Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。
注意：当object只有一层的时候，是深拷贝
let obj1 = { person: {name: "kobe", age: 41},sports:'basketball' };
let obj2 = Object.assign({}, obj1);
obj2.person.name = "wade";
obj2.sports = 'football'
console.log(obj1); // { person: { name: 'wade', age: 41 }, sports: 'basketball' }
3.2 展开运算符…
展开运算符是一个 es6 / es2015特性，它提供了一种非常方便的方式来执行浅拷贝，这与 Object.assign ()的功能相同。
let obj1 = { name: 'Kobe', address:{x:100,y:100}}
let obj2= {... obj1}
obj1.address.x = 200;
obj1.name = 'wade'
console.log('obj2',obj2) // obj2 { name: 'Kobe', address: { x: 200, y: 100 } }
3.3 Array.prototype.concat()
let arr = [1, 3, {
username: 'kobe'
}];
let arr2 = arr.concat();
arr2[2].username = 'wade';
console.log(arr); //[ 1, 3, { username: 'wade' } ]
3.4 Array.prototype.slice()
let arr = [1, 3, {
username: ' kobe'
}];
let arr3 = arr.slice();
arr3[2].username = 'wade'
console.log(arr); // [ 1, 3, { username: 'wade' } ]
4、深拷贝的实现方式
4.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)
这种实现深拷贝的方法有局限性，它只适用于一般数据的拷贝（对象、数组），有以下情况需要注意：
let obj = {
age: 18,
hh: NaN,
isInfinite: 1.7976931348623157E+10308,
minusInfinity: -1.7976931348623157E+10308,
date: new Date(),
reg: new RegExp('\\w+'),
err: new Error('error message'),
fn: function () {
console.log('fn');
},
hh: undefined
};
let objCopy = JSON.parse(JSON.stringify(obj));
console.log('obj', obj);
console.log('objCopy', objCopy);
总结：
- 不支持函数
- 不支持undefined（支持null）
- 不支持循环引用，比如 a = {name: ‘a’}; a.self = a; a2 = JSON.parse(JSON.stringify(a))
- 不支持Date，会变成 ISO8601 格式的字符串
- 不支持正则表达式
- 不支持Symbol
以上，如果拷贝的对象不涉及上面的情况，可以使用 JSON.parse(JSON.stringify(obj)) 实现深拷贝。
参考资料：关于 JSON.parse(JSON.stringify(obj)) 实现深拷贝的一些坑
4.2 手写递归方法
递归方法实现深度克隆原理：遍历对象、数组直到里边都是基本数据类型，然后再去复制，就是深度拷贝
还有一个终极问题，对象有环怎么办？递归不就永远出不来了？ 别慌，用缓存解决。我们把原对象和克隆过的对象都放进缓存列表，如果有环，返回对应的新对象即可。
class DeepClone {
constructor() {
this.cacheList = [];
}
clone(source) {
if (source instanceof Object) {
const cache = this.findCache(source); // 如果找到缓存，直接返回
if (cache) return cache;
else {
let target;
if (target instanceof Array) {
target = new Array();
} else if (target instanceof Function) {
target = function () {
return source.apply(this, arguments);
};
} else if (target instanceof Date) {
target = new Date(source);
} else if (target instanceof RegExp) {
target = new RegExp(source.source, source.flags);
} else {
target = new Object(); // 不要忘记普通对象
}
this.cacheList.push([source, target]); // 把原对象和新对象放进缓存列表
for (let key in source) {
if (source.hasOwnProperty(key)) {
// 不拷贝原型上的属性，浪费内存
target[key] = this.clone(source[key]); // 递归
}
}
return target;
}
} else {
return source;
}
}
findCache(source) {
for (let i = 0; i < this.cacheList.length; ++i) {
if (this.cacheList[i][0] === source) {
return this.cacheList[i][1];
}
}
}
}
总结：
对于递归克隆的深拷贝，核心有三点：
- 对象分类
- 递归
- 用缓存对付环
递归克隆看起来很强大，但是完美无缺吗？其实还是有不小的距离：
- 对象类型支持不够多（Buffer，Map，Set等都不支持）
- 存在递归爆栈的风险
如果要解决这些问题，实现一个”完美“的深拷贝，只能求教上百行代码的 Lodash.cloneDeep() 了 。
参考资料
[1] 前端手写系列01-深拷贝的两种实现与局限