ES6下javascript解構賦值常見用法總結
阿新 • • 發佈:2022-01-31
解構賦值出現的契機:
let obj = { a: 1,b: 2 } // 取值 let a = obj.a let b = obj.b
script解構賦值問題核心:
每次取值既要確定物件屬性名,還得重新定義一個變數佔用多一行,程式碼行數和重複的宣告a,使得程式碼不夠簡潔,能否通過左邊變http://www.cppcns.com量名,匹配到右邊的屬性名從而取得對應的值,ES6解構語法核心就基於這樣的模式匹配思想
上面的問題解構方案:
let obj = { a: 1,b: 2 } // 取值 let {a,b} = obj // a=1 b=2
很明顯看到,我們無需在右側顯式宣告取值屬性名,完全依據右邊結構進行對應取值,非常優雅
Javascript解構賦值應用場景:
1.物件宣告解構
let obj = {
a: 1,b} = obj
// a=1 b=2www.cppcns.com
2.物件賦值解構
let a,b let obj = { a: 1,b: 2 } // 取值 ({a,b} = obj) // 更常見的場景是變數c d被宣告到全域性,這種情況在很常見,數據被提前宣告到data選項,資料訪問一般都是this.xxxdata,此時就很有用了 ({a:c,b:d} = obj)
3.變數交換
[x,y] = [y,x]
4.陣列解構
let [first,] = arr//獲取 let [first,...rest] = arr//獲取第一個,以及剩餘引數
5.函式物件實參解構
function buildhttp://www.cppcns.comAnimal({accessory = "",animal = "cat",color = 'rainbow',hairType = 'straight'} = {})
{...}
更多關於ES6下的Javascript使用小技巧請檢視下面的相關連結