ES6 数组解构怪异

IT技术 javascript ecmascript-6
2021-01-18 17:56:33

谁能解释一下,为什么 ES6 数组解构会发生以下情况?

let a, b, c
[a, b] = ['A', 'B']
[b, c] = ['BB', 'C']
console.log(`a=${a} b=${b} c=${c}`)

// expected: a=A b=BB c=C
// actual:   a=BB b=C c=undefined

http://codepen.io/ronkot/pen/WxRqXg?editors=0011

4个回答

正如其他人所说,您缺少分号。但…

谁能解释一下?

在您的行之间没有自动插入分号来分隔“两个”语句,因为它作为单个语句是有效的。它被解析(和评估)为

let a = undefined, b = undefined, c = undefined;
[a, b] = (['A', 'B']
[(b, c)] = ['BB', 'C']);
console.log(`a=${a} b=${b} c=${c}`);

其中

  • [a, b] = …; 是预期的解构赋值
  • (… = ['BB', 'C']) 是一个赋值表达式,将数组分配到左侧,并对数组求值
  • ['A', 'B'][…]对数组文字属性引用
  • (b, c)正在使用逗号运算符,评估为c(即undefined

如果您想省略分号并让它们在任何可能需要的地方自动插入,您需要在(, [, /, +,-开头的每一行的开头放置一个`

@zerkms:因为我喜欢引入分组运算符......在这种情况下强调它不是具有两个元素的数组文字
2021-03-26 17:56:33
经过几个案例的测试,我认为['A', 'B'][b, c]==>['A', 'B'][c]
2021-03-26 17:56:33
是否['A', 'B'][b, c]会得到属性bc数组元素?
2021-04-04 17:56:33
哇,这是问题的真正答案......我在想那里发生了什么......现在很清楚......
2021-04-05 17:56:33
为什么变成[b, c][(b, c)]真的?
2021-04-11 17:56:33

您已经陷入了 JavaScript 中换行和自动分号插入规则的陷阱。

拿这个例子:

let x = [1, 2]
[2, 1]

它的解释为:

let x = [1, 2][2, 1] // === [1, 2][(2, 1)] === [1, 2][1] === 2

[(2, 1)]上面那个奇怪的事情与逗号运算符的工作方式有关。

因此,您的示例:

let a, b, c
[a, b] = ['A', 'B']
[b, c] = ['BB', 'C']
console.log(`a=${a} b=${b} c=${c}`)

解释为:

let a, b, c
[a, b] = ['A', 'B'][b, c] = ['BB', 'C']
console.log(`a=${a} b=${b} c=${c}`)

现在,如果您插入分号,它将按您的预期工作:

let a, b, c
[a, b] = ['A', 'B']; // note a semicolon here
[b, c] = ['BB', 'C']
console.log(`a=${a} b=${b} c=${c}`)

此外,通过将代码粘贴到Babel repl 中以查看生成的输出来检查代码也是一个好主意

'use strict';

var a = void 0,
    b = void 0,
    c = void 0;

var _ref = ['A', 'B'][(b, c)] = ['BB', 'C'];

a = _ref[0];
b = _ref[1];

console.log('a=' + a + ' b=' + b + ' c=' + c);

我相信你已经忘记了换行符 ';'。下面是更正后的代码。请试试:

let a,b,c
[a, b] = ['A', 'B'];
[b, c] = ['BB', 'C'];
console.log(`a=${a} b=${b} c=${c}`)
我相信下面的表达会更清楚: let [a, b] = ['A', 'B'],[b, c] = ['BB', 'C'];
2021-03-25 17:56:33
如果您解释了为什么;需要在那里,那将会很有帮助
2021-03-29 17:56:33
如果您另外解释为什么它在语法上是正确的及其语义,它会。
2021-04-09 17:56:33
let a, b, c
[a, b] = ['A', 'B']***;***
[b, c] = ['BB', 'C']
console.log(`a=${a} b=${b} c=${c}`)

控制台:a=A b=BB c=C