ES6變量的解構賦值

本文參考阮一峰老師es6入門做的學習筆記后雷。

1.數(shù)組的解構賦值苞慢。

ES6允許按照一定模式,從數(shù)組和對象中提取值,對變量進行賦值隐圾,這被稱之為解構。

以前丰捷,為變量賦值篡石,只能直接指定值。

let a = 1;

let b = 2;

let c = 3;

ES6允許寫成這樣。

let [a,b,c] = [1,2,3];

demo小例子:如果等號左邊的變量按順序匹配等號右邊的值沒有就屬于結構不成功尽纽,值為undefind咐蚯。解構是按順序匹配。即可以不完全解構弄贿,等號左邊的會依匹配等號右邊的春锋,沒有的就是undefind。(數(shù)組里面套數(shù)組差凹,會以每個數(shù)組的起始位置開始匹配期奔。)注意:左邊的格式與右邊的格式必須保持一樣。

let [aa,[bb],cc] = [1,2,3];//這樣是解構不了危尿。

let [,,aaa] = [2]; //aaa是undefind

如果等號右邊不是數(shù)組(或則嚴格的說呐萌,不可遍歷的結構)那么將會報錯。

let [foo] = 1;let [foo] = false;let [foo] = NaN;let [foo] = undefined;let [foo] = null;let [foo] = {};

對于Set結構谊娇,也可以使用數(shù)組的解構賦值肺孤。

let [xx,yy,zz] = new Set(['11','22','33']); console.log(xx)//11; console.log(yy)//22; console.log(zz)//33;

解構賦值允許指定默認值。(注意:ES6內部使用嚴格相等運算符‘===’济欢,判斷一個位置是否有值赠堵。所以,只有當一個數(shù)組成員嚴格等于undefined法褥,默認值才會有效)茫叭。

如果默認值是一個表達式,那么這個表達式是惰性求值的半等,即只有在用的時候揍愁,才會求值。

2.對象的解構賦值杀饵。? ?

let {foo,bar} = {foo:'aaa',bar:'bbb'};

foo//aaa;

bar//bbb

對象的解構與數(shù)組的解構有一個重要的不同莽囤。數(shù)組的元素是按次序排列的,變量的值由它的位置決定凹髓;而對象的屬性沒有次序烁登,變量名必須與屬性名同名,才能取到正確的值蔚舀。

如果變量名與屬性名不一致饵沧,必須寫成下面這樣:

1
2

從圖2可以看出對象的解構賦的內部機制,是先找到同名的屬性赌躺,然后賦值給對應的變量狼牺。真正被賦值的是后者。上面的代碼中礼患,foo是匹配的模式是钥,baz才是變量掠归。真正被賦值的是變量baz,而不是模式foo悄泥。

與數(shù)組一樣虏冻,解構也可以用于嵌套結構的對象:注意,這時p是模式弹囚,不是變量厨相,因此不會被賦值。

如果p也要作為變量賦值鸥鹉,可以寫成下面這樣:

上面的代碼有三次解構賦值蛮穿,分別是loc、start毁渗、line三個屬性的解構賦值践磅。注意:最后一次對line屬性的解構賦值之中,只有l(wèi)ine是變量灸异,loc和start都是模式府适,不是變量。

嵌套賦值例子:

對象的解構也可以指定默認值绎狭。默認值生效條件是细溅,對象的屬性嚴格等于 undefind。與數(shù)組屬性解構默認值一樣儡嘶。

由于數(shù)組本質是特殊的對象,因此也可以對數(shù)組進行對象屬性解構恍风。arr的索引對應對象的鍵蹦狂。

3.字符串的解構賦值。

字符串也可以解構賦值朋贬,這是因為此時字符串被轉換成了一個類似數(shù)組的對象凯楔。

const [a,b,c,d,e] = 'hello';

console.log(a)//h。锦募。摆屯。

類似數(shù)組的對象都有一個length屬性,因此還可以對這個屬性解構賦值糠亩。

let {length:len} = 'hello';

console.log(len)//5

4.數(shù)值和布爾值的解構賦值虐骑。

解構賦值時,如果等號右邊邊是數(shù)值和布爾值赎线,則會先轉為對象廷没。

let {toString:s} =123;

s === Number.prototype.tostring;//true

let {toString:s} = true;

s===Boolean.prototype.tostring;//true

5.函數(shù)參數(shù)的解構賦值。

function add([x,y]){

? ? return x+y;

}

add([1,2])//3

上面代碼中垂寥,函數(shù)add的參數(shù)表面上是一個數(shù)組颠黎,但在傳入參數(shù)的那一刻另锋,數(shù)組參數(shù)就被解構成變量x和y。

