昨天講到ES6中新增的let 和 const? 今天來看看別的吧穴豫;
今天講一下解構(gòu)賦值:
什么解構(gòu)賦值?
解構(gòu)賦值就是按照一定的模式逼友,將數(shù)組或?qū)ο笾械臄?shù)據(jù)提取出來賦值給變量精肃。
以前,為變量賦值帜乞,只能直接指定值司抱;
但是現(xiàn)在ES6中可以寫出如圖這樣的:
從上面得知:從數(shù)組中提取值,是按照下標(biāo)黎烈,對變量進(jìn)行賦值的习柠。
數(shù)組的解構(gòu)賦值有以下幾個特點:
1》:要解構(gòu)的數(shù)據(jù)和變量是相等的
2》:要解構(gòu)的數(shù)據(jù)比變量多:
3》:要解構(gòu)的數(shù)據(jù)比變量少,則就相當(dāng)于聲明變量但未賦值照棋,為undefined:
4》:數(shù)組解構(gòu)賦值的缺省情況
5》:解構(gòu)賦值時可以為變量設(shè)置默認(rèn)值资溃。默認(rèn)值生效的前提:解構(gòu)失敗或者解構(gòu)的值嚴(yán)格等于(===)undefined;
下面的式子為什么會報錯烈炭?
因為等號右邊的值溶锭,轉(zhuǎn)為對象以后不可迭代,不具有Iterator接口 梳庆,最后一個空對象本身就不具有Iterator接口暖途。
對于set解構(gòu),也可以使用數(shù)組的解構(gòu)賦值膏执;
說明了一個問題驻售,只要某種數(shù)據(jù)它具備iterator接口,都可以采用數(shù)組形式的解構(gòu)賦值更米。
對象的解構(gòu)賦值欺栗;
解構(gòu)不僅可以用于數(shù)組,還可以用于對象。
聲明與對象的鍵同名的變量
解構(gòu)賦值時也可以為變量設(shè)置默認(rèn)值迟几,默認(rèn)值生效的前提:解構(gòu)失敗或者解構(gòu)的值嚴(yán)格等于undefined消请;
什么是解構(gòu)失敗类腮?
上述代碼中臊泰,等號右邊的對象沒有foo屬性,所以foo取不到值蚜枢,解構(gòu)失敗缸逃,所以等于undefined;
注意:
1》:如果將一個已經(jīng)聲明的變量用于解構(gòu)賦值厂抽,必須非常小心需频。
因為js引擎會將{x}理解成一個代碼塊,從而發(fā)生語法錯誤筷凤,只有不將大括號寫在行首昭殉,避免js將其解釋為代碼塊,才能解決這個問題
字符串也可以解構(gòu)賦值;沒錯吗伤,字符串吃靠;
這是因為字符串轉(zhuǎn)成一個類似數(shù)組的對象;
類數(shù)組中還有一個length的屬性足淆,因此還可以給這個屬性賦值巢块;
函數(shù)參數(shù)的解構(gòu)賦值
注意:函數(shù)的形參不是數(shù)組,是ES6的特殊寫法巧号,是模式和變量
函數(shù)add的參數(shù)表面上是一個數(shù)組族奢,但是在傳入?yún)?shù)的那一刻,數(shù)組參數(shù)就被破解構(gòu)成變量x丹鸿,y越走。對于函數(shù)來說,他們能感受到的參數(shù)就是x和y靠欢;
函數(shù)的參數(shù)也可以使用默認(rèn)值廊敌;
function move({x=0,y=0}={})
return[x,y];
}
move({x:3,y:8}); // [3, 8]
move({x:3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]
解構(gòu)賦值的用途:
1》:交換變量的值
2》:從函數(shù)返回多個值:
函數(shù)只能返回一個值,如果要返回多個值门怪,只能將他們放在數(shù)組或?qū)ο罄锓祷芈獬海谶@里用解構(gòu)賦值,取出這些值非常方便掷空。
3》:函數(shù)參數(shù)的定義
解構(gòu)賦值可以方便的將一組參數(shù)與變量名對應(yīng)起來肋殴;
4》提取JSON對象中的數(shù)據(jù)
5》函數(shù)參數(shù)的默認(rèn)值囤锉;
在寫項目的時候用到了ajax;可以指定參數(shù)的默認(rèn)值护锤,這樣就避免在函數(shù)體內(nèi)寫var foo = config.foo || 'default foo';這樣的語句官地。
6》遍歷Map結(jié)構(gòu);
任何部署了iterator接口的對象烙懦,都可以用for...of循環(huán)遍歷驱入。Map結(jié)構(gòu)原生支持Iterator接口,配合變量的結(jié)構(gòu)賦值修陡,獲取鍵名和鍵值就非常方便了沧侥。
要是想單獨獲得可寫成這個樣子:
7》:輸入模塊的指定方法:
加載模塊時可霎,往往需要用到一些方法魄鸦,這時用解構(gòu)賦值,可以使輸入的語句變得非常清晰癣朗。
const { SourceMapConsumer,SourceNode } = require("source-map");