对象的浅拷贝与深拷贝
javascript原生里并没有对对象拷贝的函数，要实现对象的拷贝，可以使用以下方法。
浅拷贝
只拷贝对象的值，即将该对象的属性复制给另一个对象，如果对象里面包含另一个对象，只是将引用复制了而已。所以浅拷贝也可以理解为只拷贝一层。
要实现浅拷贝，可以通过遍历将属性赋值给另一个对象，也可以直接使用Object.assign()方法
使用Object.assign()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| let Oa = {
a: 1,
b: 2,
Oc: {
d: 3,
e: 4
}
}
let Ob = Object.assign({}, Oa)
console.log(Ob)
console.log(Ob.Oc === Oa.Oc)
|
这里Ob的属性Ob.Oc === Oa.Oc即两个对象是相等的，复制的引用
深拷贝
拷贝对象的属性，如果对象属性有另一个对象，将这个对象也拷贝，而不是直接使用引用。所以深拷贝可以理解为拷贝多层。
使用递归方法
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
| let Oa = {
a: 1,
b: 2,
Oc: {
d: 3,
e: 4
},
Od: [1, 2, 3, 4]
}
function deepClone(src) {
let target = Array.isArray(src) ? [] : {};
for (let prop in src) {
if (src.hasOwnProperty(prop)) {
if (typeof src[prop] === 'object') {
target[prop] = deepClone(src[prop])
}
else {
target[prop] = src[prop]
}
}
}
return target
}
let Ob = deepClone(Oa)
console.log(Ob)
console.log(Ob.Oc === Oa.Oc)
console.log(Ob.Od === Oa.Od)
|
这里Ob的属性Ob.Oc === Oa.Oc即两个对象不相同，实现了深拷贝
转换为JSON字符串再转换回对象 - 使用JSON.stringify()和JSON.parse()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| function cloneWithJSON(src) {
return JSON.parse(JSON.stringify(src))
}
let Oa = {
a: 1,
b: 2,
Oc: {
d: 3,
e: 4
}
}
let Ob = cloneWithJSON(Oa)
console.log(Ob)
console.log(Ob.Oc === Oa.Oc)
console.log(Ob.Od === Oa.Od)
|
深拷贝的循环引用问题
上面的深拷贝函数中，没有考虑到循环引用的问题，如果出现了循环引用将造成死递归，最终爆栈。
1
2
3
4
5
6
7
8
9
10
11
12
| let Oa = {
a: 1,
b: 2,
Oc: {
d: 3,
e: 4
},
Od: [1, 2, 3, 4],
}
Oa.Of = Oa
let Ob = deepClone(Oa)
|
因此，为此做出优化，使用以下方法。
设置一个map，visited，标记访问过的对象，并存储对应的的拷贝对象的引用，如果对象被访问过，则不进行递归调用，直接将值指向该引用。
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
| let Oa = {
a: 1,
b: 2,
Oc: {
d: 3,
e: 4
},
Od: [1, 2, 3, 4],
}
Oa.Of = Oa
function deepClone(src) {
let visited = new Map()
return deepClonehelper(src, visited)
}
function deepClonehelper(src, visited) {
let target = Array.isArray(src) ? [] : {};
visited.set(src, target)
for (let prop in src) {
if (src.hasOwnProperty(prop)) {
if (typeof src[prop] === 'object') {
if (!visited.has(src[prop])) {
target[prop] = deepClonehelper(src[prop], visited)
} else {
target[prop] = visited.get(src[prop])
}
}
else {
target[prop] = src[prop]
}
}
}
return target
}
let Ob = deepClone(Oa)
console.log(Ob)
console.log(Ob.Of === Oa.Of)
console.log(Ob.Of === Ob)
|
以上就是对象拷贝的简单实现
