Luc*_*ain 32 javascript destructuring ecmascript-6 babeljs
背景
当我尝试使用数组解构赋值时,我能够预先声明我的变量:
let a, b, c;
let arr = [1, 2, 3, 4, 5];
[a, b, c] = arr;
console.log(a) // logs 1
console.log(b) // logs 2
console.log(c) // logs 3
Run Code Online (Sandbox Code Playgroud)
这通过了Babel编译器就好了.
但是,当我尝试对对象做同样的事情时,我收到了一个错误
let a, b, c
let obj = {cat: 'meow', dog: 'woof', mouse: 'squeak'};
{cat: a, dog: b, mouse: c} = obj;
console.log(a) // I want this to log 'meow'
console.log(b) // I want this to log 'woof'
console.log(c) // I want this to log 'squeak'
Run Code Online (Sandbox Code Playgroud)
题
这是ES6还是Babel的怪癖/问题?如果它是ES6的故意,为什么与数组的处理方式有所不同?
注意
据我所知,更换var与let我不需要预先声明我的变量手段和具有let内联是有效的(而且,我相信,一般者优先).我想知道实现之间的区别,而不是"不要那样做"的答案.
the*_*eye 74
在破坏对象时,
您需要使用与对象中的键相同的变量名称.只有这样,您才能获得一对一的通信,并且这些值将被正确地解构.
如果你没有使用声明语句,你需要将整个赋值包装在括号中,否则左侧表达式中的对象文字将被视为一个块,你将得到SyntaxError.
所以你的固定代码就是这样的
'use strict';
let cat, dog, mouse;
let obj = {cat: 'meow', dog: 'woof', mouse: 'squeak'};
({cat, dog, mouse} = obj); // Note the `()` around
Run Code Online (Sandbox Code Playgroud)
你实际上可以写相同的
'use strict';
let obj = {cat: 'meow', dog: 'woof', mouse: 'squeak'};
let {cat, dog, mouse} = obj;
Run Code Online (Sandbox Code Playgroud)