JavaScript Learning Notes-ES6 Learning (c) The deconstruction assignment of variables

Tag: value declares error with same name as module rule more Nan

1. Definition of Deconstruction Assignment

In ES6, it is permissible to extract values (so-called deconstruction) from arrays and objects in a certain pattern, and then assign values to variables.

var a = 1; var b = 2; var c = 3; // equivalent to var [A, B, c] = [1, 2, 3];

If the deconstruction is unsuccessful, the corresponding variable is assigned a value of undefined.

let [x, Y, ... z] = [' A '/ / ' a '//  undefined//  []

The other is not completely deconstructed, that is, the pattern to the left of the equals sign, matching only one part of the array to the right of the equals sign. In this case, the deconstruction can still succeed.

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

If the right side of the equal sign is not an array (or, strictly speaking, not a ergodic structure), an error will be reported.

// error let [foo] = 1false==null= {};

As long as a data structure has a iterator interface, it can be used in the form of an array of deconstruction assignment.

function* fibs () {  var a = 0;   var b = 1;    while (true) {    yield A;     = [B, a + b];}  } var [First, second, third, fourth, fifth, sixth] =//  5

2. Default value

Deconstruction is allowed to specify default values, for example:

var true] =//  true//  x= ' A ', y= ' B '//  x= ' A ', y= ' B '

Note, however, that in ES6, you use = = = To determine if a position has a value, and if an array member is not strictly equal to undefined, the default value will not take effect.

var [x = 1] =//  1var [x = 1] = [null//  Null

If the default value is an expression, the expression is lazy, that is, the value is evaluated only when it is used.

function f () {  console.log (' aaa '= f ()] = [1];

Equivalent to

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

3. Object's Deconstruction Assignment

The elements of the array are arranged in order, the value of the variable is determined by its position, and the object's property has no order, and the variable must have the same name as the property in order to get the correct value.

var  {bar, Foo} = {foo: "AAA", Bar: "BBB"//  "AAA"//  "BBB"var {Baz} = {foo: "AAA", Bar: "BBB"//  undefined

The internal mechanism of an object's deconstruction assignment is to find a property of the same name before assigning it to the corresponding variable. The real assignment is the latter, not the former.

var {Foo:baz} = {foo: "AAA", Bar: "BBB"//  "AAA"//  Error:foo is not defin Ed

In this example, Foo is a matching pattern, and Baz is the variable that is assigned. When using this notation, the Declaration and assignment of variables are one.

The structure of the object can also be set by default, and the condition book attribute is strictly equal to undefined. If the deconstruction fails, the value of the variable is also undefined.

If the deconstruction pattern is a nested object and the parent property where the child object resides does not exist, an error will be found.

The rule to deconstruct an assignment is to convert it to an object as long as it is not the object to the right of the equals sign.

4. Parentheses issues

There are three scenarios in which you can deconstruct an assignment without using parentheses:

1. Cannot have parentheses in a variable declaration statement
2. In function arguments, the pattern cannot have parentheses
3. In an assignment statement, you cannot put an entire pattern, or a layer of nested patterns, in parentheses.

// 全部报错

 var  [(a)] = [1 var  {x: (c)} = {};  var  ({x:c}) = {};  var  {(X:C)} = {};  var  {(x): C} = {};  var  {o: ({p:p})} = {o: {p:2}}; 
 
 

//error function f ([]) {return z 
             /span>  

 ({p: a }) = {p 42 };  ([a]= [ 5]      
 
 
 

[ ({p: a }) {x: C } = [{} {}]    

There is only one case where parentheses can be used: the non-modal portion of an assignment statement, which can be used in parentheses.

// correct // correct // correct

5. Use of variable deconstruction

Variable structures can be used for the following purposes:

The value of the interchange variable:

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

To return multiple values from a function:

// returns an array function example () {  return [1, 2, 3];} var [A, B, c] = example (); // returns an object function example () {  return  {    1,    2  };} var {foo, bar} = Example ();

Definition of function Parameters:

// A parameter is a set of sequential values function f ([x, Y, z]) {...} f ([1, 2, 3]); // parameter is a set of no-order values function  3, Y:2, x:1});

Extracting JSON data

var =  {jsondata,  "OK",  data: [867, 5309 = Jsondata;console.log (ID, status, number); // "OK", [867, 5309]

Default values for function parameters

function (URL, {  true,  function  () {},  true,   function  () {},  false,  true,   //  ... more config}) {  //  ... do stuff};

Traverse the map structure

var New Map (); Map.set (' first ', ' Hello '); Map.set (' second ', ' World ') ;  for (Let [key, value] of the map)  {+ "is" + value);} // First is Hello // second is world

Specifying methods for Input modules

const {Sourcemapconsumer, Sourcenode} = require ("Source-map");

JavaScript Learning Notes-ES6 Learning (c) The deconstruction assignment of variables