前言
记录下日常使用过的各种深浅克隆版本
shallowClone(浅克隆)
基础版:
// 浅克隆函数
function shallowClone(o) {
const obj = {};
for ( let i in o) {
obj[i] = o[i];
}
return obj;
}
// 被克隆对象
const oldObj = {
a: 1,
b: [ 'e', 'f', 'g' ],
c: { h: { i: 2 } }
};
const newObj = shallowClone(oldObj);
console.log(newObj.c.h, oldObj.c.h); // { i: 2 } { i: 2 }
console.log(oldObj.c.h === newObj.c.h); // true
复制代码
引用:
https://juejin.im/post/5abb55ee6fb9a028e33b7e0a
精简版:
function shallowClone(obj){
return Object.assign({},obj)
}
复制代码
如果不要求遍历原型链上的属性,可以用Object.assign
npm popular版:
npm install --save shallow-clone
var clone = require('shallow-clone');
var arr = [{ 'a': 0 }, { 'b': 1 }]
var foo = clone(arr);
clone(0)
clone((new Date()))
复制代码
支持Array,Object,Number,Date,Reg,Map,Set
https://github.com/jonschlinkert/shallow-clone
deepCone(深克隆)
偏门版:
function deepClone(oldObj){
return JSON.parse(JSON.stringify(oldObj));
}
复制代码
缺点:
-
他无法实现对函数 、RegExp等特殊对象的克隆
-
会抛弃对象的constructor,所有的构造函数会指向Object
-
对象有循环引用,会报错
引用:
https://juejin.im/post/5abb55ee6fb9a028e33b7e0a
npm popular版:
npm排行靠前的库:clone-deep。
const clone = require('shallow-clone');
const typeOf = require('kind-of');
function cloneDeep(val, instanceClone) {
switch (typeOf(val)) {
case 'object':
return cloneObjectDeep(val, instanceClone);
case 'array':
return cloneArrayDeep(val, instanceClone);
default: {
return clone(val);
}
}
}
function cloneObjectDeep(val, instanceClone) {
if (typeof instanceClone === 'function') {
return instanceClone(val);
}
if (typeOf(val) === 'object') {
const res = new val.constructor();
for (const key in val) {
res[key] = cloneDeep(val[key], instanceClone);
}
return res;
}
return val;
}
function cloneArrayDeep(val, instanceClone) {
const res = new val.constructor(val.length);
for (let i = 0; i < val.length; i++) {
res[i] = cloneDeep(val[i], instanceClone);
}
return res;
}
复制代码
引用
https://github.com/thebearingedge/deep-clone
正统版:
lodash.cloneDeep