ECMAScript6 常用解構賦值

2021-10-24 16:13:36 字數 2561 閱讀 7294

一、解構賦值

按照一定模式,從陣列和物件中提取值,對變數進行賦值

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中提供了解構的語法 可以得到陣列中的某一項

let[a, b, c]=[

1,2,

3]console.

log(a, b, c)

// 1, 2, 3

// 注意:結構賦值就是將陣列中的某一項按照指定的順序結構賦值給左邊的變數 等於號的左右兩邊都應該是乙個陣列才可以 兩邊的值都應該一一對應

let[a, b, c]=[

1,3,

[3,4

]]// 通過解構賦值的一一對應的原則

console.

log(1,

3,[3

,4])

let[a, b, c, d]=[

1,2,

[3,4

]]// 通過解構賦值的一一對應結果

console.

log(a, b, c, d)

// 1 2 [3, 4] undefined

// 通過在解構的時候設定預設的初始值

let[a, b, c, d =5]

=[1,

2,[3

,4]]

console.

log(a, b, c, d)

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

// 注意:解構賦值是一種惰性的,如果有傳值,就以傳遞的值為準;如果沒有就是用預設值,如果連預設值都沒有那就是undefined

// 將陣列全部展開

let[a, b,

...c]=[

1,2,

[3,4

]]// 注意 這裡的c輸出的值為[3, 4],通過擴充套件運算子的形式即可展開陣列

2. 物件解構
let user =

// 傳統獲取 name 和 age 的方式

let name = user.name

let age = user.age

console.

log(name, age)

// zhangsan 18

// es6 中結構賦值的方式

let= user

console.

log(name, age)

// zhangsan 18

// 即使解構時順序的調換也沒有關係

let= user

console.

log(age, name)

// 18, zhangsan

// 解構時不想使用原來的屬性名稱 可以使用:*** 取別名

let= user

console.

log(age, name)

// 報錯

console.

log(age, user_name)

// 18, zhangsan

3. 字串解構
// 獲取字串中的每乙個字元

let str =

'zhangsan'

// 傳統的方式

for(

let i =

0; i < str.length; i++

)// es6 中對字元的解構就如同對陣列的解構 兩種解構的方式是一樣的

let[a, b, c, d, e]

= str

console.

log(a, b, c, d, e)

// z h a n g

5. 應用
// 預設賦值

// 物件的預設賦值

let=

console.

log(name, age)

// 正常情況下輸出 zhangsan 34 當 賦值沒有age屬性的時候,會使用age=18這個預設值作為輸出

// 預設值是乙個方法

function

foo(

)let

[a =

foo()]

=[1]

// 形參解構

function

foo(

[a, b, c]

)let arr =[1

,2,3

]foo

(arr)

// 物件解構,預設值

function

foo(

)let obj =

foo(obj)

// 返回物件解構

function

foo(

)return obj

}let

=foo()

console.

log(name, age)

ECMA Script 6 變數的解構賦值

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

ECMA Script 6 解構賦值 模式匹配

解構賦值 從陣列中提取值,按照對應位置,對變數賦值 只要等號右邊的值不是物件或陣列,就先將其轉為物件。由於 undefined 和 null 無法轉為物件,所以對它們進行解構賦值,都會報錯 let a,b,c 1,2,3 只要某種資料結構具有 iterator 介面,都可以採用陣列形式的解構賦值 應...

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...