Detailed explanation of destructuring assignment examples in ES6

This time I bring you a detailed explanation of the destructuring assignment example of ES6. We know that ES6 is very powerful, so this article will give you a good analysis.

Basic usage

let [x, y, ...z] = ['a']
//"a", undefined, []

1. If the right side of the equal sign is not an array, an error will be reported (not a traversable structure)
2. Destructuring assignment var, let, Const command declarations are applicable
3. The set structure can also be destructured and assigned (it has the Iterator interface, which can be assigned in the form of an array structure)

set destructuring: a collection of single values ​​of any type

let [x, y, z] = new Set(["a", "b", "c"])
x //"a"

Default value

1. The value of the array member is not strictly equal to undefined, and the default value does not take effect (if null, the corresponding value is still null)

[x=1, y=2, z=3, o=4] = ['a', , undefined, null]
//"a", 2, 3, null、

2. If the default The value is an expression. The expression is evaluated lazily and will only be executed when used.

3. The default value can refer to other variables assigned to the structure, but the variable must have been Declaration

ObjectStructure assignment

1. The array is arranged in order, and the object variable must have the same name as the attribute

var {bar, foo, baz: loc} = {foo: 'aaa', baz: 'bbb'}
bar //undefined
foo //"aaa"
loc //"bbb"
baz //ReferenceError: baz is not defined

2. The variable has been declared before, and an error will be reported when using let assignment

3. Objects that can be used for nested structures

var node = {
  loc: {
    start: {
      line: 1,
      column: 5
    }
  }
}
var {loc:{start:{line}}} = node
line //1
loc //ReferenceError: loc is not defined
start //ReferenceError: start is not defined

line is a variable, loc, start are all patterns

Believe it or not After the above introduction, you have mastered the method. For more exciting information, please pay attention to the php Chinese websiteOther related articles!

Related reading:

Horizontal uninterrupted scrolling effect code

What does the JS engine look like when it is running

How to customize the console object when using JS

The above is the detailed content of Detailed explanation of destructuring assignment examples in ES6. For more information, please follow other related articles on the PHP Chinese website!