ES6中解構賦值的使用講解

這篇文章帶給大家的內容是關於ES6中解構賦值的使用講解，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

概述

實不相瞞，解構賦值非常叼，特別是和其他es6一起使用的時候，那如何簡單的說解構賦值呢，打個比方：解構賦值就是一個硬幣分割機，將所有的一毛、五毛、一塊硬幣投入硬幣分割機，他就自動將所有的硬幣分好了，拿出你要的就行了！

解構數組

可以從一個陣列從取出你想要的一個資料或是一組資料

普通

let [a, b, c]=[1,2,3]
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3

和剩餘參數一起用

let [a, b, ...c]=[1,2,3,4,5]
console.log(a) // 1
console.log(b) // 2
console.log(c) // [3,4,5]

省略一些參數

let [a, , ...c]=[1,2,3,4,5]
console.log(a) // 1
console.log(c) // [3,4,5]

參數不夠

let [a, b, c]=[1,2]
console.log(a) // 1
console.log(b) // 2
console.log(c) // undefined

參數不夠又不想要undefined，可以使用預設參數

let [a, b, c=3]=[1,2]
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3

對已有變數解構賦值

let a, b
[a, b]=[1,2]
console.log(a, b)// 1,2

有趣的陣列解構栗子

交換兩個變數

let a=1,b=2
[a, b]=[b, a]
console.log(a) // 2
console.log(b) // 1

取得一個正規匹配的結果

let [,match]="hello world".match(/h(e)/) 
// 匹配的结果是 ["he", "e", index: 0, input: "hello world", groups: undefined]

console.log(match) // 'e'

#解構物件

可以從物件中取出物件的一個屬性值，或一個子物件

普通

let {a, b}={a:1,b:2}
console.log(a) // 1
console.log(b) // 2

剩餘屬性

let {a,...b}={a:1,b:2,c:3}
console.log(a) // 1
console.log(b) // {b:2,c:3}

屬性不夠

let {a, b, c}={a:1,b:2}
console.log(a) // 1
console.log(b) // 2
console.log(c) // undefined

屬性不夠可以使用預設參數

let {a, b, c=3}={a:1,b:2}
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3

給新的變數賦值

let {a:aa, b:bb}={a:1,b:2}
console.log(aa) // 1
console.log(bb) // 2

給新的變數賦值並提供預設值

let {a:aa, b:bb, c:cc=3}={a:1,b:2}
console.log(aa) // 1
console.log(bb) // 2
console.log(cc) // 3

很深的物件也可以解構

let {name, books:[book]}={name:"haha",books:['book1']}
console.log(name) // 'haha'
console.log(book) // 'book1'

迭代中的解構

for(let {name} of [{name:1},{name:2}]){
    console.log(name) // 1 2
}

解構函數形參

let register({name, pwd}){
    console.log(name, pwd)
}
register({name:'1',pwd:'2'}) //1,2

給已有變數賦值，比較特殊

let a,b
({a, b}={a:1,b:2}) // 需要提升优先级，否则 {a, b} 会被解析成代码块
console.log(a, b)// 1, 2

以上是ES6中解構賦值的使用講解的詳細內容。更多資訊請關注PHP中文網其他相關文章！