es6--destructuring assignment of variables

Basic usage:

Previously, assigning a value to a variable could only specify the value directly;

var a = 1;
var b = 2;
var c = 3;

　And es6 allows to write the following:

var [a, b, c] = [1, 2, 3];

　The above code means that you can extract values ​​from the array and assign values ​​to variables according to the corresponding relationship of positions.

    Give an example of getting an element

   

        <div id="app">
	  <div id="top">1</div>
	  <div id="main">2</div>
	  <div id="footer">3</div>
	</div>
	<script>
	  function $(id) {
	    return document.getElementById(id);
	  }
      var [mytop, mymain, myfooter] = [$("top"),$("main"),$("footer")];
      alert(myfooter.innerHTML) // 1
	</script>

　In essence, this type of writing belongs to "pattern matching". As long as the pattern on both sides of the equal sign is the same, the variable on the left will be assigned the corresponding value. The following is an example of destructuring using nested arrays.

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

let [,, third] = ["foo", "bar", "baz"];
third // "baz"


let [x,, y] = [1, 2, 3];
x // 1
and // 3

let [head, ...tail] =  [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

let [x, y, ...z] = ["a"];
x // "a"
y // "undefined"
with // []

 If the parsing is unsuccessful, the value of the variable will become undefined.

var [foo] = [];
var [bar, foo] = [1];

 In the above two cases, the destructuring is unsuccessful, and the value of foo will be equal to undefined.

Another case is incomplete destructuring, where the pattern on the left matches only part of the array on the right of the equal sign. In this case, deconstruction can still be successful.

let [x, y] = [1, 2, 3];
x // 1
and // 2

let [a, [b],d]] = [1, [2, 3], 4];
a // 1;
b // 2
c // 4
The above examples are not completely deconstructed, but can be successful.
If the right-hand side of the equal sign is not an array (or, strictly speaking, not a convenience struct), an error will be raised.
// report error
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};

 

Defaults

Destructuring assignment allows specifying default values.

var [foo = true] = [];
foo // true

[x, y = "b"] = ["a"]; // x = "a", y = "b"
[x, y = "b"] = ["a", undefined] // x = "a", y = "b";

Mainly ES6 uses strict equality (===) internally to determine whether a position has a value. So if an array member is not strictly equal to undefined, the default value will not take effect.
var [x, y] = [undefined];
x //1;

var [x = 1] = [null]
x // null
In the above code, if an array member is null, the default value will not take effect, because null is not strictly equal to undefined.
If the default value is an expression, then the expression is lazily evaluated, that is, it is evaluated only when it is used

function f() {
  console.log("aaa");
}

let [x = f()] = [1];

The above code because x can take a value, so the function f will not be executed at all. The above code is actually equivalent to the following code.

let x;
if ([1][0] === undefined) {
    x = f();
} else {
   x = [1][0]
}

Default values ​​can refer to other variables assigned by destructuring, but the variable must already be declared.
let [x = 1, y = x] = []; // x = 1; y = 1
let [x = 1, y = x] = [2] // x = 2; y = 2
let [x = y, y = 1] = []; // ReferenceError

 The last expression above throws an error because y has not been declared when x uses the default value y.