I believe everyone has heard of ES6 data deconstruction. This article mainly helps you understand the usage of ES6 data deconstruction. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.
Object destructuring
Object destructuring syntax uses object literals on the left side of the assignment statement
let node = { type: true, name: false } //既声明又赋值 let { type, name } = node; //或者先声明再赋值 let type, name ({type,name} = node); console.log(type);//true console.log(name);//false
type and name identifiers not only declare local variables, but also read the corresponding attribute values of the object.
The value of a destructuring assignment expression is the value on the right side of the expression. An error is thrown when the right side of a destructuring expression evaluates to null or undefined.
Default value
When you use the destructuring assignment statement, if the specified local variable does not find a property with the same name in the object, the variable will be assigned the value undefined
let node = { type: true, name: false }, type, name, value; ({type,value,name} = node); console.log(type);//true console.log(name);//false console.log(value);//undefined
You can optionally define a default value to be used if the specified property does not exist.
let node = { type: true, name: false }, type, name, value; ({ type, value = true, name } = node); console.log(type);//true console.log(name);//false console.log(value);//true
Assign values to 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 this The syntax means to read the attribute named type and store its value in the variable localType. This syntax is opposite to the syntax of traditional object literals
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}
Second data destructuring
Array destructuring The syntax looks very similar to object destructuring, except that the object literal is replaced by an array literal.let colors = ["red", "blue", "green"]; let [firstC, secondC, thirdC, thursC = "yellow"] = colors; console.log(firstC//red console.log(secondC);//blue console.log(thirdC);//green console.log(thursC);//yellow
let colors = ["red","green","blue"]; let [,,thirdC] = colors; console.log(thirdC);//blue
Destructuring assignment
let colors = ["red","green","blue"], firstColor = "black", secondColor = "purple"; [firstColor,secondColor] = colors; console.log(firstColor);//red console.log(secondColor);//green
let a =1,b =2; [a,b] = [b,a]; console.log(a);//2 console.log(b);//1
Nested deconstruction
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]);//green console.log(restC[1]);//blue
Array cloning can be done using the remaining items
let colors = ["red", "green", "blue"]; let [...restC] = colors; console.log(restC);//["red", "green","blue"]
Three mixes Deconstruction
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);//Identifier console.log(localName);//foo console.log(ll);//1 console.log(col);//4 console.log(second);//3
The solution to the problem of js exporting Excel table exceeding 26 English characters ES6
A simple method to use babel to convert es6 syntax to es5
What are the functions of static methods of classes in ES6
The above is the detailed content of In-depth understanding of ES6 data deconstruction. For more information, please follow other related articles on the PHP Chinese website!