The learning experience of new grammar in deconstruction assignment--es6

# 3. Deconstruction Assignment # #

Function: The parameter of the array, object, function is deconstructed, the variable is assigned, it can be called directly, and greatly improve the efficiency.

# # 1: The deconstruction assignment of the Standard Model # # #

var [a,b,c]=[1,2,3]
Console.log (a)//1
Console.log (b)//2
Console.log (c)//3

# # 2: # # Nested deconstruction assignment, as long as "pattern matching", you can deconstruct the assignment, if there is no corresponding value, it is undefined

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]

.../tail is reset, and the remainder is saved to an array

let [x, Y, ... z] = [' a '];
X//"a"
Y//undefined
z//[]

Example 3: Deconstruction assignment allows default values to be set, default value is started when no corresponding value # #

Let [A, b = 3,c = 5] = [1];
Console.log (a)//1
Console.log (b)//3
Console.log (c)//5

※ The deconstructed array has only 1 corresponding to a, B and C, so the default value of 3, 5 is enabled.

[x, y = ' b '] = [' A ', undefined]//x= ' a ', y= ' B '

[x, y = ' b '] = [' A ', ']//x= ' a ', y= '

※es6 inside match is ' = = = ' Strict equal mode, empty string ' and undefined unequal!

function fn () {
Console.log (10)
This 10 will only print when the default value is required for B, and does not print when the program executes
Return 1
}

let [a = 3, B = fn ()] = [];
Console.log (a)//3
Console.log (b)//1

※ If a default value is an expression, it will only be performed when the default value needs to be started.


Structure assignment of an object

Objects can also be deconstructed to assign values, and the principle:

1. Array elements require assignment in order one by one, object not required, assigned by unordered
2. The variable name to which the object is assigned must be consistent with the object property name
3. If not, you need to use ' pattern ' correspondence


Example 1: Object structure Assignment form

var {
B, A,c
} = {
A:100,
b:200
}

Console.log (a)//100
Console.log (b)//200
Console.log (c)//undefined

The object structure does not require the order one by one to correspond, but requires the property name one by one object, if no is undefined

Example 2: ' Pattern ' matching of objects

var {a:num1,
B:num2
} = {
A:100,
b:200
}
Console.log (NUM1)//100
Console.log (num2)//200
Console.log (a)//a is not defined
Console.log (b)//b is not defined

Note that when assigning a value to an object structure, a, B is the pattern, corresponding to A and b of the structure object, the assigned variables are NUM1 and num2

var node = {
LOC: {
Start: {
Line:1,
Column:5
}
}
};

var {loc: {start: {line}}} = node;
Line//1
LOC//Error:loc is undefined
Start//Error:start is undefined

Only line is a variable and will be assigned a value

Example 3: Nested deconstruction assignment of an object

var obj = {};
var arr = [];
({
Obj:obj.app,
Arr:arr[0]} = {
obj: ' Hello ',
arr:0
})//Put parentheses here, I don't know why

Console.log (Obj.app)//' Hello '
Console.log (arr[0])//0

Example 4: Object can set default value

var {
A = 100,
B:C = 200,
} = {}

Console.log (a)//100
Console.log (b)//b is not defined
Console.log (c)//200


# # # of function parameters ' deconstruction Assignment # #

is the deconstruction assignment of the parameter!

Example 1: The parameter is an array

function fn ([A, b]) {
return a+b//This parameter is assigned to the destructor
}
Console.log (FN ([up]))//3

Example 2: The parameter is an object

function fn ({A, b}) {
return a+b//This parameter is assigned to the destructor
}
Console.log (FN ({a:1,b:2}))//3

Example 3: Parameters can also set default values

function fn ({a = 3,b = 5}={}) {
Return a+b
}
Console.log (FN ())//8

The FN () call has no arguments, starts the default value {}, and the null object is deconstructed to the previous {a = 3,b = 5}, starting with the default value, so the result is 8

# # # of Deconstruction Assignment Application Scenario # #

(1) value of the swap variable

```
var x = 1, y = 2;
[x, Y] = [y, x];
Console.log (x, y)
```
(2) Returning multiple values from a function

The function can only return a value, and if you want to return multiple values, you can only return them in an array or object. It is very convenient to take these values out if you have an understanding of the construction assignments.

```
Returns an array

function Example () {
return [1, 2, 3];
}
var [A, B, c] = example ();

Returns an object

function Example () {
return {
Foo:1,
Bar:2
};
}
var {foo, bar} = Example ();
```

(3) Definition of function parameters

The deconstruction assignment makes it easy to match a set of parameters with the variable name.

```
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 f ({x, y, z}) {...}
F ({z:3, y:2, x:1})
```

(4) Extracting JSON data

The deconstruction assignment is particularly useful for extracting data from JSON objects.

```
var jsondata = {
Id:42,
Status: "OK",
Data: [867, 5309]
}

Let {ID, status, data} = Jsondata;

Console.log (ID, status, data)
```

(5) Default value for function parameters
```
function Add ([a = 0, b = 0] = []) {
return a + B;
}
Console.log (Add ());
```

(6) Traverse the map structure

```
var map = new map ();
Map.set (' first ', ' Hello ');
Map.set (' Second ', ' World ');

for (let [key, value] of map) {
Console.log (key + "is" + value);
}
//first is Hello
//second was World
"

If you just want to get the key name, or just want to get the key value, you can write it as follows.

//get Key name
for (let [key] of map) {
  //...
"

//get key value
for (let [, value] of map) {
  //...
}

(7) Input module specified method

Load Module You often need to specify which methods to enter. The deconstruction assignment makes the input statement very clear.

const {sourcemapconsumer, sourcenode} = Require ("Source-map");

Deconstruction assignment--es6 new grammar learning experience