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.

What does destructuring mean in es6

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.

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 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

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.

Mixed deconstruction

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!