1. 程式人生 > 其它 >es6解構賦值常用方法

es6解構賦值常用方法

解構賦值
陣列解構

let [a, b, c] = [1, 2, 3]   //a=1, b=2, c=3
let [d, [e], f] = [1, [2], 3]    //巢狀陣列解構 d=1, e=2, f=3
let [g, ...h] = [1, 2, 3]   //陣列拆分 g=1, h=[2, 3]
let [i,,j] = [1, 2, 3]   //不連續解構 i=1, j=3
let [k,l] = [1, 2, 3]   //不完全解構 k=1, l=2

複製程式碼物件解構

let {a, b} = {a: 'aaaa', b: 'bbbb'}      //a='aaaa' b='bbbb'
let obj = {d: 'aaaa', e: {f: 'bbbb'}}
let {d, e:{f}} = obj    //巢狀解構 d='aaaa' f='bbbb'
let g;
(g = {g: 'aaaa'})   //以宣告變數解構 g='aaaa'
let [h, i, j, k] = 'nice'    //字串解構 h='n' i='i' j='c' k='e'

利用結構賦值實現引數定義

一般我們在定義函式的時候,如果函式有多個引數時,在es5語法中函式呼叫時引數必須一一對應,否則就會出現賦值錯誤的情況,來看一個例子:

function personInfo(name, age, address, gender) {
  console.log(name, age, address, gender)
}
personInfo('william', 18, 'changsha', 'man')

複製程式碼上面這個例子在對使用者資訊的時候需要傳遞四個引數,且需要一一對應,這樣就會極易出現引數順序傳錯的情況,從而導致bug,接下來來看es6解構賦值是怎麼解決這個問題的:

function personInfo({name, age, address, gender}) {
  console.log(name, age, address, gender)
}
personInfo({gender: 'man', address: 'changsha', name: 'william', age: 18})