An explanation of the use of destructuring assignment in ES6

The content of this article is about the use of destructuring assignment in ES6. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Overview

To be honest, destructuring assignment is very tricky, especially when used with other es6, so how to simply say Destructuring assignment, for example : Deconstruction assignment is a coin splitting machine. Put all the 10 cents, 50 cents, and 1 yuan coins into the coin splitting machine, and it will automatically separate all the coins. Just take out what you want!

Destructuring array

You can take out a data or a group of data you want from an array

Normal

let [a, b, c]=[1,2,3]
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3

Use together with the remaining parameters

let [a, b, ...c]=[1,2,3,4,5]
console.log(a) // 1
console.log(b) // 2
console.log(c) // [3,4,5]

Omit some parameters

let [a, , ...c]=[1,2,3,4,5]
console.log(a) // 1
console.log(c) // [3,4,5]

Not enough parameters

let [a, b, c]=[1,2]
console.log(a) // 1
console.log(b) // 2
console.log(c) // undefined

Not enough parameters and don’t want themundefined, you can use the default parameters

let [a, b, c=3]=[1,2]
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3

Yes Existing variable destructuring assignment

let a, b
[a, b]=[1,2]
console.log(a, b)// 1,2

Interesting array destructuring chestnut

Exchange two variables

let a=1,b=2
[a, b]=[b, a]
console.log(a) // 2
console.log(b) // 1

Get a regular matching result

let [,match]="hello world".match(/h(e)/) 
// 匹配的结果是 ["he", "e", index: 0, input: "hello world", groups: undefined]

console.log(match) // 'e'

Destructuring object

You can take out an attribute value of the object from the object, or a sub-object

General

let {a, b}={a:1,b:2}
console.log(a) // 1
console.log(b) // 2

Remaining attributes

let {a,...b}={a:1,b:2,c:3}
console.log(a) // 1
console.log(b) // {b:2,c:3}

Not enough attributes

let {a, b, c}={a:1,b:2}
console.log(a) // 1
console.log(b) // 2
console.log(c) // undefined

If the attributes are not enough, you can use default parameters

let {a, b, c=3}={a:1,b:2}
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3

Assign values ​​to new variables

let {a:aa, b:bb}={a:1,b:2}
console.log(aa) // 1
console.log(bb) // 2

Assign values ​​to new variables and provide default values ​​

let {a:aa, b:bb, c:cc=3}={a:1,b:2}
console.log(aa) // 1
console.log(bb) // 2
console.log(cc) // 3

Deep objects can also be deconstructed

let {name, books:[book]}={name:"haha",books:['book1']}
console.log(name) // 'haha'
console.log(book) // 'book1'

Destructuring in iteration

for(let {name} of [{name:1},{name:2}]){
    console.log(name) // 1 2
}

Destructuring function formal parameters

let register({name, pwd}){
    console.log(name, pwd)
}
register({name:'1',pwd:'2'}) //1,2

Assigning values ​​to existing variables is quite special

let a,b
({a, b}={a:1,b:2}) // 需要提升优先级，否则 {a, b} 会被解析成代码块
console.log(a, b)// 1, 2

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