ES6 解構賦值

2021-10-20 04:27:23 字數 3682 閱讀 7678

一、陣列的解構賦值

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 現今的變數宣告語法十分的直接 左邊是乙個變數名,右邊可以是乙個陣列 的表示式或乙個物件 的表示式,等等。...