Home > Article > Web Front-end > 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!