ES6阵列破坏性怪异

Question

Can anyone explain, why the following happens with ES6 array destructuring?

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

Answer 1

As others have said, you're missing semicolons. But…

Can anyone explain?

There are no semicolons automatically inserted between your lines to separate the "two" statements, because it is valid as a single statement. It is parsed (and evaluated) as

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

wherein

• [a, b] = …; is a destructuring assignment as expected
• (… = ['BB', 'C']) is an assignment expression assigning the array to the left hand side, and evaluating to the array
• ['A', 'B'][…] is a property reference on an array literal
• (b, c) is using the comma operator , evaluating to c (which is undefined )

If you want to omit semicolons and let them be automatically inserted where ever possible needed, you will need to put one at the begin of every line that starts with ( , [ , / , + , - or ` .

Answer 2

You've fallen into a trap of line wrapping and automatic semicolon insertion rules in JavaScript.

Take this example:

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

It's the interpreted as:

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

That weird [(2, 1)] thing above is related to how Comma Operator works.

Thus, your example:

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

Is interpreted as:

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

Now, if you insert a semicolon, it will work as you intended:

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

Also, it's a good idea to check your code by pasting it into Babel repl to see the generated output:

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

Answer 3

I believe you have forgotten the line breaks ';'. Below is the corrected code. Please try:

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

Answer 4

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

console: a=A b=BB c=C