本文參考阮一峰老師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ù)組的元素是按次序排列的,變量的值由它的位置決定凹髓;而對象的屬性沒有次序烁登,變量名必須與屬性名同名,才能取到正確的值蔚舀。
如果變量名與屬性名不一致饵沧,必須寫成下面這樣:
從圖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。
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接口扼睬,配合變量的解構賦值逮栅,獲取鍵名和鍵值就非常方便。