這篇文章將為大家詳細(xì)講解有關(guān)ES6中解構(gòu)賦值的使用案例，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

讓客戶(hù)滿(mǎn)意是我們工作的目標(biāo)，不斷超越客戶(hù)的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶(hù)，將通過(guò)不懈努力成為客戶(hù)在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：申請(qǐng)域名、雅安服務(wù)器托管、營(yíng)銷(xiāo)軟件、網(wǎng)站建設(shè)、西固網(wǎng)站維護(hù)、網(wǎng)站推廣。

實(shí)不相瞞，解構(gòu)賦值非常叼，特別是和其他es6一起使用的時(shí)候，那如何簡(jiǎn)單的說(shuō)解構(gòu)賦值呢，打個(gè)比方：解構(gòu)賦值就是一個(gè)硬幣拆分機(jī)，將所有的一毛、五毛、一塊硬幣投入硬幣拆分機(jī)，他就自動(dòng)將所有的硬幣分好了，拿出你要的就行了！

解構(gòu)數(shù)組

可以從一個(gè)數(shù)組從取出你想要的一個(gè)數(shù)據(jù)或者一組數(shù)據(jù)

普通

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

和剩余參數(shù)一起用

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

省略一些參數(shù)

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

參數(shù)不夠

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

參數(shù)不夠又不想要undefined，可以使用默認(rèn)參數(shù)

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

對(duì)已有變量解構(gòu)賦值

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

有趣的數(shù)組解構(gòu)栗子

交換兩個(gè)變量

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

獲取一個(gè)正則匹配的結(jié)果

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

console.log(match) // 'e'

解構(gòu)對(duì)象

可以從對(duì)象中取出對(duì)象的一個(gè)屬性值，或者一個(gè)子對(duì)象

普通

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

屬性不夠可以使用默認(rèn)參數(shù)

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

給新的變量賦值并提供默認(rèn)值

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

很深的對(duì)象也可以解構(gòu)

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

迭代中的解構(gòu)

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

解構(gòu)函數(shù)形參

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

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

let a,b
({a, b}={a:1,b:2}) // 需要提升優(yōu)先級(jí)，否則 {a, b} 會(huì)被解析成代碼塊
console.log(a, b)// 1, 2

關(guān)于ES6中解構(gòu)賦值的使用案例就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

網(wǎng)頁(yè)題目：ES6中解構(gòu)賦值的使用案例-創(chuàng)新互聯(lián)
本文地址：http://weahome.cn/article/ddshgj.html