JavaScript之變量解構賦值的使用

引言

解構賦值是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]