一、关于深拷贝
关于深拷贝与浅拷贝的理解,这里不过多的进行描述。因为此前自己总结了一次深拷贝的常见方法,JSON.parse(JSON.stringify(obj)),jQury的$.extend(true,{},obj),for...in加递归
已经满足了大部分的业务需求。具体内容可见JavaScript之深拷贝和浅拷贝
二、然而,有坑!
const data = {
arr: ["test0", "test1"],
obj: { title: '标题', dataIndex: "name" },
onClick: () => { console.log('this is a function') },
date: new Date(),
}
const deepCopy = function (obj) {
var str, newobj = obj.constructor === Array ? [] : {};
if (typeof obj !== 'object') {
return;
} else if (window.JSON) {
str = JSON.stringify(obj), //json对象转字符串,系列化
newobj = JSON.parse(str); //还原为json对象
} else {
for (var i in obj) {
newobj[i] = typeof obj[i] === 'object' ?
deepCopy(obj[i]) : obj[i];
}
}
return newobj;
};
const result1 = JSON.parse(JSON.stringify(data));
const result2 = deepCopy(data);
console.log('------------------------------------');
console.log(result1);
console.log('------------------------------------');
console.log('------------------------------------');
console.log(result2);
console.log('------------------------------------');
由以下输出结果,可以看出,这两个方法无法拷贝含有function,date属性的对象!!!
三、解决方案
1. 结构化克隆算法
//需要进一步完善处理对待各种类型;
const deepCopy = (obj, hash = new WeakMap()) => {
let cloneObj
let Constructor = obj.constructor
switch (Constructor) {
case Object:
cloneObj = new Constructor(obj)
break
case RegExp:
cloneObj = new Constructor(obj)
break
case Date:
cloneObj = new Constructor(obj.getTime())
break
default:
if (hash.has(obj)) return hash.get(obj)
cloneObj = new Constructor()
hash.set(obj, cloneObj)
}
for (let key in obj) {
cloneObj[key] = obj[key].constructor === constructor ? deepCopy(obj[key], hash) : obj[key];
}
return cloneObj
}
const result3 = deepCopy(data);
console.log('------------------------------------');
console.log(result3);
console.log('------------------------------------');
参考MDN上的结构化克隆算法,下图为输出结果,达到预期效果:
2. lodash中的_.cloneDeep() 方法
目前是我觉得最直接,最完整的解决方案,毕竟可以一句话解决问题,绝不多说一句(其实我就是懒)。
lodash中文文档
[1]: https://juejin.im/post/5b235b726fb9a00e8a3e4e88