ES6變量的解構賦值

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

1.數組的解構賦值。

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

以前,為變量賦值,只能直接指定值。

let a = 1;

let b = 2;

let c = 3;

ES6允許寫成這樣。

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

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

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

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

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

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

對于Set結構,也可以使用數組的解構賦值。

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

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

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

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

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

foo//aaa;

bar//bbb

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

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

1
2

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

與數組一樣,解構也可以用于嵌套結構的對象:注意,這時p是模式,不是變量,因此不會被賦值。

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

上面的代碼有三次解構賦值,分別是loc、start、line三個屬性的解構賦值。注意:最后一次對line屬性的解構賦值之中,只有line是變量,loc和start都是模式,不是變量。

嵌套賦值例子:

對象的解構也可以指定默認值。默認值生效條件是,對象的屬性嚴格等于 undefind。與數組屬性解構默認值一樣。

由于數組本質是特殊的對象,因此也可以對數組進行對象屬性解構。arr的索引對應對象的鍵。

3.字符串的解構賦值。

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

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

console.log(a)//h。。。

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

let {length:len} = 'hello';

console.log(len)//5

4.數值和布爾值的解構賦值。

解構賦值時,如果等號右邊邊是數值和布爾值,則會先轉為對象。

let {toString:s} =123;

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

let {toString:s} = true;

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

5.函數參數的解構賦值。

function add([x,y]){

? ? return x+y;

}

add([1,2])//3

上面代碼中,函數add的參數表面上是一個數組,但在傳入參數的那一刻,數組參數就被解構成變量x和y。

上面的代碼中,函數move的參數是一個對象,通過對這個對象進行解構,得到變量x和y的值。如果解構失敗,x和y等于默認值。
上面的代碼中為函數move的參數指定默認值,而不是為變量x和y的值指定默認值,所以會得到與前一種寫法不同的結果。解構失敗就會得到undefind

6.用途

(1)交換變量的值。

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

(2)從函數返回多個值

函數只能返回一個值,如果有多個值,只能將它放在數組或對象里返回。有了解構賦值,取這些值就非常方便。

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

//參數是一組有序的值。

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

f([1,2,3]);

//參數是一組無秩序的值。

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

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

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

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

(6)遍歷Map結構。

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


最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容