Home > Article > Web Front-end > What is es6 deconstruction
In es6, destructuring is the process of extracting values from arrays and objects according to a certain pattern and assigning values to variables; it is a process of breaking the data results and splitting them into smaller parts. To achieve the purpose of simplifying the extraction of information; the more common ones are object destructuring, array destructuring and mixed destructuring.
The operating environment of this tutorial: Windows 10 system, ECMAScript version 6.0, Dell G3 computer.
destructuring: Baidu Encyclopedia means structural decomposition. ES6 allows you to extract values from arrays and objects and assign values to variables according to certain patterns. This is called For destructuring.
The more common ones in development include object destructuring, array destructuring, and mixed destructuring. This is a process of breaking down a data structure into smaller parts to simplify the extraction of information.
Split the existing objects or arrays one by one to extract the data you need. It is a process of breaking the data structure and splitting it into smaller parts
ES6 uses a new mode to match the value you want to extract. Destructuring assignment uses this mode. The pattern will map the data structure you are deconstructing, and only those data that match the pattern will be extracted.
Example object destructuring
Traditional method to obtain the value in the object
let node = { type: 'Identifier', name: 'foo' } console.log(node.type) // Identifier console.log(node.foo) // foo
Use destructuring
let node = { type: 'Identifier', name: 'foo' } let { type, name } = node console.log(type) // Identifier console.log(name) // foo
If the specified local variable name does not exist in the object, Then this local variable will be assigned a value of undefined
let { type, name, value } = node console.log(type) // Identifier console.log(name) // foo console.log(value) // undefined
When the specified attribute does not exist, you can define any default value for the non-existing attribute
let { type, name, value = true } = node console.log(type) // Identifier console.log(name) // foo console.log(value) // true
Specify a new variable name for destructuring and assignment
let arr = { six: '男', age: 19 } let {six:newSix, age:newAge} = arr console.log(six, age) // six is not defined console.log(newSix, newAge) // 男 19
Do you think it’s strange if you look at the above? Traditional object assignments have four attributes on the left and values on the right. But in destructuring, the right side is the attribute and the left side is the value, so the new variable name is on the right side.
If you use let, var, or const to destructure an object, the value of the destructured object must not exist.
When var, let, and const assignments are not used, the destructuring statement needs to be wrapped with ()
({type,name} = node);//{}在js中作为代码块,单独使用加等号会报错会报错
Nested object destructuring
In the object Destructuring in nested objects, we will continue to use curly braces in the first level of destructuring to drill down to the next level to search; let’s first look at a chestnut:
let node = { type: "Identifier", name: "foo", loc: { start: { line: 1, column: 1 }, end: { line: 1, column: 4 } } }
The above is a nested object node, let’s first Deconstructing the first layer
let { loc, type, name } = node // {} Identifier foo
You can see that we deliberately disrupted the order of the attributes in {}, and the result is still output correctly, so we can guess that the specific corresponding method should be based on the name, and has nothing to do with the order. .
Continue to deconstruct the second layer
let { loc: { start }} = node; console.log(start.line); // 1 console.log(start.column); // 4
Here we can also assign start to a new custom local variable, assuming we assign it to newStart
let { loc: { start: newStart }} = node console.log(newStart.line) // 1 console.log(newStart.column) // 4
The summary is as follows :
All identifiers before the colon represent the retrieval position in the object, and the right side is the variable name to be assigned; if there are curly braces after the colon, it means that the final value to be assigned is nested in deeper levels within the object.
【Related recommendations: javascript video tutorial, web front-end】
The above is the detailed content of What is es6 deconstruction. For more information, please follow other related articles on the PHP Chinese website!