ECMAScript 6 的解構賦值是怎麼回事

2021-10-09 12:33:27 字數 3254 閱讀 6420

學習解構賦值的時候,我想到了以前的一道題:

a,b 兩個變數,不用第三個變數來切換兩個變數的值

var a =10,

b =20;

a =; b = a.a;

a = a.b;

console.

log(a)

//20

console.

log(b)

//10

var a =10,

b =20;

a =[a,b]

b = a[0]

; a = a[1]

; console.

log(a)

//20

console.

log(b)

//10

也有奇淫技巧

var a =10,

b =20;

a=[b,b=a][0

];console.

log(a)

//20

console.

log(b)

//10

今天學到了解構賦值,那方法就更簡單清晰了

var a=10;

var b=20;

[a,b]

=[b,a]

; console.

log(a)

//20

console.

log(b)

//10

怎麼樣,是不是很神奇?

什麼是解構賦值?

以前我們賦值變數是這樣子的:

var foo1 =1;

var foo2 =2;

var foo3 =3;

console.

log(foo1)

;//1

console.

log(foo2)

;//2

console.

log(foo3)

;//3

在es6中我們可以這樣:

var

[foo1,foo2,foo3]=[

1,2,

3]console.

log(foo1)

;//1

console.

log(foo2)

;//2

console.

log(foo3)

;//3

注意:左右兩邊格式一定要一樣

那如果我只想賦值一部分變數呢?

var[,

,foo3]=[

1,2,

3]console.

log(foo3)

;//3

var

[,foo2,]=

[1,2

,3]console.

log(foo2)

;//2

如果相對應的位置沒有值,比如說這樣:

var

[foo1,foo2,foo3]=[

1,2]

console.

log(foo1)

;//1

console.

log(foo2)

;//2

console.

log(foo3)

;//undefined

var

[foo1,foo2]=[

1,2,

3]console.

log(foo1)

;//1

console.

log(foo2)

;//2

支援 rest引數,也就是剩餘引數. 符號為 …:

var

[foo1,

...foo2]=[

1,2,

3,4,

5]console.

log(foo1)

;//1

console.

log(foo2)

;//[2,3,4,5]

注意: 如果在rest引數的後面再寫乙個引數是會報錯的:

var

[foo1,

...foo2,foo3]=[

1,2,

3,4,

5]//報錯

物件的解構賦值與陣列結構賦值非常相似

以前我們取物件屬性下的值是這樣子的:

var obj=

var foo1=obj.foo1;

//1var foo2=obj.foo2;

//2var foo3=obj.foo3;

//3

解構賦值:

var obj=

var=obj;

console.

log(foo1)

;//1

console.

log(foo2)

;//2

console.

log(foo3)

;//3

只要在左邊寫上相對應的屬性名稱,就可以賦值給乙個與屬性名相同的變數;

如果變數名不想取乙個跟屬性名一樣的,該怎麼辦?

var obj=

var=obj;

console.

log(bar1)

;//1

console.

log(bar2)

;//2

console.

log(bar3)

;//3

如果沒有相對應的屬性名,也會是undefined

var obj=

var=obj;

console.

log(foo1)

;//1

console.

log(foo2)

;//undefined

ECMAScript6 常用解構賦值

一 解構賦值按照一定模式,從陣列和物件中提取值,對變數進行賦值 1.陣列解構let arr 1 2,3 現在要求取出陣列的每一項 傳統的方式 let a arr 0 let b arr 1 let c arr 2 console.log a,b,c 1,2,3 在es6中提供了解構的語法 可以得到陣...

ECMA Script 6 變數的解構賦值

1 陣列的結構和賦值 es6 允許按照一定模式,從陣列和物件中提取值,對變數進行賦值,這被稱為解構 2 物件等可以這麼賦值 3 函式引數的解構賦值 function add x,y add 1,2 3 基本用途 交換變數 a,b b,a 函式返回多個值 類似於陣列 返回乙個陣列 function e...

ECMAScript 6 陣列的解構賦值

模式匹配 只要等號兩邊的模式相同,左邊的變數就會被賦予對應的值。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 third baz let x,y 1,2,3 x 1 y 3...