ES6下javascript解構(gòu)賦值常見用法總結(jié)
Javascript解構(gòu)賦值出現(xiàn)的契機(jī):
let obj = { a: 1, b: 2 } // 取值 let a = obj.a let b = obj.b
Javascript解構(gòu)賦值問題核心:
每次取值既要確定對象屬性名,還得重新定義一個(gè)變量占用多一行,代碼行數(shù)和重復(fù)的聲明a,使得代碼不夠簡潔,能否通過左邊變量名,匹配到右邊的屬性名從而取得對應(yīng)的值,ES6解構(gòu)語法核心就基于這樣的模式匹配思想
上面的問題解構(gòu)方案:
let obj = { a: 1, b: 2 } // 取值 let {a, b} = obj // a=1 b=2
很明顯看到,我們無需在右側(cè)顯式聲明取值屬性名,完全依據(jù)右邊結(jié)構(gòu)進(jìn)行對應(yīng)取值,非常優(yōu)雅
Javascript解構(gòu)賦值應(yīng)用場景:
1.對象聲明解構(gòu)
let obj = { a: 1, b: 2 } // 取值 let {a, b} = obj // a=1 b=2
2.對象賦值解構(gòu)
let a, b let obj = { a: 1, b: 2 } // 取值 ({a, b} = obj) // 更常見的場景是變量c d被聲明到全局,這種情況在vue很常見,數(shù)據(jù)被提前聲明到data選項(xiàng),數(shù)據(jù)訪問一般都是this.xxxdata,此時(shí)就很有用了 ({a:c, b:d} = obj)
3.變量交換
[x,y] = [y,x]
4.數(shù)組解構(gòu)
let [first,] = arr//獲取 let [first, ...rest] = arr//獲取第一個(gè),以及剩余參數(shù)
5.函數(shù)對象實(shí)參解構(gòu)
function buildAnimal({accessory = "", animal = "cat", color = 'rainbow', hairType = 'straight'} = {}) {...}
更多關(guān)于ES6下的Javascript使用小技巧請查看下面的相關(guān)鏈接
相關(guān)文章
如何在標(biāo)題欄顯示框架內(nèi)頁面的標(biāo)題
如何在標(biāo)題欄顯示框架內(nèi)頁面的標(biāo)題...2007-02-02javascript學(xué)習(xí)筆記(十八) 獲得頁面中的元素代碼
javascript學(xué)習(xí)筆記之獲得頁面中的元素代碼,需要的朋友可以參考下2012-06-06JavaScript顯式數(shù)據(jù)類型轉(zhuǎn)換詳解
這篇文章主要介紹了JavaScript顯式數(shù)據(jù)類型轉(zhuǎn)換,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03