ES5深拷贝函数封装

By 大Van家 on 2022-01-01
阅读时间 1 分钟
文章共 279
阅读量

同系列文章请查看:Github:pre-interview

ES5深拷贝函数封装

简述JavaScript深拷贝与浅拷贝

假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,拿人手短,如果B没变,那就是深拷贝,自食其力。

前置知识:JavaScript基本数据类型与复杂(引用)数据类型。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
var obj = {
name: 'yesmore',
age: 18,
info: {
hobby: ['travel', 'piano', {
a: 1
}],
career: {
teacher: 4,
engineer: 9
}
}
};

function deepClone(origin, target) {
var tar = target || {}
var toStr = Object.prototype.toString
var arrType = '[object Array]'

for (var k in origin) {
if (origin.hasOwnProperty(k)) { // 判断是否为org自己的属性
if (typeof origin[k] === 'object' && origin[k] !== null) {
tar[k] = toStr.call(origin[k]) === arrType ? [] : {} // 判断是数组还是对象
deepClone(origin[k], tar[k])
} else {
// 非object类型则直接赋值
tar[k] = origin[k]
}
}
}
return tar
}

const newObj = deepClone(obj, {})
newObj.info.hobby[2].a = 123
console.log(obj, newObj);

// var type = Object.prototype.toString.call([]) // [object Array]
// var type = Object.prototype.toString.call({}) // [object Object]
// console.log(type);

// console.log(typeof obj['info']); // ''

Tips: Please indicate the source and original author when reprinting or quoting this article.