浅克隆是指:只克隆数组/对象的第一层级内容(开辟新的堆内存),而第二层级及以上层级的内容则直接引用(使用原来第二层级及以上层级的堆内存)。如果对克隆后对象的二级或以上层级进行修改,那么克隆前对象的二级或以上层级也会跟着被修改。
例如:现有一个对象obj1对应堆内存地址0x000,obj1对象中还有个子对象obj1_1对应堆内存0x001,现在想对obj1对象进行浅克隆,则会创建一个新的对象obj2对应新的堆内存地址0x002,对于对象obj1中的基本类型数据则会直接拷贝到obj2中,而obj1中的引用类型也就是子对象obj1_1则会直接被新对象obj2引用,而不是创建新的堆内存。后面如果通过操作obj2对obj2中的子对象obj1_1进行更改,那么obj1中的obj1_1也会随着变化,因为它们用的是同一个堆内存。来看下面的图会更直观一些
let obj1 = {
python: "python",
java: "java"
fontend: {
javascript: "javascript",
html: "html"
}
}
let obj2 = {
};//创建一个新对象(开辟新的堆内存)
//把obj1中私有的key和Symbol类型的key存在数组中
let keys = [
...Object.keys(obj1),//展开运算符
...Object.getOwnPropertySymbols(obj1)
]
keys.forEach(key => {
obj2[key] = obj1[key];
});
console.log(obj1 === obj2); //false
console.log(obj1.fontend === obj2.fontend);// true
let obj1 = {
python: "python",
java: "java"
fontend: {
javascript: "javascript",
html: "html"
}
}
let obj2 = {
...obj1
};
console.log(obj1 === obj2); //false
console.log(obj1.fontend === obj2.fontend);// true
Object.assign([obj1], …[obj2]):该方法接收多个参数,执行后会将obj2中的键值对合并到obj1中,并将obj1的堆内存地址返回。注意:这里返回的不是新的对象,而是把第一个参数作为返回值返回。
所以我们可以利用这个特点进行对象的浅克隆
let obj1 = {
python: "python",
java: "java"
fontend: {
javascript: "javascript",
html: "html"
}
}
//因为assign方法默认会把第一个参数返回,所以这里传一个空对象进去,执行asign方法将obj1合并后,再将合并后的对象返回,就达到了克隆目的
let obj2 = Object.assign({
}, obj1);
console.log(obj1 === obj2); //false
console.log(obj1.fontend === obj2.fontend);// true
let arr = [12,3,[4,50]];
let arr2 = [];
arr.forEach((item, index) => {
arr2[index] = item;
});
arr2 = arr.map(item => item);
数组浅克隆方案二:基于展开运算符或Object.asing(),与对象相同
let arr = [12,3,[4,50]];
let arr2 = [
...arr
];
arr2 = Object.assign([], arr);
数据浅克隆方案三:基于数组的slice方法,不传参数默认从数组第一项开始截取到数组的最后一项
let arr = [12,3,[4,50]];
let arr2 = arr.slice();
//定义一个用于检测数据类型的通用方法
function toType(value){
let obj = {
};
['Number','String','Boolean','Null','Undefined','Symbol','BigInt','Function','GeneratorFunction','Date','RegExp','Object','Error'].forEach(item => {
obj["[object "+item+"]"] = item.toLowerCase()
});
return obj[Object.prototype.toString.call(value)];
}
//定义一个获取对象/数组所有私有属性(包括Symbol类型)的方法
function getOwnProperties(obj){
//数据类型检测
if(obj == null) return [];
//获取所有私有属性包括Symbol类型
let keys = [
...Object.keys(obj),
...Object.getOwnPropertySymbols(obj)
]
return keys;
}
function shallowClone(obj){
//如果是基本数据类型值,则传啥就返回啥
let type = toType(obj);
if(/^(number|string|boolean|null|undefined|symbol|bigint)$/.test(type)) return obj;
if(type === 'function') {
//返回一个不同函数,但最后执行效果跟原始函数一致
return function proxy(){
obj();
}
}
//if(type === 'regexp') return new RegExp(obj);
//if(type === 'date') return new Date(obj);
if(/^(regexp|date)$/.test(type)) return new obj.constructor(obj);
if(type === 'error') return new Error(obj.message);
let keys = getOwnProperties(obj);
let clone = {
};
Array.isArray(obj) ? clone = [] : null;
keys.forEach(item => {
clone[item] = obj[item];
});
return clone;
}
相信经过前面对数组和对象的浅克隆的了解,深克隆也就不难理解了;
前面说浅克隆是只克隆数组或对象的第一层级,二级及以上层级是直接引用;那么深克隆则是克隆数组或对象的每个层级,不管一个对象或数组有多少层级,那么当我们进行深克隆时每一个层级都会开辟一块新的堆内存地址。对于克隆后对象/数组的任何层级做任何修改都不会影响到克隆前的对象/数组,因为它们都是独立的不同的堆内存。如下图所示
原理:先将数组或对象基于JSON.stringify转换为字符串,然后再基于JSON.parse把字符串转换为对象,此时对象中对应每个层级都会开辟一块全新的堆内存来存储
缺点:因为JSON.stringify变为字符串,很多类型是不支持的
- 正则/Math数学函数会被处理为空对象
- 具备函数/Symbol/undefined属性值的属性会被直接删除掉
- BigInt无法处理,会报错
- 日期对象转换后变为字符串
let obj1 = {
python: "python",
java: "java"
fontend: {
javascript: "javascript",
html: "html"
}
}
let obj2 = JSON.parse(JSON.stringify(obj1));
数组/对象深克隆方案二:自己撸代码
function toType(value){
let obj = {
};
['Number','String','Boolean','Null','Undefined','Symbol','BigInt','Function','GeneratorFunction','Date','RegExp','Object',"Error"].forEach(item => {
obj["[object "+item+"]"] = item.toLowerCase()
});
return obj[Object.prototype.toString.call(value)];
}
//定义一个获取对象/数组所有私有属性(包括Symbol类型)的方法
function getOwnProperties(obj){
//数据类型检测
if(obj == null) return [];
//获取所有私有属性包括Symbol类型
let keys = [
...Object.keys(obj),
...Object.getOwnPropertySymbols(obj)
]
return keys;
}
function deepClone(obj, cache = new Set()){
/*
if(/^(number|string|boolean|null|undefined|symbol|bigint)$/.test(type)) return obj;
if(type === 'function') {
//返回一个不同函数,但最后执行效果跟原始函数一致
return function proxy(){
obj();
}
}
//if(type === 'regexp') return new RegExp(obj);
//if(type === 'date') return new Date(obj);
if(/^(regexp|date)$/.test(type)) return new obj.constructor(obj);
if(type === 'error') return new Error(obj.message);
*/
//如果是基本数据类型值,则传啥就返回啥
let type = toType(obj);
//如果不是数组或对象则直接按浅克隆处理
if(!/^(array|object)$/.test(type)) return shallowClone(obj);
let keys = getOwnProperties(obj);
let clone = {
};
Array.isArray(obj) ? clone = [] : null;
if(cache.has(obj)) return obj;
cache.add(obj);
keys.forEach(item => {
//if(/^(array|object)$/.test(toType(obj[item]))){
// clone[item] = deepClone(obj[item]);
//}
clone[item] = deepClone(obj[item], cache);
});
return clone;
}