作者:手机用户2502854043 | 来源:互联网 | 2023-10-12 19:53
let obj1 = {
name: 'dog',
array: [1, 2, 3],
son: {
name: 'dogSon'
}
}
obj2 = obj1;
obj2.name = 'cat';
obj2.son.name = 'catSon';
console.log(obj1.name); //cat
console.log(obj1.son.name); //catSon
console.log(obj2.name); //cat
console.log(obj2.son.name); //catSon
相信大家都明白,因为对象的浅拷贝,修改obj2属性后,两个对象的值同时都被修改了。
不理解的小伙伴可以看下我之前写的 '从数据类型上理解深浅拷贝'。
除了调用已有方法,我们该如何手写自己的深拷贝呢?
我们的函数方法起名为cloneDeep,而拷贝肯定返回了一个新的对象newObj。
function cloneDeep(obj){
return newObj;
}
首先要判定拷贝是否是一个对象,如果不是还看它干嘛!直接return结束!
function cloneDeep(obj) {
// 判断要拷贝的是否为对象
if (!obj instanceof Object) {
return;
}
return newObj;
}
对要拷贝的对象进行判断,对返回的newObj设定数据类型。
function cloneDeep(obj) {
if (!obj instanceof Object) {
return;
}
// 判断这个对象是否为数组
let newObj = obj instanceof Array ? [] : {};
return newObj;
}
把对象进行遍历,然后开始进行拷贝。
function cloneDeep(obj) {
if (!obj instanceof Object) {
return;
}
let newObj = obj instanceof Array ? [] : {};
// 通过for...in遍历对象
for (let key in obj) {
newObj[key] = obj[key];
}
return newObj;
}
如果此时执行代码进行验证,我们会发现,目前完成的仅仅是第一层对象的拷贝。
console.log(obj1.name); //dog
console.log(obj1.son.name); //catSon
console.log(obj2.name); //cat
console.log(obj2.son.name); //catSon
因此可以先判断拷贝的属性是否还是一个对象,进行深层次的递归。
function cloneDeep(obj) {
if (!obj instanceof Object) {
return;
}
let newObj = obj instanceof Array ? [] : {};
for (let key in obj) {
// 如果对象的属性还是对象,就进行递归处理
newObj[key] = obj[key] instanceof Object ? cloneDeep(obj[key]) : obj[key];
}
return newObj;
}
这样我们的深拷贝就基本功能就完成了,不过缺点就是for in连带对象原型上的属性一起遍历了。
function cloneDeep(obj) {
if (!obj instanceof Object) {
return;
}
let newObj = obj instanceof Array ? [] : {};
for (let key in obj) {
// 使用 .hasOwnProperty()判断一个对象是否包含自定义属性而不是原型链上的属性
if (obj.hasOwnProperty(key)) {
newObj[key] = obj[key] instanceof Object ? cloneDeep(obj[key]) : obj[key];
}
}
return newObj;
}
最后来验证是否达到深拷贝的功能要求。
function cloneDeep(obj) {
if (!obj instanceof Object) {
return;
}
let newObj = obj instanceof Array ? [] : {};
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
newObj[key] = obj[key] instanceof Object ? cloneDeep(obj[key]) : obj[key];
}
}
return newObj;
}
let obj1 = {
name: 'dog',
array: [1, 2, 3],
son: {
name: 'dogSon'
}
}
obj2 = obj1;
obj2.name = 'cat';
obj2.son.name = 'catSon';
console.log(obj1.name); //dog
console.log(obj1.son.name); //dogSon
console.log(obj2.name); //cat
console.log(obj2.son.name); //catSon
本文来自博客园,作者:辉太狼`,转载请注明原文链接:https://www.cnblogs.com/HuiTaiLang1216/p/15981784.html