1, Deconstruction assignment

Deconstruction assignment syntax is a JavaScript expression. By deconstruction assignment, you can take the attribute / value from the object / array and assign it to other variables.
Object and array correspondence expressions, or object literals and array literals, provide a simple way to define a specific data group.

var x = [1,2,3,4,5];

Deconstruction assignment uses the same syntax, except that the left side of the expression defines what variables to take out from the original variables. As follows:

var x = [1,2,3,4,5];
var [y,z] = x;
console.log(y);
console.log(z);

The printed result is:

1. Deconstruct array

1. Deconstruction of variable declaration and assignment

As follows:

var foo = ['wh','rc','xl'];
var [wh,rc,xl] = foo;
console.log(wh);
console.log(rc);
console.log(xl);

The print result is:

2. Deconstruction of variable declaration and assignment

By deconstructing the declaration of separated variables, a variable can be assigned a value, as follows:

var a,b;
[a,b] = [1,2];
console.log(a);
console.log(b)

The print result is:

3. Default value

To prevent an object whose value is undefined from being taken out of the array, you can preset default values for any object in the array to the left of the expression. As follows:

var a,b;
[a=5,b=7] = [1];
console.log(a);
console.log(b);

The print result is:

4. Exchange variable

The values of two variables can be exchanged in a structural expression. As follows:

var a = 1;
var b = 2;
[a,b] = [b,a];
console.log(a);
console.log(b);

The printed result is:

5. Parse an array returned from a function

For example, if [1,2] is the output value of function f(), you can use deconstruction to complete the parsing in one line.

function f(){
    return [1,2];
}
var a,b;
[a,b] = f();
console.log(a);
console.log(b);

The printed result is:

6. Ignore some return values

(1) We can ignore unnecessary values as follows:

function f(){
    return [1,2,3];
}
var [a,,b] = f();
console.log(a);
console.log(b)

The printed result is:

(2) You can also ignore all return values, as follows:

[,,] = f();

7. Assign the remaining array to a variable

When deconstructing an array, you can use the residual mode to assign the remaining part of the array to a variable, as follows:

var [a,...b] = [1,2,3];
console.log(a);
console.log(b)

The print result is:

Note: if there is a comma to the right of the remaining element, SyntaxError will be thrown, because the remaining element must be the last element of the array.

2. Deconstruction object

1. Basic assignment

 var o = {p:42,q:true};
 var{p,q} = o;
 console.log(p);
 console.log(q);

The print result is:

2. Undeclared assignment

A variable can be deconstructed and assigned independently of its declaration, as follows:

 var a,b;
({a,b} = {a:1,b:2})
console.log(a);
console.log(b);

The print result is:

Note the parentheses (...) around the assignment statement It is necessary to explicitly deconstruct assignments using object literals.
{a,b} = {a:1,b:2} is not a valid stand-alone syntax because {a,b} on the left is considered a block rather than an object literal. However ({a,b} = {a:1,b:2}) is valid, just as var {a,b} = {a:1.b:2}. And (...) The expression needs to be preceded by a semicolon, otherwise it may be executed as a function in the previous line.

3. Assign a value to the new variable name

You can extract a variable from an object and assign it to a new variable name different from the object property name.

var o = {p:42,q:true};
var {p:foo,q:bar} = o;
console.log(foo);
console.log(bar);

The print result is:

4. Default value

The variable can be given a default value first. When the corresponding attribute of the object to be extracted is resolved to undefined, the variable is given a default value, as follows:

var {a = 10,b = 5} = {a:3};
console.log(a);
console.log(b);

The printed result is:

5. Name the new variable and provide a default value

An attribute can be (1) deconstructed from an object and assigned to a variable with different names (2) assigned a default value to prevent the non deconstructed value from being undefined. As follows:

var {a:aa = 10,b:bb = 5} = {a:3}
console.log(aa);
console.log(bb);

The print result is:

Two, template string

In the ES5 standard, the general output template is through string splicing. In ES6, the splicing of strings can be simplified by Template Strings. Template strings represent ` ` 'through backquotes. If variables are to be embedded, they can be realized through "${variable name}":

  let arr = [
   {
        name: 'Xiao Wang',
        age: 20
    },
    {
        name: 'Xiao ran',
        age: 23
    },
    {
        name: 'Little bear',
        age: 25
    }
]
let str = "";
for(let i=0;i<arr.length;i++){
    str += `Name is ${ arr[i].name },Age is ${ arr[i].age }year\n`;
}
console.log(str)

The print result is: