一、陣列的解構賦值
let
[a,b,c]=[
1,2,
3];// 1: 取出值並賦給相應的變數,這就是解構賦值
console.
log(a,b,c)
;// 1,2,3
// 2: 巢狀多層,只要相對應的結構匹配就能解析出來
let[a,
[b,[c]]]
=[1,
[2,[
3]]]
a // 1
b // 2
c // 3
// 3: 結構不成功,但模式匹配了,相對應為undefined
let[a,b]=[
1];a // 1
b // undefined
// 4: 不需要匹配的位置,可以以逗號分割置空
let[
,b]=[1
,2]b // 2
// 5: 使用...擴充套件運算子,匹配餘下的所有值,形成乙個資料(匹配不上的則為),該方法內部也使用了迭代器 iterator
let[a,
...b]=[
1,2,
3];a // 1
b // [2,3]
let[a,
...b]=[
1];a // 1
b //
// 6: 可以設定預設值,當相應的值嚴格等於undefined時,預設值會生效
let[a,b =[2
,3]]
=[1]
;a // 1
b // [2,3]
let[a,b =[2
,3]]
=[1,undefined]
;a // 1
b// [2,3]
let[a,b =[1
,2]]
=[1,
null];
a // 1
b // null
// 7: 惰性求職,對於預設值出現函式呼叫模式的,只有預設值生效,函式才會呼叫,如下,foo函式將不會被呼叫
funciton foo()
let[str =
foo()]
=[1]
;str // 1
// 8: 可以方便的進行變數值的交換
let x =
1, y =2;
[x,y]
=[y,x]
x // 2
y // 1
二、物件的解構賦值
// 與陣列類似,物件也可以進行結構賦值
let=
name // ws
age // 1
// 如上,物件的結構賦值要求屬性名稱匹配正確,age不匹配則變成undefined
// 1: 不過我們可以自定義屬性名稱,但是要注意被複製的只是我們定義的屬性名稱,匹配的模式(項)並未賦值
let=
id// 1
id // uncaught referenceerror: id is not defined
// 更複雜的如
let}}=
}};a0 // uncaught referenceerror: a0 is not defined
b0 // uncaught referenceerror: b0 is not defined
c0 // cc
// 2: 類似於陣列,也可使用預設值
let=
;b // 2
let=
b // 1
// 3: 因為資料實際上也是物件,所以
let=[1
,2] one // 1
two // 2
// 4: 可以方便地將某個物件上的屬性一次性提取出來
let= array.prototype;
map // ƒ map()
// 5: 非宣告時的解構賦值
let a;=;
// uncaught syntaxerror: unexpected token =
// 以上**報錯了,但某些情況下我們還是需要直接賦值怎麼辦?大括號之後js引擎就會認為是乙個**塊,所以等號就出問題了,解決方式是在行首放個括號(,即外包裹一層括號()
var a;(=
); a // 1
// 括號的出現,讓整個解構賦值的結構被看做乙個**塊,而內部的模式則可以正常匹配到
// 6. 其實,解構賦值中括號的使用還是有講究的
// 1) 不能使用括號的情況
// 1-1)變數宣告語句中,不能帶有括號
/ 以下**都會報錯
var[(a)]=
[1];
var=
;var()
=;var=
;var=;
var)}=
};// 1-2)函式引數中,模式不能帶有括號
// 報錯
functionf(
[(z)])
f([1
])// 1-3)賦值語句中,不能將整個模式,或巢狀模式中的一層,放在括號之中
var a;()
=;// uncaught syntaxerror: unexpected token (
a
三、字串的解構賦值
// 字串也可進行解構賦值,因為此時的字串被轉換成了類陣列的物件,模式能夠匹配起來,如
var[a, b]
='str'
; a // s
b // t
var=
'str'
; a // s
b // t
len // 3
四、其他型別的解構賦值
解構賦值的規則是,只要等號右邊的值不是物件,就先嘗試將其轉為物件。如果轉換之後的物件或原物件擁有iterator介面,則可以進行解構賦值,否則會報錯。
var=1
;s //
var=
true
;s //
以上的陣列和布林值會轉換成物件,tostring模式匹配上了物件的tostring屬性,所以解構成功,而null或undefined卻不能轉換成此類物件,所以報錯
var
=null
;s // uncaught typeerror: cannot match against 'undefined' or 'null'.
es6引入了iterator迭代器,集合set或generator生成器函式等都部署了這個iterator介面,所以也可以用來進行解構賦值
比如set的解構賦值
var
[a, b, c]
=new
set([1
,2,3
]);a // 1
b // 2
c // 3
函式引數的解構賦值
function
calc
([a, b, c =10]
)calc([
1,2]
);
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 現今的變數宣告語法十分的直接 左邊是乙個變數名,右邊可以是乙個陣列 的表示式或乙個物件 的表示式,等等。...