ES6學習4 變數的解構賦值

2022-07-18 03:39:13 字數 3660 閱讀 6684

一、陣列結構賦值

1、陣列結構賦值

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

es6 可以從陣列中提取值,按照對應位置,對變數賦值。

1)  本質上,這種寫法屬於「模式匹配」,只要等號兩邊的模式相同,左邊的變數就會被賦予對應的值。下面是一些使用巢狀陣列進行解構的例子。

let [foo, [[bar], baz]] = [1, [[2], 3]];

foo //1

bar //

2baz //

3let [ , , third] = ["foo", "bar", "baz"];

third

//"baz"

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

x //

1y //

3let [head, ...tail] = [1, 2, 3, 4];

head //1

tail //

[2, 3, 4]

let [x, y, ...z] = ['a'];

x //

"a"y //

undefined

z //

2)  另一種情況是不完全解構,即等號左邊的模式,只匹配一部分的等號右邊的陣列。這種情況下,解構依然可以成功。

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

x //

1y //

2let [a, [b], d] = [1, [2, 3], 4];

a //

1b //

2d //

4

3)  如果等號的右邊不是陣列(或者嚴格地說,不是可遍歷的結構,參見《iterator》一章),那麼將會報錯

//

報錯let [foo] = 1;

let [foo] = false

;let [foo] =nan;

let [foo] =undefined;

let [foo] = null

;let [foo] = {};

上面的語句都會報錯,因為等號右邊的值,要麼轉為物件以後不具備 iterator 介面(前五個表示式),要麼本身就不具備 iterator 介面(最後乙個表示式)

2、解構賦值允許指定預設值。

let [foo = true] =;

foo

//true

let [x, y = 'b'] = ['a']; //

x='a', y='b'

let [x, y = 'b'] = ['a', undefined]; //

x='a', y='b'

注意,es6 內部使用嚴格相等運算子(===),判斷乙個位置是否有值。所以,只有當乙個陣列成員嚴格等於undefined,預設值才會生效。

let [x = 1] =[undefined];

x //

1let [x = 1] = [null

];x

//null

//上面**中,如果乙個陣列成員是null,預設值就不會生效,因為null不嚴格等於undefined。

1)  如果預設值是乙個表示式,那麼這個表示式是惰性求值的,即只有在用到的時候,才會求值。

function

f()

let [x = f()] = [1];

上面**中,因為x能取到值,所以函式f根本不會執行。上面的**其實等價於下面的**。

二、物件結構賦值

1、解構不僅用於陣列,還可以用於物件

let  = ;

foo

//"aaa"

bar //

"bbb"

1)  物件的解構與陣列有乙個重要的不同。陣列的元素是按次序排列的,變數的取值由它的位置決定;而物件的屬性沒有次序,變數必須與屬性同名,才能取到正確的值。

let  = ;

foo

//"aaa"

bar //

"bbb"

let = ;

baz

//undefined

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

let  = ;

baz

//"aaa"

let obj = ;

let =obj;

f //

'hello'

l //

'world'

2)  物件的解構賦值的內部機制,是先找到同名屬性,然後再賦給對應的變數。真正被賦值的是後者,而不是前者。

let  = ;

baz

//"aaa"

foo //

error: foo is not defined

上面**中,foo是匹配的模式,baz才是變數。真正被賦值的是變數baz,而不是模式foo

2、與陣列一樣,解構也可以用於巢狀結構的物件

let obj =

]};let ] } =obj;

x //

"hello"

y //

"world"

注意,這時p是模式,不是變數,因此不會被賦值。如果p也要作為變數賦值,可以寫成下面這樣。

let obj =

]};let ] } =obj;

x //

"hello"

y //

"world"

p //

["hello", ]

三、字串的解構賦值

1、字串也可以解構賦值。這是因為此時,字串被轉換成了乙個類似陣列的物件

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

a //

"h"b //

"e"c //

"l"d //

"l"e //

"o"

let  = 'hello';

len

//5

三、數值和布林值的解構賦值

1、解構賦值時,如果等號右邊是數值和布林值,則會先轉為物件

let  = 123;

s === number.prototype.tostring //

true

let = true

;s === boolean.prototype.tostring //

true

let = undefined; //

typeerror

let = null; //

typeerror

解構賦值的規則是,只要等號右邊的值不是物件或陣列,就先將其轉為物件。由於undefinednull無法轉為物件,所以對它們進行解構賦值,都會報錯。

es6變數解構賦值

es6允許按照一定模式,從陣列和物件中提取值,對變數進行賦值,這被稱為解構。解構賦值在實際開發中可以大量減少我們的 量,並且讓我們的程式結構更清晰。陣列的解構賦值 let a,b 1 2 console.log a 1 console.log b 2 上面的 表示,可以從陣列中提取值,按照位置的物件...

ES6變數解構賦值

es6 允許按照一定模式,從陣列和物件中提取值,對變數進行賦值,這被稱為解構 es6之前我們申明多個變數需要按照下面的方法 let l a 1 let b 2 let c 3 let d 4 或者 let a 1,b 2,c 3,d 4 現在我們可以更加簡便 let a,b,c,d 1,2,3,4 ...

es6 變數解構賦值

1.陣列的解構賦值 等號兩邊的模式相同,左邊的變數就會被賦予對應的值 預設值 undefined型別只有乙個值,即undefined。當宣告的變數還未被初始化時,變數的預設值為undefined。null型別也只有乙個值,即null。null用來表示尚未存在的物件,常用來表示函式企圖返回乙個不存在的...