<转>javascript之Object.assign()痛点
来源:互联网 发布:航天证券交易软件 编辑:程序博客网 时间:2024/05/01 17:16
最近也一直会用JavaScript,然后中间使用的一些组件,如Echarts
会有非常复杂的配置文件,而大部分配置可能都是一样的,所以想着写一份通用配置,然后,其他地方需要使用的时候,用这份配置深拷贝一份配置,然后在上面继续改。就如下:
- 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中存储对象都是存地址的,所以浅拷贝是都指向同一块内存区块,而深拷贝则是另外开辟了一块区域。下面实例也可以看出这一点:
- 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()
这个方法,感觉可以拿来用了。
贴一下两个官方例子:
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
是不是很完美,又可以clone又可以merge。在我这种情况下,我觉得我的代码量又可以减少了,比如:
- 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和我想象的不一样
且看例子:
- 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根属性,下面的就不做处理了。
代码只能重构成相对麻烦一点的:
- 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
这样用虽然麻烦一点,但是也还好,可以用了。不过。。。很快,又出现问题了,如下:
- 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
,代码我加了点注释如下:
- 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()
只是一级属性复制,比浅拷贝多深拷贝了一层而已。用的时候,还是要注意这个问题的。
附
发现一个可以简单实现深拷贝的方法,当然,有一定限制,如下:
- 1
- 1
思路就是将一个对象转成json字符串,然后又将字符串转回对象。
原文地址:http://blog.csdn.net/waiterwaiter/article/details/50267787
- <转>javascript之Object.assign()痛点
- javascript之Object.assign()痛点
- javascript之Object.assign()痛点
- javascript之Object.assign()痛点
- Javascript之Object.assign()
- node之object-assign
- ES6之Object.assign
- ES6之Object.assign()详解
- es6 javascript对象方法Object.assign()
- es6 javascript对象方法Object.assign()
- es6 javascript对象方法Object.assign()
- JavaScript 对象拷贝与Object.assign
- es6 javascript对象方法Object.assign()
- Object.assign()
- Object.assign
- Object.assign()
- Object.assign()
- Object.assign()之深浅烤白
- 日期、字符串、时间戳之间的互相转换
- python for循环和range内置函数
- 我是如何入门、成长并进阶为数据分析师的?
- 操作系统(六)文件与文件系统
- hdoj1098 Ignatius's puzzle(数论)
- <转>javascript之Object.assign()痛点
- 第一次安装 iOS 应用获取网络权限
- 【raspberry】(一)认识树莓派
- 4. JavaScript 设计模式(适配器模式,外观模式)
- 用位操作符实现乘除法加减法
- winserver 2012R2 安装oracle及创建表流程
- 005 音量上下键调节音量流程
- mongodb添加用户
- Diffuse irradiance