浅克隆
浅克隆是指：只克隆数组/对象的第一层级内容（开辟新的堆内存），而第二层级及以上层级的内容则直接引用（使用原来第二层级及以上层级的堆内存）。如果对克隆后对象的二级或以上层级进行修改，那么克隆前对象的二级或以上层级也会跟着被修改。
例如：现有一个对象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()函数
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
- 数组浅克隆方案一：基于forEach或map
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.stringfiy、JSON.parse实现深克隆
原理：先将数组或对象基于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;
}