ES6 数组解构怪异答案

【问题标题】：ES6 Array destructuring weirdnessES6 数组解构怪异
【发布时间】：2016-06-27 09:23:16
【问题描述】：

谁能解释一下，为什么 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

【问题讨论】：

在每一行后面加上;
是的，经过测试，@PranavCBalan 的评论有效
这就是为什么 ASI 是一个错误特征。
没错，@PranavCBalan 的解决方案有效。哇，对我来说，这是分号在 js 代码中真正重要的第一种情况。我更喜欢无分号代码以获得更简洁的语法，但也许我必须开始使用它们。谁能解释一下，为什么在这种情况下真的需要分号？
@ronkot 几乎任何时候你用数组索引器或括号开始一行你都会遇到问题 (Example)。大多数喜欢半冒号的开发人员都以; 开头，以解决与 ASI 相关的问题。

标签： javascript ecmascript-6

【解决方案1】：

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

谁能解释一下？

您的行之间没有semicolons automatically inserted 来分隔“两个”语句，因为它作为单个语句有效。它被解析（和评估）为

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'][…] 是数组文字上的 property reference
(b, c) 正在使用 comma operator，计算结果为 c（即 undefined）

如果您想省略分号并让它们自动插入到任何需要可能的位置，您将为以(、[、/ 开头的每一行添加need to put one at the start， +、- 或 `。

【讨论】：

为什么它实际上将[b, c] 变成了[(b, c)]？
哇，这是问题的真正答案......我在想那里发生了什么......现在很清楚......
@zerkms：因为我喜欢引入分组运算符……在这种情况下强调它不是具有两个元素的数组字面量
is ['A', 'B'][b, c] 将获得属性b 和c 的数组元素？
经过几个案例的测试，Ithink ['A', 'B'][b, c] ==> ['A', 'B'][c]

【解决方案2】：

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

举个例子：

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

解释为：

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

上面那个奇怪的[(2, 1)] 与Comma Operator 的工作原理有关。

因此，您的示例：

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);

【讨论】：

【解决方案3】：

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

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'];
如果你另外解释为什么它在语法上是正确的以及它的语义，它会的。

【解决方案4】：

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

【讨论】：