ES6解構賦值

解構賦值的定義

簡單來說，解構賦值就是按照一定的格式，從陣列和物件中取值，賦給變數。

與之前只能直接指定變數值的方式相比，解構賦值的出現，讓同時為多個變數複製提供了方法。

解構賦值的格式

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

上面的**即是從陣列中取值，為對應的變數賦值。

該方法屬於「模式匹配」，只要等號兩邊模式相同，就可取出對應的值賦值給變數。而且請注意，陣列是可以進行巢狀的。例如：

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

不完全解構和解構不成功

即是說，等號左邊的模式只匹配部分等號右邊的陣列，但在這種情況下，解構依舊會成功。

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

此時，只有a和b得到了解構賦值，變數c並沒有對應的值，即是解構不完全。

當解構不成功時，變數值為undefined,如：

let
[a,b,c]=[
1,2]
//注意，此處為演示，在es6中變數名不能重複宣告
a // 1
b // 2
c // undefined

所以，沒有對應的值能夠賦給變數時，則其值會顯示為undefined，則c解構不成功

相當於只宣告了變數c,並未給它賦值。

預設值的設定

在解構過程中，可以給變數提前賦予預設值，例如：

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

由上可見，c解構不成功，但因為提前給c賦予了預設值，所以它的值也不是undefined, 而是3。

預設值也可以在解構時進行覆蓋

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

這個時候預設值3會被新的值6覆蓋，c的值為6；注意：當新的值為undefined的時候，是不會覆蓋預設值的。

物件的解構

物件的解構賦值跟陣列的解構賦值很類似：

let=;
console.
log(a)
;// a的值為1    
console.
log(b)
;// b的值為2
console.
log(c)
;// c的值為3

但與陣列遍歷不同的是，這裡物件中的值的順序，並不會影響賦值的正確性。它是跟屬性名關聯起來的，變數名要和屬性名一致，才會成功賦值。

let=;
console.
log(a)
;// a的值為undefined

當你想要在變數名和屬性名不一致的時候進行賦值，則需要對變數名再做一次關聯

let=;
console.
log(a)
;// a的值為2

而字串也可以進行解構賦值的操作：

let
[a,b,c,d,e,f]
="今晚夜色真美"
;    console.
log(a)
;// 今
console.
log(b)
;// 晚
console.
log(c)
;// 夜
console.
log(d)
;// 色
console.
log(e)
;// 真
console.
log(f)
;// 美

即是對應字串的位置進行賦值。

交換變數的值

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

提取函式返回的多個值

function
boy()}
let=
boy();
console.
log(name)
;// 阿左
console.
log(age)
;// 24

定義函式引數

function
message()
message()
;

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解構賦值

相關推薦