2 變數的解構賦值

2022-06-25 15:48:08 字數 3225 閱讀 5905

es6 允許按照一定模式,從陣列物件中提取值,對變數進行賦值,這被稱為解構(destructuring),,,

解構賦值的規則是,只要等號右邊的值不是物件或陣列,就先將其轉為物件

一、陣列的解構賦值--『模式匹配』

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

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

]]; --> foo

//1 bar //

2 baz //

3let [ , , third] = ["

foo", "

bar", "

baz"

]; --> third

//"baz"

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

]; --> x

//1 y //

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

]; --> head

//1 tail //

[2, 3, 4]

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

a']; --> x //

"a" y

//undefined z //

let [x, y, z] = new set(['

a', '

b', '

c']); --> x //

"a"

***如果等號的右邊不是陣列(或者嚴格地說,不是可遍歷的結構,參見《iterator》一章),那麼將會報錯,只要某種資料結構具有 iterator 介面,都可以採用陣列形式的解構賦值。

可以設定預設值

let [x, y = '

b'] = ['

a']; //

x='a', y='b'

二、物件的解構賦值

let  = ; --> foo //

"aaa" bar

//"bbb"

陣列的元素是按次序排列的,變數的取值由它的位置決定;物件的屬性沒有次序,變數必須與屬性同名,才能取到正確的值

let = ; --> foo //

"aaa" bar

//"bbb"

let = ; --> baz //

undefined

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

let = ; --> baz //

"aaa"

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

let = ; --> baz //

"aaa"

foo //

error: foo is not defined

物件的解構賦值,可以很方便地將現有物件的方法,賦值到某個變數。

let = math;

可以設定預設值 

var  = ; --> x //

1 y

//5

三、字串的解構賦值

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

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

hello

'; --> a //

"h" b

//"e" c

//"l" d

//"l" e

//"o

類似陣列的物件都有乙個length屬性,因此還可以對這個屬性解構賦值

let = '

hello

'; --> len //

5

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

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

let = 123; --> s === number.prototype.tostring //

true

let = true; --> s === boolean.prototype.tostring //

true

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

let = undefined; //

typeerror

let = null; //

typeerror

五、函式引數的解構賦值

function add([x, y])

add([

1, 2]); --> //3[[

1, 2], [3, 4]].map(([a, b]) => a + b); --> //

[ 3, 7 ]

可以設定預設值

function move( ={}) 

move(); //

[3, 8]

move(); //

[3, 0]

move({}); //

[0, 0]

move(); //

[0, 0]

下面**是為函式move的引數指定預設值,而不是為變數x和y指定預設值,所以會得到與前一種寫法不同的結果。

function move( = )

move(); //

[3, 8]

move(); //

[3, undefined]

move({}); //

[undefined, undefined]

move(); //

[0, 0]

六、圓括號問題

好煩呀,下一遍再看,,總是耐不住性子

七、用途

1、交換變數的值

2、從函式返回多個值

3、函式引數的定義

4、提取 json 資料

5、函式引數的預設值

6、遍歷 map 結構

7、輸入模組的指定方法

變數解構賦值

1.從陣列物件中提取值,對變數進行賦值,被稱為結構。2.false,1,nan undefind null轉化為物件後不具備iterator介面,本身不具備iterator介面。3.set結構也可使用陣列的解構賦值,只需要資料機構具備iterator 迭代器 介面,都可以採用陣列形式的解構賦值 ar...

變數的解構賦值

從陣列和物件中提取值,對變數進行賦值,這被稱為解構 本質上,這種寫法屬於 模式匹配 只要等號兩邊的模式相同,左邊的變數就會被賦予對應的值 例子 let a,b,c 1,2,3 let foo,bar baz 1,2 3 foo 1 bar 2 baz 3 let third foo bar baz ...

變數的解構賦值

什麼是解構 es6允許按照一定的模式,從陣列或者物件中提取值,然後賦值給相應變數,此為解構。解構分為完全解構和不完全解構,前者要求一一對應,後者可以是等號左邊只匹配等號右邊的一部分。解構不成功會返回undefined。let foo alert foo undefined重點 不是只有陣列才可以解構...