ES6中解構賦值

2021-10-12 05:11:16 字數 2820 閱讀 4765

理解:

解構賦值就是從目標物件或陣列中提取自己想要的變數。最常用的場景是:element-ui 或 vant-ui 按需引入,請求介面返回想要的資料。

// 陣列解構   乙個蘿蔔乙個坑,按照順序進行

var a, b, c

// [12, 13] = [a, b] // 這個寫法報錯:invalid destructuring assignment target(無效的解構分配目標)

[a, b]=[

12,13]

console.

log(a)

// 12

console.

log(b)

// 13

console.

log(c)

// undefined

// 物件解構 沒有固定順序,按照變數名進行匹配

var a, b, c

// ( = ) // 這個寫法報錯:invalid destructuring assignment target(無效的解構分配目標)(=

) console.

log(a)

// 12

console.

log(b)

// 13

console.

log(c)

// undefined

// ...解構陣列 ...必須是最後一項

// [11, 12, 1314, 15, 16] = [a, b, ...c] // 這個寫法報錯:invalid destructuring assignment target(無效的解構分配目標)

[a, b,

...c]=[

11,12,

1314,15

,16] console.

log(a)

// 11

console.

log(b)

// 12

console.

log(c)

// [1314, 15, 16]

// ...物件解構 ...必須是最後一項

// ( = ) // 這個寫法報錯:invalid destructuring assignment target(無效的解構分配目標)(=

) console.

log(a)

// 11

console.

log(b)

// 12

console.

log(c)

// // 函式中解構 物件和陣列方法同上

functionfn(

)// fn() = [a, b] //這個寫法報錯:invalid left-hand side in assignment(賦值時左手邊無效)

[a, b]=fn

()console.

log(a)

//11

console.

log(b)

//22

應用場景

預設值寫法

// 預設值

[a =

5, b =7]

=[1]

;// ( = ) // 這個寫法報錯:invalid destructuring assignment target(無效的解構分配目標)

console.

log(a)

;// 1

console.

log(b)

;// 7

交換變數

var a =1;

var b =3;

[a, b]

=[b, a]

;// ( = ) // 這個寫法報錯:invalid destructuring assignment target(無效的解構分配目標)

console.

log(a)

;// 3

console.

log(b)

;// 1

忽略不想要的

functionf(

)var

[a,, b]=f

();console.

log(a)

;// 1

console.

log(b)

;// 3

將剩餘陣列賦值給乙個變數

var

[a,...b]=[

1,2,

3];console.

log(a)

;// 1

console.

log(b)

;// [2, 3]

給新的變數名賦值

var o =

;var

= o;

console.

log(foo)

;// 42

console.

log(bar)

;// true

for of 迭代解構

var people =[,

age:35}

,,age:25}

];for(

var}

of people)

// "我的name: mike smith, 我的father: harry smith"

// "我的name: tom jones, 我的father: richard jones"

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