What are the methods of destructuring in es6

This time I will bring you what are the methods of es6 deconstruction and what are the precautions for es6 deconstruction. The following is a practical case, let's take a look.

If you want to use a declared variable for destructuring assignment, you must be very careful.

// 错误的写法
let x;
{x} = {x: 1};
// SyntaxError: syntax error

The above code will report an error because the JavaScript engine will understand {x} as a code block, resulting in a syntax error. This problem can only be solved by not writing the curly brace at the beginning of the line to prevent JavaScript from interpreting it as a block of code.

// 正确的写法
let x;
({x} = {x: 1});

If the variable name is inconsistent with the attribute name, it must be written as follows.

var { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'
//这实际上说明，对象的解构赋值是下面形式的简写
let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };

In other words, the internal mechanism of object destructuring and assignment is to first find the attribute with the same name and then assign it to the corresponding variable. What is really assigned is the latter, not the former.

let { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa"
foo // error: foo is not defined

Note: p is a pattern at this time, not a variable, so it will not be assigned a value. If p also needs to be assigned as a variable, it can be written as follows.

let obj = {
 p: [
 'Hello',
 { y: 'World' }
 ]
};
let { p: [x, { y }] } = obj;
x // "Hello"
y // "World"

When destructuring assignment, if the right side of the equal sign is a numerical value or a Boolean value, it will be converted into an object first

let obj = {
 p: [
 'Hello',
 { y: 'World' }
 ]
};
let { p, p: [x, { y }] } = obj;
x // "Hello"
y // "World"
p // ["Hello", {y: "World"}]

Function parameters can also be assigned using destructuring.

let {toString: s} = 123;
s === Number.prototype.toString // true
let {toString: s} = true;
s === Boolean.prototype.toString // true

In the above code, the parameter of the function add is an array on the surface, but at the moment the parameter is passed in, the array parameter is deconstructed into variables x and y. For the code inside the function, the parameters they can feel are x and y

undefined will trigger the default value of the function parameter.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Combining HTML tags with DOM nodes

js prohibits browser back events

The above is the detailed content of What are the methods of destructuring in es6. For more information, please follow other related articles on the PHP Chinese website!