ES6的解構賦值

所謂的解構賦值，就是按照一定的模式，從陣列或者物件等可遍歷的物件中提取出值，然後對變數進行賦值。for example

let
[x,y,z]=[
1,2,
3];console.
log(x)
;//1
console.
log(y)
;//2
console.
log(z)
;//3

上面的**就是乙個典型的解構賦值的應用，從陣列中提取值，並把值賦給對應位置的變數。這種寫法就是模式匹配，不單只可以這樣簡單的匹配，多維陣列也可以被識別解構。

let
[x,[
[y],z]]=
[1,[
[2],
3]];
console.
log(x)
;//1
console.
log(y)
;//2
console.
log(z)
;//3

上面寫的都是等號左邊的每個位置都有對應的變數，其實也不一定要這樣寫，例如下面

let[,
, x]=[
1,2,
3];console.
log(x)
;//3

還可以使用...修飾符來將陣列中未被，後面也不會被分配的值賦給變數（以陣列的形式），若沒有未被分配的值則賦為空陣列。

let
[x,...y]=[
1,2,
3,4,
5,6]
;console.
log(x)
;//1
console.
log(y)
;//[2,3,4,5,6]
let[a,
...b]=[
1];console.
log(a)
;//1
console.
log(b)
;//

還有一種情況稱為不完全解構，就是說等號的左邊變數的個數與右邊陣列的長度不一致。在這種情況下，解構依然是可以正確完成的。

let
[x,y]=[
1,2,
3];console.
log(x)
;//1
console.
log(y)
;//2
let[a,
[b],c]=[
1,[2
,3],
4];console.
log(a)
;//1
console.
log(b)
;//2
console.
log(c)
;//4

解構賦值還可以指定預設值，不過預設值僅當陣列對應位置的值使用嚴格相等運算子判斷為undefined之後才會生效。

let
[x='a']=
['b'];
console.
log(x)
;//'b'
let[y=
'b']
=[undefined]
;console.
log(y)
;//'b'

這個預設值還可以是乙個函式。

function
foo(
)let
[z=foo()
]=[undefined]
;//'hello world'
console.
log(z)
;//'c'

與陣列類似，物件的解構賦值就是把物件中的屬性賦給具有與屬性名相同變數名的變數。例如：

let=;
console.
log(x)
;//1
console.
log(y)
;//2
let=
;console.
log(z)
;//undefined

上面**中具有與物件屬性名一致變數名的變數x,y被成功賦值，而z與a顯然不同，所以z是undefined。

那如果我的變數名就是想與屬性名不同怎麼辦呢？可以像下面這樣寫

let=;
console.
log(z)
;//3

實際上這說明了，解構的時候是先找同名的屬性，然後再賦給對應的變數，也就是說真正被賦值的是屬性對應的變數，而不是屬性本身。之前上面的解構過程可以寫成下面的樣子

let=;
console.
log(x)
;//1
console.
log(y)
;//2

與陣列解構賦值類似，物件的解構賦值也是可以指定預設值的。

let
=console.
log(x)
;//3

同樣的，物件解構賦值也可使用函式。

function
foo(
)let=;
console.
log(x)
;//a

是的，字串也是可以結構賦值的，因為這個時候，字串被轉換成了類似陣列的結構。

let
[x,y,z]
='abc'
;console.
log(x)
;//a
console.
log(y)
;//b
console.
log(z)
;//c

字串本身也可看作是乙個物件，可以對它進行解構。

let
='abc'
;console.
log(length)
;//3

函式引數的解構賦值與前面陣列或物件的解構賦值相似。例如：

function
multiply
([x, y]
)console.
log(
multiply([
2,4]
));//8

上面**中，我給multiply函式傳入的引數是[2, 4]，但是進入函式內就被解構成x=2, y=4。

同樣的，物件解構賦值也可以使用。

ES6 解構賦值

陣列的解構賦值 let a,b 12,13 let a,b,c d 13,15,16 let a,b c 78,12 23 let x,y 1,3,5 x 1,y 3 let x,y,z a x a,y undefined z let h,b 1,2,3,4 1,2,3,4 預設值 let x tr...

ES6解構賦值

一基本用法解構 destructuring 按照一定的模式，從陣列或者物件中提取值，對變數進行賦值。let par1,par2,par3 1,2 console.log par1,par2,par3 1 2 不完全解構時par3對值為undefined 解構賦值允許指定變數對預設值。let pa...

es6解構賦值

coding changes the world accumulating makes yourself 主要從三個方面講述陣列式的解構賦值物件式的解構賦值函式中的解構賦值 preface 現今的變數宣告語法十分的直接左邊是乙個變數名，右邊可以是乙個陣列的表示式或乙個物件的表示式，等等。...

ES6的解構賦值

ES6 解構賦值

ES6解構賦值

es6解構賦值

相關推薦