es6 變數的解構賦值

2021-10-22 08:40:32 字數 3708 閱讀 2797

1.es6 允許按照一定模式,從陣列和物件中提取值,對變數進行賦值,也就是按照相同的結構對應給值,這被稱為解構(destructuring)。

2.本質上,這種寫法屬於「模式匹配」,只要等號兩邊的模式相同,左邊的變數就會被賦予對應的值。

3.解構賦值舉例:

let

[a, b]=[

2,3]

; console.

log(a, b)

;//輸出:2 3

let[a, b, c]=[

2,3]

; console.

log(a, b, c)

;//輸出:2 3 undefined

let[a,

[b, c],[

[d, e]]]

=[0,

[1,2

],[[

3,4]

]]; console.

log(a,b,c,d,e)

;//輸出:0 1 2 3 4

let[

,, a]=[

1,2,

3,4,

5]; console.

log(a)

;//輸出:3

4.如果等號的右邊不是陣列將會報錯:

let

[a]=1;

let[b]

=false

;let

[c]=

nan;

let[d]

= undefined;

let[e]

=null

;let

[f]=

;

5.使用…擴充套件運算子拆分集合:

let a =[1

,2,3

];console.

log(

[...a]);

//輸出:array[3]

let[a, b,

...c]=[

1,2,

3,4,

5,6]

; console.

log(a, b, c)

;//輸出:1 2 array[4]

let[

...a, b, c]=[

1,2,

3,4,

5];//擴充套件運算子只能在最後

console.

log(a, b, c)

;//報錯:rest element must be last element in array

6.解構賦值允許指定預設值:

let

[a =

0, b =1]

=;console.

log(a, b)

;//輸出:0 1

let[x, y =

'b']=[

'a']

; console.

log(x,y)

;//輸出:a b

let=;

console.

log(id, name)

;//輸出:10086 "張三"

let=

; console.

log(***)

;//輸出:undefined

let=

console.

log(num, nickname)

;//輸出:10086 "小李"

//以下兩種寫法中,第二種相當於第一種的縮寫

let=

; console.

log(a, b)

;//輸出:1 2

let=

; console.

log(a, b)

;//輸出:1 2

let

= console.

log(id,name,hobby)

;//輸出:10086 "等等" [1, 2, 3]

let=

; is not defined

console.

log(b, c, d)

;let=;

console.

log(a)

;//輸出:1

let=

; console.

log(b)

;//輸出:1

let=

; console.

log(a, b)

;//輸出:1 1

let=

; console.

log(a, x, y, z)

;//輸出:array[3] 1 2 3

let=;

console.

log(a, b)

;//輸出:1 2

var=

; console.

log(x)

;//輸出:null,因為null與undefined不嚴格相等,所以是個有效的賦值,導致預設值3不會生效

let=

; console.

log(a, b)

;//輸出:1 2

=)

; console.

log(x)

;//輸出:1

}

let str =

newstring

('abcdef');

console.

log(str)

;let

='abcdef'

; console.

log(length)

;let

[a, b, c, d, e, f]

='abcdef'

; console.

log(a, b, c, d, e, f)

;//輸出:a b c d e f

let=

'abcdef'

; console.

log(a, b, c, d, e, f)

;//輸出:undefined undefined undefined undefined undefined undefined

//字串解構預設轉化為類陣列

let=

true

; console.

log(s)

; console.

log(number.prototype.tostring == s)

; console.

log(boolean.prototype.tostring == s)

;

function

method

([a, b,

...c]

)method([

1,2,

3,4,

5,6]

);//輸出:1 2 array[4][[

1,2]

,[3,

4]].

map(

function

([a, b]

, index)

);

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用來表示尚未存在的物件,常用來表示函式企圖返回乙個不存在的...