Home > Article > Web Front-end > 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
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
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
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'} //报错
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.
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
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
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
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!