Deeply understand the use of data deconstruct in ES6, and deeply understand es6 deconstruct

Deeply understand the use of data deconstruct in ES6, and deeply understand es6 deconstruct

Object deconstruct

The object deconstruct syntax uses the object literal volume on the left side of the value assignment statement.

Let node = {type: true, name: false} // both declare and assign the value of let {type, name} = node; // or declare and assign the value of let type first, name ({type, name} = node); console. log (type); // trueconsole. log (name); // false

The type and name identifiers declare both local variables and read the corresponding property values of the object.

The value of the deconstruct value expression is the value on the right of the expression. If the result on the right of the deconstruct expression is null or undefined, an error is thrown.

Default Value

When you use the deconstruct value assignment statement, if the specified local variable does not find the attribute of the same name in the object, the variable will be assigned an undefined value.

let node = {  type: true,  name: false},  type, name, value;({type,value,name} = node);console.log(type);//trueconsole.log(name);//falseconsole.log(value);//undefined

You can select a default value to use this value when the specified property does not exist.

let node = {    type: true,    name: false  },  type, name, value;({  type,  value = true,  name} = node);console.log(type);//trueconsole.log(name);//falseconsole.log(value);//true

Assign different local variable names

let node = {  type: true,  name: false,  value: "dd"}let {  type: localType,  name: localName,  value: localValue = "cc"} = node;console.log(localType);console.log(localName);console.log(localValue);

Type: localType indicates that you want to read the property named type and store its value on the variable localType. This syntax is opposite to the traditional Object literal syntax.

Nested object structure

let node = {type: "Identifier",name: "foo",loc: {  start: {    line: 1,    column: 1  },  end: {    line: 1,    column: 4  }}}let {loc: localL,loc: {  start: localS,  end: localE}} = node;console.log(localL);// start: {line: 1,column: 1},end: {line: 1,column: 4}console.log(localS);//{line: 1,column: 1}console.log(localE);//{line: 1,column: 4}

When the right side of the colon contains curly braces, it indicates that the target is nested in a deeper layer of the object (loc: {start: localS, end: localE })

2. Data deconstruct

The array deconstruct syntax looks very similar to object deconstruct. It only replaces the object literal with the array literal.

let colors = ["red", "blue", "green"];let [firstC, secondC, thirdC, thursC = "yellow"] = colors;console.log(firstC//redconsole.log(secondC);//blueconsole.log(thirdC);//greenconsole.log(thursC);//yellow

You can also ignore some items in the deconstruct mode and only provide variable names for the items you are interested in.

let colors = ["red","green","blue"];let [,,thirdC] = colors;console.log(thirdC);//blue

The comma before thirdC is a placeholder provided for the items before the array. Using this method, you can easily retrieve values from any position in the array without providing names for other items.

Deconstruct assignment

let colors = ["red","green","blue"],  firstColor = "black",  secondColor = "purple";[firstColor,secondColor] = colors;console.log(firstColor);//redconsole.log(secondColor);//green

Array deconstruct has a very unique use case that can easily swap the values of two variables.

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

Nested deconstruct

let colors = ["red", ["green", "blue"], "yellow"];let [firstC, [, ssc]] = colors;console.log(ssc);//blue

Remaining items

let colors = ["red", "green", "blue"];let [firstC, ...restC] = colors;console.log(firstC);console.log(...restC);console.log(restC[0]);//greenconsole.log(restC[1]);//blue

Use the remaining items to clone the Array

let colors = ["red", "green", "blue"];let [...restC] = colors;console.log(restC);//["red", "green","blue"]

Tri-hybrid deconstruct

let node = {type: "Identifier",name: 'foo',loc: {  start: {    line: 1,    column: 1  },  end: {    line: 1,    column: 4  }},range: [0, 3]}let {type,name: localName,loc: {  start: {    line: ll  },  end: {    column: col  }},range: [, second]} = node;console.log(type);//Identifierconsole.log(localName);//fooconsole.log(ll);//1console.log(col);//4console.log(second);//3

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.