Javascript destructuring assignment details

1. Array deconstruction

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

In addition to arrays, any iterable object can be destructured, such as strings

let [first, second] = "he"

console.log(first, second) // he

2. Object Deconstruction

The right side of the assignment is the object, and the left side is the variable name separated by commas enclosed in curly braces.

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

The variable name on the left side needs to be the same as the property name in the object. If they do not match, the variable name on the left side will be assigned to undefined . For example:

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

If the variable name is different from the attribute name, you can assign the attribute name to the variable name using a colon separator.

For example:

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

3. Incomplete deconstruction

The number of variables on the left side of the destructuring assignment may not be equal to the number of elements in the array on the right side

(1) Extra variables on the left side will be set to undefined.

let [a, b, c] = [1, 2]

console.log(a, b, c) // 1 2 undefined

(2) Extra values ​​on the right will be ignored directly

let [a, b, c] = [1, 2, 3, 4]

console.log(a, b, c) // 1 2 3

(3) You can use commas on the left to skip certain values

let [a, , c] = [1, 2, 3, 4]

console.log(a, c) // 1 3

(4) The extra values ​​on the right side can be collected into a variable by...

let [a, b, ...c] = [1, 2, 3, 4]

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

4. Use destructuring assignment to implement variable exchange

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

This is the end of this article about the details of Javascript deconstruction assignment. For more relevant Javascript deconstruction assignment content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!