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.

What is destructuring in es6

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!