es6 study 2: deconstruction variable assignment

A: deconstruction array assignment

ES6 allowed according to a certain pattern, and the object is extracted from an array of values, assignment variable, which is called deconstruction

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
y // 3

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

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

The wording in "pattern matching", as long as the same pattern on both sides of the equal sign, the variable on the left will be given corresponding values. The above are some examples of the use of nested arrays deconstruction. If deconstruction is not successful, the value of the variable is equal undefined.

 

Incomplete deconstruction:

That equals sign to the left of the mode, only matching part of an array of right-hand side. In this case, deconstruction can still succeed. If the right side of the equal sign is not an array, it would be an error.

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

let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4

 

Defaults:

Internal ES6 strict equality operator ( ===), it is determined whether there is a location value. Therefore, only when strictly equal member of an array undefined, the default values to take effect.

the let [foo = to true ] = []; 
foo // to true 

the let [X, Y = 'B'] = [ 'A']; // X = 'A', Y = 'B' 
the let [X, Y = 'B'] = [ 'A', undefined]; // X = 'A', Y = 'B' 


the let [X =. 1] = [undefined]; 
X // . 1 

the let [X =. 1] = [ null ]; 
the X- // null 
if a member of the array is null, the default value will not take effect because null is not strictly equal undefined. 


The default value can refer to deconstruct other variable assignment, but the variable must already be declared. Finally, a reason why the above expression will complain, because the default value when doing x y, y has not been declared. 
the let [X =. 1, Y = X] = [];      // X =. 1; Y =. 1 
the let [X =. 1, Y = X] = [2];    
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = [];     // ReferenceError: y is not defined

 

 

II: Deconstruction object assignment

Deconstruction and an array of objects there is an important difference. Elements of the array are arranged in order, the value of the variable is determined by its location; no order and properties of the object, attribute variables must be the same name, in order to get the correct value.

bar {the let, foo} = {foo: 'AAA', bar: 'BBB' }; 
foo // "AAA" 
bar // "BBB" 

the let baz {} = {foo: 'AAA', bar: 'BBB' }; 
baz // undefined if the deconstructing fails, the value of the variable is equal undefined.

 

Internal mechanisms deconstruction assignment object is to find the same name Properties, and then assigned to the corresponding variable. True is assigned the latter, rather than the former.

{foo the let: baz} = {foo: 'AAA', bar: 'BBB' }; 
baz // "AAA" 
foo // error: foo IS Not defined 
above code, foo pattern is matched, baz is variable . Real variable is assigned baz, rather than the pattern foo.

 

Defaults:

And an array of structures, as conditions become effective default value is the attribute value of the object strictly equal undefined.

var {x = 3} = {};
x // 3

var {x, y = 5} = {x: 1};
x // 1
y // 5

var {x: y = 3} = {};
y // 3

var {x: y = 3} = {x: 5};
y // 5

var { message: msg = 'Something went wrong' } = {};
msg // "Something went wrong"

var {x = 3} = {x: undefined};
x // 3

var {x = 3} = {x: null};
x // null

 

III: destructuring assignment string knot

The string can be deconstructed assignment. This is because at this time, the string is converted to a similar array of objects. Array-like object has a lengthproperty, it can also be deconstructed assignment to this property.

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

let {length : len} = 'hello';
len // 5

 

Four: Structure assignment values ​​and Boolean values

When destructuring assignment, if the right side of the equal sign is a numerical and Boolean values, it will first turn objects. Deconstruction assignment rule is that as long as the value is not an object or an array of right-hand side, turn it first on target

{toString the let: S} = 123 ; 
S === Number.prototype.toString // to true 

the let {toString: S} = to true ; 
S === Boolean.prototype.toString // to true

 
the above code, the numerical and Boolean values toString wrapper object has properties, and therefore can be taken to a value of the variable s.

 

Structure assignment purposes:

1. The value of the switching variable

let x = 1;
let y = 2;

[x, y] = [y, x];

 

2. The return value from the plurality of functions

// Returns an array 

function Example () {
   return [. 1, 2,. 3 ]; 
} 
the let [A, B, C] = Example (); 

// return an object 

function Example () {
   return { 
    foo: . 1 , 
    bar : 2 
  }; 
} 
the let {foo, bar} = Example ();

 

3. Definition of function parameters

Destructuring assignment may conveniently be a set of parameters and associating the variable name.

// parameter group is a value of the order 
function F ([X, Y, Z]) {...} 
F ([ . 1, 2,. 3 ]); 

// parameter is a set of unordered value 
function F ( X {, Y, Z}) {...} 
F (Z {: . 3, Y: 2, X:}. 1);

 

4. JSON data extraction

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);
// 42, "OK", [867, 5309]