上面的代碼中狭归,函數(shù)move的參數(shù)是一個對象夭坪,通過對這個對象進行解構,得到變量x和y的值过椎。如果解構失敗室梅,x和y等于默認值。
上面的代碼中為函數(shù)move的參數(shù)指定默認值潭流,而不是為變量x和y的值指定默認值竞惋,所以會得到與前一種寫法不同的結果。解構失敗就會得到undefind

6.用途

(1)交換變量的值灰嫉。

let x=1;let y = 2; [x,y] = [y,x];//x=2,y=1

(2)從函數(shù)返回多個值

函數(shù)只能返回一個值拆宛,如果有多個值,只能將它放在數(shù)組或對象里返回讼撒。有了解構賦值浑厚,取這些值就非常方便。

(3)函數(shù)參數(shù)的定義方便地將一組參數(shù)與變量名對應起來根盒。解構賦值可以方便的將一組參數(shù)與變量名對應起來钳幅。

//參數(shù)是一組有序的值。

function f([x,y,z]){....}

f([1,2,3]);

//參數(shù)是一組無秩序的值炎滞。

function f({x,y,z}){...}

f({z:3,y:2,x:1});

(4)提取JSON數(shù)據敢艰。下面代碼可以快速提取JSON數(shù)據的值。

(5)函數(shù)參數(shù)的默認值册赛。指定參數(shù)的默認值钠导,就避免了在函數(shù)體內部寫var foo = config.foo || 'defaultfoo';這樣的語句。

(6)遍歷Map結構森瘪。

任何部署了Iterator接口的對象牡属,都可以用for...of循環(huán)遍歷。Map結構原生支持Iterator接口扼睬,配合變量的解構賦值逮栅,獲取鍵名和鍵值就非常方便。


最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末窗宇,一起剝皮案震驚了整個濱河市措伐,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌担映,老刑警劉巖废士,帶你破解...
    沈念sama閱讀 206,968評論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異蝇完,居然都是意外死亡官硝,警方通過查閱死者的電腦和手機矗蕊,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,601評論 2 382
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來氢架,“玉大人傻咖,你說我怎么就攤上這事♂校” “怎么了卿操?”我有些...
    開封第一講書人閱讀 153,220評論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長孙援。 經常有香客問我害淤,道長,這世上最難降的妖魔是什么拓售? 我笑而不...
    開封第一講書人閱讀 55,416評論 1 279
  • 正文 為了忘掉前任窥摄,我火速辦了婚禮,結果婚禮上础淤,老公的妹妹穿的比我還像新娘崭放。我一直安慰自己,他們只是感情好鸽凶,可當我...
    茶點故事閱讀 64,425評論 5 374
  • 文/花漫 我一把揭開白布币砂。 她就那樣靜靜地躺著,像睡著了一般玻侥。 火紅的嫁衣襯著肌膚如雪决摧。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,144評論 1 285
  • 那天凑兰,我揣著相機與錄音蜜徽,去河邊找鬼。 笑死票摇,一個胖子當著我的面吹牛,可吹牛的內容都是我干的砚蓬。 我是一名探鬼主播矢门,決...
    沈念sama閱讀 38,432評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼灰蛙!你這毒婦竟也來了祟剔?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,088評論 0 261
  • 序言:老撾萬榮一對情侶失蹤摩梧,失蹤者是張志新(化名)和其女友劉穎物延,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體仅父,經...
    沈念sama閱讀 43,586評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡叛薯,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,028評論 2 325
  • 正文 我和宋清朗相戀三年浑吟,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片耗溜。...
    茶點故事閱讀 38,137評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡组力,死狀恐怖,靈堂內的尸體忽然破棺而出抖拴,到底是詐尸還是另有隱情燎字,我是刑警寧澤,帶...
    沈念sama閱讀 33,783評論 4 324
  • 正文 年R本政府宣布阿宅,位于F島的核電站候衍,受9級特大地震影響,放射性物質發(fā)生泄漏洒放。R本人自食惡果不足惜蛉鹿,卻給世界環(huán)境...
    茶點故事閱讀 39,343評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望拉馋。 院中可真熱鬧榨为,春花似錦、人聲如沸煌茴。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,333評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽蔓腐。三九已至矩乐,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間回论,已是汗流浹背散罕。 一陣腳步聲響...
    開封第一講書人閱讀 31,559評論 1 262
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留傀蓉,地道東北人欧漱。 一個月前我還...
    沈念sama閱讀 45,595評論 2 355
  • 正文 我出身青樓,卻偏偏與公主長得像葬燎,于是被迫代替她去往敵國和親误甚。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 42,901評論 2 345

推薦閱讀更多精彩內容