es6解構賦值常用方法
阿新 • • 發佈:2022-06-05
解構賦值
陣列解構
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})