Home >Web Front-end >Front-end Q&A >What does deconstruction in es6 mean?
In es6, destructuring refers to the act of extracting values from arrays and objects according to a certain pattern and assigning values to variables; common ones include object structure, array destructuring and mixed destructuring, which is a kind of data destructuring. The process of breaking down a structure into smaller parts to simplify the extraction of information.
The operating environment of this tutorial: Windows 10 system, ECMAScript version 6.0, Dell G3 computer.
destructuring: Baidu Encyclopedia means structural decomposition. ES6 allows extracting values from arrays and objects and assigning values to variables according to certain patterns. This is It's called 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.
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 If the specified local variable name does not exist in the object, then the local variable will be assigned the value 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 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
Look at the above and see if it seems strange. 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); //{} is used as code in js Block, if you use the equal sign alone, an error will be reported.
Destructuring of nested objects
Destructuring in nested objects, we will continue to use curly braces in the first level of destructuring to go deeper. Search in one layer; let’s look at a chestnut first:
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 deconstruct the first layer
let { loc, type, name } = node // {} Identifier foo
You can see that we deliberately disrupted {} In the order of the attributes, the result is still output correctly, so you 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.
Array destructuring uses array literals, and all destructuring operations are completed within the array, and array destructuring does not need to be used like object literal syntax Named properties of the object.
let colors = [ 'red', 'green', 'blue' ] let [ firstColor, secondColor ] = colors console.log(firstColor) // 'red' console.log(secondColor) // 'green'
In the array destructuring syntax, we mainly select the value based on its position in the array, and can store it in any variable. Elements that are not explicitly declared will be directly ignored.
let [ , , thirdColor ] = colors console.log(thirdColor) // 'blue'
Variable exchange of array destructuring
In traditional ES5, swapping values generally requires the introduction of a third temporary variable as a transfer, but if you use the array destructuring assignment syntax, there is no need to add additional variables. .
// ES5中互换值: let a = 1, b = 2, tmp; tmp = a a = b b = tmp console.log(a, b) // 2, 1 // ES6中互换值 let a = 1, b = 2; [ a, b ] = [b, a] console.log(a, b) // 2, 1
Nested data destructuring
let colors = [ 'red', [ 'green', 'lightgreen'], 'blue' ] let [ firstColor, [ secondColor, thirdColor ], fourthColor ] = colors console.log(firstColor) // red console.log(secondColor) // green console.log(thirdColor) // lightgreen console.log(fourthColor) // blue
Default value
You can also add a default value for any position in the array in the array destructuring assignment expression. When the attribute at the specified position When it does not exist or its value is undefined, the default value is used
let colors = [ 'red' ] let [ firstColor, secondColor = 'green' ] = colors console.log(firstColor) // red console.log(secondColor) // green
Indefinite element
...It is an expansion operator. We should all know its purpose. It can be used to expand the array when operating an array. into a string. In array destructuring, the remaining elements in the array can be assigned to a specific variable using the... syntax.
let colors = [ 'red', 'green', 'blue' ] let [ firstColor, ...restColors ] = colors console.log(firstColosr) // 'red' console.log(restColors.length); // 2 console.log(restColors[0]); // "green" console.log(restColors[1]); // "blue"
Array copy
In ES5, developers often use the concat() method to clone arrays
var colors = [ "red", "green", "blue" ]; var clonedColors = colors.concat(); console.log(clonedColors); //"[red,green,blue]"
The concat() method was originally designed to connect two arrays , if no parameters are passed when calling, a copy of the current function will be returned.
In ES6, the same goal can be achieved through the syntax of indefinite elements
let colors = [ "red", "green", "blue" ]; let [ ...clonedColors ] = colors; console.log(clonedColors); //"[red,green,blue]"
In the destructured array, indefinite The element must be the last entry. Adding commas after it will cause the program to throw a syntax error.
let err = { errors: [ { msg: 'this is a message' }, { title: 'this is a title' } ] }
In the above code, the err object contains errors, and errors is an array and contains new objects. Extract msg in the object. We can dismantle the above chestnut step by step and deconstruct it:
let { errors } = err let [ firstArr ] = errors let { msg } = firstArr console.log(msg) // 'this is a message' 也可以这样解构 let [ , { title }] = err.errors console.log(title) // 'this is a title' let [{ msg }] = err.errors console.log(msg) // 'this is a message'
Let’s look at a more complicated one. In fact, as long as you can find the order, this is still very simple to understand.
let node = { type: "Identifier", loc: { start: { line: 1, column: 1 } }, range: [0, 3] }; let { loc: { start }, range: [ startIndex ] } = node; console.log(start.line); // 1 console.log(start.column); // 1 console.log(startIndex); // 0
Actual use - parameter deconstruction
is generally used when encapsulating function parameters, as shown below:
// options 上的属性表示附加参数 function setCookie(name, value, options) { options = options || {}; let secure = options.secure, path = options.path, domain = options.domain, expires = options.expires; // 设置 cookie 的代码 } //可以改写为:对options进行解构并赋予默认值 function setCookie(name, value, { secure, path, domain, expires } = {}) { // ... }
[Related recommendations: javascript video tutorial 、webfrontend】
The above is the detailed content of What does deconstruction in es6 mean?. For more information, please follow other related articles on the PHP Chinese website!