引言
解構賦值是ES6中引入的一種能快速方便的進行變數賦值的方法，其主要也就是分為解構和賦值兩部分內容，解構者，也就是匹配結構，然后分解結構進行賦值，
陣列的解構賦值
使用
const arr = [1,3,5]
const [a,b,c] = arr;
console.log(a) // 1
console.log(b) // 3
//相當于
const a = arr[0]
const b = arr[1]
// 部分結構匹配也能解構，解構不成功就會undefined
const [a] = arr; // a為1
const [a,b,c] = arr; // c為undefined
const [,y] = arr; // y為3
// 可以使用類似rest引數的模式
const [a,...arrs] = arr;
console.log(arrs) // [3,5]
解構時指定默認值，默認值生效的條件，該位置(===)嚴格等于undefined
const [a,b,x,y=66] = arr; //則y默認值為66
注：若使用[]解構的物件，為非陣列且是沒有Iterator介面的資料結構，則會報錯，
物件的結構賦值
使用
const person = {
name:'zhangsan',
age:18,
lover:{
name:'lishi',
age:20
}
}
const {name,age,lover} = person;
console.log(name); //zhangsan
console.log(lover); //{"name":"lishi","age":20}
// 相當于
const name = person.name;
const age = person.age;
// 若物件屬性名無法匹配，則結構失敗undefined
const {age0} = person; // age0為undefined
// 可用:類似取別名，則能通過別名取出對應屬性的值
// 此時age0為18，age為undefined
const {age:age0} = person;
// 也能嵌套解構
// 解構的時候不應有兩個相同的變數名，相當重復宣告了
// loverName為lishi
const {name,lover:{name:loverName}} = person;
實質
const {age} = {age:12}
等價
const {age:age} = {age:12}
指定默認值,默認值生效的條件，該位置(===)嚴格等于undefined
const {name='li',age=12} = {age:19}
字串的結構賦值
const [a,b,c,d] = 'haha';
const {length} = 'haha'; // length為4
函式引數的解構賦值
使用
// 使用上就是對應型別進行解構，然后就可以作引數用了
function foo([a,b]) {return a+b}
let result = foo([1,3]) // result為4
let arr = [[2,1],[2,2]].map(([a,b]) => a+b) //arr [3,4]
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/276128.html
標籤：其他
上一篇：CSS撰寫及選擇器