js

手写系列--深拷贝,浅拷贝

手写apply/call/bind

Posted by AzirKxs on 2022-11-08
Estimated Reading Time 1 Minutes
Words 397 In Total
Viewed Times

手写系列–深拷贝,浅拷贝

浅拷贝

实现一个对象或者数组的浅拷贝

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
let obj = {
name:'azirkxs'
};
let arr = [{name:'azirkxs'},'haha',22]
function shallowCopy(obj){
//判断是否是一个对象
if(typeof obj !== 'object') return;
//判断该对象是对象还是数组
let newObj = obj instanceof Array ? []:{};
for(let key in obj){
//for in 会遍历一个对象原型上的所有可枚举属性,通过hasOwnProperty可以过滤
if(obj.hasOwnProperty(key)){
newObj[key] = obj[key];
}
}
return newObj;
}
console.log(shallowCopy(obj))
console.log(shallowCopy(arr))

…展开运算符

Obejct.assign()方法

此外,用concat和slice返回新数组的方式也可以实现浅拷贝

深拷贝

在浅拷贝的基础上,如果我们判断要拷贝的对象是对象类型,则递归调用拷贝函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
let arr = [{name:'azirkxs'},'haha',22]
function deepCopy(obj){
//判断是否是一个对象
if(typeof obj !== 'object') return;
if(obj === null) return obj;//处理null值
if (target instanceof Date) return new Date(target) // 处理日期
if (target instanceof RegExp) return new RegExp(target) // 处理正则

//判断该对象是对象还是数组
let newObj = obj instanceof Array ? []:{};
for(let key in obj){
//for in 会遍历一个对象原型上的所有可枚举属性,通过hasOwnProperty可以过滤
if(obj.hasOwnProperty(key)){
newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
}
}
return newObj;
}

let arr2 = deepCopy(arr)
arr[0].name = 'kxs'
console.log(arr[0].name) //kxs
console.log(arr2[0].name) //azirkxs

此外,使用JSON.parse 方法也可以实现对象或者数组的深拷贝

1
JSON.parse(JSON.stringify(arr))

如果这篇文章对你有帮助,可以bilibili关注一波 ~ !此外,如果你觉得本人的文章侵犯了你的著作权,请联系我删除~谢谢!