Introduction to the usage of destructuring assignment of variables in ES6 (with code)

This article brings you an introduction to the usage of destructuring and assigning variables in ES6 (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Destructuring assignment of arrays

Basic usage

ES6 allows extracting values ​​from arrays and objects and assigning values ​​to variables according to a certain pattern, which is called a structure.

Before ES6, if you wanted to assign a value to a variable, you could only specify its value, as follows:

let a = 1;
let b = 2

In ES6, you can write it like this, as follows:

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

It’s worth noting Yes, the values ​​on both sides of the equation must be equal, so that the variable on the left will be assigned the corresponding value on the right. If the value on the left is not equal, undefined will appear, as follows:

let [foo,[[bar],baz]] = [1,[[2],3]]
foo // 1
bar // 2
baz // 3

注意：只有左右两边的 格式一定要对等，数量可以不对等。

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

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

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

let [a] = []
let [b,a] = [1]
a = undefined

There is another situation where the left side of the equal sign is an array, but the right side of the equal sign is other values, and an error will be reported. As follows:

let [a] = 1;
let [a] = false;
let [a] = NaN;
let [a] = undefined;
let [a] = null;
let [a] = {};

以上都会报错

But if the left is an array and the right is a string, the value of the first subscript of the string will be taken

let [a] = '121321'  a = '1'
let [a] = 'adgasg'  a = 'a'

For the Set structure, you can also use the destructuring assignment of the array .

let [x,y,z] = new Set([1,2,3])
x = 1, y = 2, z = 3

Default value

Destructuring assignment allows specifying a default value

let [a = 3] = []        // a:3
let [a = 3,b] = [,4]    // a:3 b:4
let [a = 3,b] = [5,4]   // a:5 b:4

Special

let [a = 3] = [undefined]   // a:3
let [a = 3] = [null]        // a:null

Tips: Use the strict equality operator in es6 to assign values ​​to the structure If the default value needs to be effective, the default value should be used only when the equivalent value is undefined, otherwise assignment will still be used. null in the above is not strictly equal to undefined

If the assignment of the default value is an expression, only when the assignment on the right side of the equal sign does not have a value of undefined, the value in the expression will be taken Value, as follows:

function demo(){
    console.log('demo')
}

let [a = demo()] = []   // a: demo
let [a = demo()] = [1]  // a : 1

Destructuring assignment of objects

The difference from arrays is that the elements of the array must be in the same position as the assigned elements for correct assignment, while the destructuring assignment of objects is The correct value can be obtained if the variables and attributes on both sides of the equal sign have the same name. Otherwise the value is undefined

let {a,b} = {a:'23',b:'3'}
let {a,b} = {b:'3',a:'23'}

// 上面两个的值 都是 a: 23 b: 3

let {a,b} = {a:'3',c:'d'}
//a: 3 b: undefined

Destructuring assignment of the object and assigning the method of an existing object to a new variable, as follows:

let {sin,cos} = Math
// Math 中的sin cos 方法将赋值给变量 sin cos

let {log} = console
// log(2)  ===  console.log(2)

If the equal sign The variable name on the left cannot be consistent with the attribute name of the object on the right side of the equal sign, and must be written in the following format:

let {a:b} = {a:'ss'}     // b：ss
//a是属性名，b才是实际赋值的变量名

The destructuring assignment of the object can also be nested destructuring, as follows:

第一种：

let obj = {
    p:[
        'Hello',
        {y:'world'}
    ]
}

let {p:[x,{y}]} = obj 
// x: Hello, y: world

这边的p只是属性不是变量，如果p想赋值可以写成：

let {p,:[x,{y}]} = obj

第二种：
const a = {
    loc: {
        t :1,
        b :{
            c:1,
            d:2    
        }
    }
}
let {loc:{t,b:{c,d}}} = a
或者
let {loc,loc:{t,b,b:{c,d}}} = a

Nested assignment

let o = {}, arr = []

({foo:o.prop,bar: arr[0]} = {foo:123,bar:true})
//o: 123, arr = [true]

If the destructuring mode is a nested object, if the parent property of the child object does not exist, an error will be reported, as follows:

let {foo:{bar}} = {baz:'baz'} //报错

Default value

let {x = 3} = {}
// x: 3

let {x,y = 5} = {x : 1}
// x: 1, y: 5

let {x: y = 5} = {}
// y = 5

let {x: y = 5} = {x : 4}
// y = 4

let {x: y = 'hhhh'} = {}
//y = 'hhhh'

Tips:以上左边 x为属性名，y为变量


let {x = 5} = {x: undefined}
// x: 5

let {x = 4} = {x: null}
// x: null

同数组一样遵循 严格等于 
只有右边为undefined的时候默认值才会生效

Note:

1) Declared variables cannot be used for destructuring assignment because they are already a code block.

Destructuring assignment of string

If the assignment object is an array, the string will be split into the format of the array, corresponding to the assignment

let [a,b] = 'ha'
// a = h , b = a

同时可以获得字符串的长度：

let {length:len} = '12121'
// len = 5

Numbers and Boolean values Destructuring assignment

If the right side of the equal sign is a number or Boolean value, it will be converted into an object. In other words, except for arrays and objects, other values ​​will be converted into objects, except null and undefined. As follows:

let {t:s} = 123
let {t: s} = true

Destructuring assignment of function parameters

function add([x,y]){
    return x+y
}
add([3,5]) // 8

[[3,5],[6,7]].map(([a,b]) => a + b)
//8 , 13

function m({x=3, y=4} = {}){
    return [x,y]
}
m({x:33,y:8})     // [33,8]
m({x:32})         // [32,4]
m({})             // [3,4]
m()               // [3,4]

function m({x,y} = {x=0,y=0}){
    return [x,y]
}
m({x:33,y:8})     // [33,8]
// 代替右边的 x:0, y:0 所以是传值 33  8

m({x:32})         // [32,undefined]
//因为传值替代右边的赋值，但是只有x没有y
//所以y是取   左边y的默认值，因为你没有赋值 为undefined

m({})             // [undefined,undefined] 
// 取左边x,y的默认值，因为没有赋值 为undefined

m()               // [0,0]
// 没有传值，使用本身的赋值 都是0

Others

When parentheses cannot be used

1. Variable declaration statement
2. Function parameters
3. Mode of assignment statement

When parentheses can be used

1. In the non-mode part of assignment statement, parentheses can be used

The purpose of destructuring assignment

1. Exchanging the value of a variable
2. Returning multiple values ​​from a function
3. Definition of function parameters
4. Extract JOSN data
5. Default values ​​of function parameters
6. Traverse the Map structure
7. Specification method of input module

The above is the detailed content of Introduction to the usage of destructuring assignment of variables in ES6 (with code). For more information, please follow other related articles on the PHP Chinese website!