解構賦值的定義
簡單來說,解構賦值就是按照一定的格式,從陣列和物件中取值,賦給變數。
與之前只能直接指定變數值的方式相比,解構賦值的出現,讓同時為多個變數複製提供了方法。
解構賦值的格式
上面的**即是從陣列中取值,為對應的變數賦值。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
即是說,等號左邊的模式只匹配部分等號右邊的陣列,但在這種情況下,解構依舊會成功。
此時,只有a和b得到了解構賦值,變數c並沒有對應的值,即是解構不完全。let
[a,b,c]=[
1,2]
a // 1
b // 2
當解構不成功時,變數值為undefined,如:
所以,沒有對應的值能夠賦給變數時,則其值會顯示為undefined,則c解構不成功let
[a,b,c]=[
1,2]
//注意,此處為演示,在es6中變數名不能重複宣告
a // 1
b // 2
c // undefined
相當於只宣告了變數c,並未給它賦值。
預設值的設定
在解構過程中,可以給變數提前賦予預設值,例如:
由上可見,c解構不成功,但因為提前給c賦予了預設值,所以它的值也不是undefined, 而是3。let
[a,b,c=3]
=[1,
2]a // 1
b // 2
c // 3
預設值也可以在解構時進行覆蓋
這個時候預設值3會被新的值6覆蓋,c的值為6;注意:當新的值為undefined的時候,是不會覆蓋預設值的。let
[a,b,c=3]
=[1,
2,6]
a // 1
b // 2
c // 6
物件的解構
物件的解構賦值跟陣列的解構賦值很類似:
但與陣列遍歷不同的是,這裡物件中的值的順序,並不會影響賦值的正確性。它是跟屬性名關聯起來的,變數名要和屬性名一致,才會成功賦值。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 現今的變數宣告語法十分的直接 左邊是乙個變數名,右邊可以是乙個陣列 的表示式或乙個物件 的表示式,等等。...