ES6 解構賦值與展開語法

2021-10-07 12:26:03 字數 1682 閱讀 9796

將 屬性/值 從 物件/陣列 中取出賦值給其他變數

語法:要從原變數中取出的變數 = 原變數

陣列解構

var

[ one, two, three ]=[

1,2,

3]console.

log(one, two, three)

// 1 2 3

物件解構
const c1 =

var= c1

console.

log(name, gender, age)

// tom 男 20

巢狀物件陣列解構
const c2 =,]

}var,]

}= c2

console.

log(name, mathscore, engscore)

//tom 90 80

1.交換變數
var x =

1var y =

2var

[x, y]

=[y, x]

console.

log(x, y)

// 2 1

2. 獲取指定值
var

[a, b]=[

1,2,

3,4]

console.

log(a, b)

// 1 2

var[name, gender]=[

'tom'

,'男',20

]console.

log(name, gender)

// tom 男

獲取指定外的值—剩餘模式
var

[a,...b]=[

1,2,

3,4]

console.

log(b)

// [ 2, 3, 4 ]

1.函式呼叫
function

fun1

(x, y)

var arr1 =[1

,2]fun1

(...arr1)

// 1 2

2.構造、拷貝、連線陣列
var arr2 =[3

,4]var newarr1 =[3

,...arr2]

// 陣列構造

var newarr2 =

[...arr2]

// 陣列拷貝

var newarr3 =

[...arr1,

...arr2]

// 陣列連線

console.

log(newarr1)

// [ 3, 3, 4 ]

console.

log(newarr2)

// [ 3, 4 ]

console.

log(newarr3)

// [ 1, 2, 3, 4 ]

3.拷貝、合併物件
var obj1 =

var obj2 =

var obj3 =

var obj4 =

console.

log(obj3)

// console.

log(obj4)

//

ES6語法 解構賦值

按照一定的模式,從陣列和物件中提取值,對變數進行賦值,就被稱為解構。目的是為了提高效率,使用起來更加方便。以下的各個說明,我會模擬著es5去解釋,希望能幫到小夥伴們。陣列解構 正常解構 es5 var arr 1,2,3 var a arr 2 console.log a 3 es6 let a,b...

ES6新語法 解構賦值

物件解構賦值 很重要 物件解構賦值 獲取元素中屬性的值,然後賦值給變數 宣告乙個物件 let obj es5中 let name1 obj.name let age1 obj.age let gender1 obj.gender let score1 obj.score console.log na...

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