Object.assign()之深浅烤白
2017-01-12 22:02
387 查看
转载地址: http://blog.csdn.net/waiterwaiter/article/details/50267787
最近也一直会用JavaScript,然后中间使用的一些组件,如
2
3
4
5
6
7
8
9
10
11
12
13
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
1
2
3
4
5
6
7
8
9
10
11
12
13
可以明显看出,浅拷贝在改变其中一个值时,会导致其他也一起改变,而深拷贝不会。
我需要的是深拷贝的方法,然后发现原来
贴一下两个官方例子:
2
3
4
1
2
3
4
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
是不是很完美,又可以clone又可以merge。在我这种情况下,我觉得我的代码量又可以减少了,比如:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
不过,很快,问题出现了,那就是
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
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
原本想的是它只会覆盖
代码只能重构成相对麻烦一点的:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
这样用虽然麻烦一点,但是也还好,可以用了。不过。。。很快,又出现问题了,如下:
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
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
上面结果发现两个配置变得一模一样,而其实我们并没有去更改
这说明一点:在
这里不经让我怀疑这个接口到底是怎么实现的,它到底是不是和我所想的一样。
翻了一下官方文档,发现它写得一个
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
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
上面的代码可以直接说明它只对顶层属性做了赋值,完全没有继续做递归之类的把所有下一层的属性做深拷贝。
1
思路就是将一个对象转成json字符串,然后又将字符串转回对象。
最近也一直会用JavaScript,然后中间使用的一些组件,如
Echarts会有非常复杂的配置文件,而大部分配置可能都是一样的,所以想着写一份通用配置,然后,其他地方需要使用的时候,用这份配置深拷贝一份配置,然后在上面继续改。就如下:
const defaultOpt = { key1: xxx, key2: { dd: ee }, ..... }; // deepCopy为某个实现深拷贝的方法 const opt1 = deepCopy(defaultOpt); opt1..... const opt2 = deepCopy(defaultOpt); opt2.....1
2
3
4
5
6
7
8
9
10
11
12
13
1
2
3
4
5
6
7
8
9
10
11
12
13
深拷贝和浅拷贝
这里也涉及到一个深拷贝和浅拷贝的概念。javascript中存储对象都是存地址的,所以浅拷贝是都指向同一块内存区块,而深拷贝则是另外开辟了一块区域。下面实例也可以看出这一点:// 浅拷贝 const a = {t: 1, p: 'gg'}; const b = a; b.t = 3; console.log(a); // {t: 3, p: 'gg'} console.log(b); // {t: 3, p: 'gg'} //深拷贝 const c = {t: 1, p: 'gg'}; const d = deepCopy(c); d.t = 3; console.log(c); // {t: 1, p: 'gg'} console.log(d); // {t: 3, p: 'gg'}1
2
3
4
5
6
7
8
9
10
11
12
13
1
2
3
4
5
6
7
8
9
10
11
12
13
可以明显看出,浅拷贝在改变其中一个值时,会导致其他也一起改变,而深拷贝不会。
Object.assign()
我需要的是深拷贝的方法,然后发现原来es6中有
Object.assign()这个方法,感觉可以拿来用了。
贴一下两个官方例子:
// Cloning an object var obj = { a: 1 }; var copy = Object.assign({}, obj); console.log(copy); // { a: 1 }1
2
3
4
1
2
3
4
// Merging objects var o1 = { a: 1 }; var o2 = { b: 2 }; var o3 = { c: 3 }; var obj = Object.assign(o1, o2, o3); console.log(obj); // { a: 1, b: 2, c: 3 } console.log(o1); // { a: 1, b: 2, c: 3 }, target object itself is changed.1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
是不是很完美,又可以clone又可以merge。在我这种情况下,我觉得我的代码量又可以减少了,比如:
const defaultOpt = { title: 'hello', name: 'oo', type: 'line' }; // 原来可能需要这样 const opt1 = deepCopy(a); opt1.title = 'opt1'; opt1.type = 'bar'; opt1.extra = 'extra'; // 额外增加配置 // 现在只要这样 const opt2 = Object.assign({}, a, { title: 'opt2', type: 'bar', extra: 'extra' });1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
不过,很快,问题出现了,那就是
merge和我想象的不一样
且看例子:const defaultOpt = { title: { text: 'hello world', subtext: 'It\'s my world.' } }; const opt = Object.assign({}, defaultOpt, { title: { subtext: 'Yes, your world.' } }); console.log(opt); // 预期结果 { title: { text: 'hello world', subtext: 'Yes, your world.' } } // 实际结果 { title: { subtext: 'Yes, your world.' } }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
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
原本想的是它只会覆盖
subtext,然而其实它直接覆盖了整个
title,这个让我比较郁闷,相当于它只merge根属性,下面的就不做处理了。
代码只能重构成相对麻烦一点的:
const defaultOpt = { title: { text: 'hello world', subtext: 'It\'s my world.' } }; const opt = Object.assign({}, defaultOpt); opt.title.subtext = 'Yes, your world.'; console.log(opt); // 结果正常 { title: { text: 'hello world', subtext: 'Yes, your world.' } }1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
这样用虽然麻烦一点,但是也还好,可以用了。不过。。。很快,又出现问题了,如下:
const defaultOpt = { title: { text: 'hello world', subtext: 'It\'s my world.' } }; const opt1 = Object.assign({}, defaultOpt); const opt2 = Object.assign({}, defaultOpt); opt2.title.subtext = 'Yes, your world.'; console.log('opt1:'); console.log(opt1); console.log('opt2:'); console.log(opt2); // 结果 opt1: { title: { text: 'hello world', subtext: 'Yes, your world.' } } opt2: { title: { text: 'hello world', subtext: 'Yes, your world.' } }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
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
上面结果发现两个配置变得一模一样,而其实我们并没有去更改
opt1的
subtext,只是改了
opt2的。
这说明一点:在
title这一层只是简单的浅拷贝 ,而没有继续深入的深拷贝。
这里不经让我怀疑这个接口到底是怎么实现的,它到底是不是和我所想的一样。
翻了一下官方文档,发现它写得一个
Polyfill,代码我加了点注释如下:
if (!Object.assign) { // 定义assign方法 Object.defineProperty(Object, 'assign', { enumerable: false, configurable: true, writable: true, value: function(target) { // assign方法的第一个参数 'use strict'; // 第一个参数为空,则抛错 if (target === undefined || target === null) { throw new TypeError('Cannot convert first argument to object'); } var to = Object(target); // 遍历剩余所有参数 for (var i = 1; i < arguments.length; i++) { var nextSource = arguments[i]; // 参数为空,则跳过,继续下一个 if (nextSource === undefined || nextSource === null) { continue; } nextSource = Object(nextSource); // 获取改参数的所有key值,并遍历 var keysArray = Object.keys(nextSource); for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) { var nextKey = keysArray[nextIndex]; var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey); // 如果不为空且可枚举,则直接浅拷贝赋值 if (desc !== undefined && desc.enumerable) { to[nextKey] = nextSource[nextKey]; } } } return to; } }); }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
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
上面的代码可以直接说明它只对顶层属性做了赋值,完全没有继续做递归之类的把所有下一层的属性做深拷贝。
总结
Object.assign()只是一级属性复制,比浅拷贝多深拷贝了一层而已。用的时候,还是要注意这个问题的。
附
发现一个可以简单实现深拷贝的方法,当然,有一定限制,如下:const obj1 = JSON.parse(JSON.stringify(obj));1
1
思路就是将一个对象转成json字符串,然后又将字符串转回对象。
相关文章推荐
- Object.assign()
- Reduce 与Object.assign()
- ES6中新增的Object.assign()方法详解
- [Javascript] Combine Objects with Object.assign and Lodash merge
- JavaScript 对象拷贝与Object.assign
- 【angular】浏览器低版本报错,Object.assign
- object-c学习:@property 属性中 assign,nonatomic,retain,strong,weak的区别
- Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#<Object>‘的解决方法
- Object.assign 深层次合并
- 内存管理,readwrite,readonly,assign,retain,copy,nonatomic,的作用以及深浅拷贝
- [ES6] Object.assign (with defaults value object)
- object-c基础之二:property,assign,copy,retain,release
- node之object-assign
- 【angular】浏览器低版本报错,Object.assign
- 【object-c基础】object-c基础之二:property,assign,copy,retain,release
- Redux.js 使用Object.assign避免修改Object
- Object.assign()方法
- js对象深度拷贝、Object.assign()、Object.assign()复制非对象、Object.assign()浅拷贝
- Object c assign/retain/copy
- Object.assign()的使用总结