记录不同形式Destructuring导致的不同结果:
1 | function move1({x=0, y=0} = {}) { |
分别测试以下几种情况:
1 | // 测试输入为空 |
对于move1
函数:
- 如果输入为空
''
==>{x = 0, y = 0} = {}
==>x = 0, y = 0
; - 输入为
{z: 3}]
==>{x = 0, y = 0} = {z: 3}
==>x = 0, y = 0
; - 输入为
{x:1, y: 2}
==>{x = 0, y = 0} = {x: 1, y: 2}
==>x = 1, y = 2
;
对于move2
函数:
- 如果输入为空
''
==>{x, y} = {x: 0, y: 0}
==>x = 0, y = 0
; - 输入为
{z: 3}]
==>{x, y} = {z: 3}
==>x = undefined, y = undefined
; - 输入为
{x:1, y: 2}
==>{x, y} = {x: 1, y: 2}
==>x = 1, y = 2
;
主要区别就是有输入时,如果没有同名属性 {x, y} = {x: 0, y: 0}
这种写法取不到默认值。
ps. 在ES6中如果解构对象时:
1 | let {a, ...b} = {a: 1, c: 2, d:3} // Uncaught SyntaxError: Unexpected token ... |
但是在React中使用ES6这种写法却很常见,原因是babel(babel在线编译)增强解构功能,会将这种写法编译为:
1 | function _objectWithoutProperties(obj, keys) { |
扩展阅读: