?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-600221.html
目錄
?1.對(duì)象解構(gòu)
2.對(duì)象解構(gòu)的細(xì)節(jié)處理
2.1.解構(gòu)的值對(duì)象中不存在時(shí)
2.2.給予解構(gòu)值默認(rèn)參數(shù)?
?2.3.非同名屬性解構(gòu)
3.數(shù)組解構(gòu)
3.1基礎(chǔ)解構(gòu)語(yǔ)法
3.2數(shù)組嵌套解構(gòu)
4.函數(shù)解構(gòu)傳參
5.解構(gòu)小練習(xí)
在ES6的新語(yǔ)法中新增了解構(gòu)的方法，它可以讓我們很方便的從數(shù)組或者對(duì)象身上取數(shù)據(jù)，簡(jiǎn)化了大量重復(fù)的代碼，讓我們的代碼更具可讀性和維護(hù)性。
?1.對(duì)象解構(gòu)
在沒(méi)有對(duì)象解構(gòu)的時(shí)期，我們?nèi)绻肽玫綄?duì)象身上的數(shù)據(jù)，就要通過(guò)類似于：user.name，這樣的語(yǔ)法來(lái)獲取數(shù)據(jù)，如果只是單層解構(gòu)的對(duì)象還好，如果對(duì)象嵌套的解構(gòu)很深，就會(huì)變的非常麻煩，我們的代碼也會(huì)變得非常的贅余，很影響可讀性，所以解構(gòu)語(yǔ)法就應(yīng)運(yùn)而生了。
看下面的代碼，在ES6之前我們?nèi)?duì)象的值必須要這樣
let user = {
name: 'zs',
age: 16,
sex: '男',
address: {
pro: '湖南',
city: '長(zhǎng)沙'
}
}
//傳統(tǒng)的獲取值
let name = user.name
let age = user.age
let sex = user.sex
let pro = user.address.pro
let city = user.address.city
?有了對(duì)象解構(gòu)后我們的語(yǔ)法就會(huì)變得非常的簡(jiǎn)短，但功能完全沒(méi)變
//對(duì)象解構(gòu)語(yǔ)法
let {name,age,sex,address: { pro, city }} = user很直觀的就可以看到代碼變得非常的簡(jiǎn)短，讓人非常的舒適
2.對(duì)象解構(gòu)的細(xì)節(jié)處理
2.1.解構(gòu)的值對(duì)象中不存在時(shí)
當(dāng)我們解構(gòu)的值是對(duì)象中不存在的值時(shí)
let user = {
name: 'zs',
age: 16,
sex: '男',
address: {
pro: '湖南',
city: '長(zhǎng)沙'
}
}
//對(duì)象解構(gòu)語(yǔ)法
let { name, age, gender, address:{ pro,city} } = user
console.log(name, age, gender, pro,city)
?
比如我們解構(gòu)了一個(gè)：gender，但是對(duì)象中并不存在這個(gè)值，此時(shí)該值是：undefined，因?yàn)檫@里要知道的是我們的這一行代碼其實(shí)是定義：let { name, age, gender, address:{ pro,city} }，當(dāng)你定義的時(shí)候本身就是沒(méi)有值的，所以就是undefined
2.2.給予解構(gòu)值默認(rèn)參數(shù)?
前面解構(gòu)不存在的值是未定義，那如果要給默認(rèn)值，我們只要給它賦值即可，這就是給與默認(rèn)值
//對(duì)象解構(gòu)語(yǔ)法
let { name, age, gender="女", address:{ pro,city} } = user
console.log(name, age, gender, pro,city)?
?2.3.非同名屬性解構(gòu)
這種情況就是當(dāng)我們解構(gòu)的值定義的變量名與對(duì)象中的不一樣時(shí)，可以用這種語(yǔ)法：sex:gender,這樣解構(gòu)的值就賦值到gender身上了
let user = {
name: 'zs',
age: 16,
sex: '男',
address: {
pro: '湖南',
city: '長(zhǎng)沙'
}
}
//對(duì)象解構(gòu)語(yǔ)法
let { name, age, sex:gender, address:{ pro,city} } = user
console.log(name, age, gender, pro,city)
3.數(shù)組解構(gòu)
其實(shí)數(shù)組的解構(gòu)與對(duì)象的解構(gòu)差別不大，在解構(gòu)數(shù)組時(shí)就可以將數(shù)組也看成一個(gè)對(duì)象
3.1基礎(chǔ)解構(gòu)語(yǔ)法
這是可以根據(jù)索引來(lái)解構(gòu)的方法
//數(shù)組解構(gòu)
let arr = ['a', 'b', 'c', 'd']
let { 0: n1, 1: n2 } = arr
console.log(n1, n2) // a b
let { 2: n3, 3: n4 } = arr
console.log(n3, n4) // c d
?也可以這樣子解構(gòu)
//數(shù)組解構(gòu)
let arr = ['a', 'b', 'c', 'd']
let [n1, n2] = arr
console.log(n1, n2) // a b
let [, , n3, n4] = arr
console.log(n3, n4) // c d當(dāng)然數(shù)組結(jié)構(gòu)也是可以攜帶默認(rèn)值的，和對(duì)象解構(gòu)類似，直接賦值即可
3.2數(shù)組嵌套解構(gòu)
//數(shù)組嵌套解構(gòu)
let arr = ['a', 'b', 'c', 'd', [1, 2, 3, 4]]
let [, , , , newArr] = arr
console.log(newArr) // [1,2,3,4]
//獲取第五項(xiàng)中的某一個(gè)值
let [, , , , [, , n3]] = arr
console.log(n3) // 3
4.函數(shù)解構(gòu)傳參
這是我們平常傳入一個(gè)對(duì)象參數(shù)，在函數(shù)中要使用的場(chǎng)景
//函數(shù)解構(gòu)傳參
let user = {
name: 'zs',
age: 16,
sex: '男',
address: {
pro: '湖南',
city: '長(zhǎng)沙'
}
}
function print(user) {
console.log(`name:${user.name}`)
console.log(`age:${user.age}`)
console.log(`sex:${user.sex}`)
console.log(`pro:${user.address.pro}`)
console.log(`city:${user.address.city}`)
}
print(user)
有了解構(gòu)之后就會(huì)變得非常簡(jiǎn)單
function print({ name, age, sex, address: { pro, city } } = user) {
console.log(`name:${name}`)
console.log(`age:${age}`)
console.log(`sex:${sex}`)
console.log(`pro:${pro}`)
console.log(`city:${city}`)
}
print(user)?實(shí)戰(zhàn)做項(xiàng)目時(shí)，在函數(shù)中我們經(jīng)常會(huì)用到各種參數(shù)，可能會(huì)有默認(rèn)值或者沒(méi)有默認(rèn)值，這時(shí)候我們就可以靈活的使用上面的解構(gòu)對(duì)象以及解構(gòu)數(shù)組的方法，讓我們的代碼看起來(lái)更加的簡(jiǎn)潔，我們也能減少很多贅余的代碼，大大提升了代碼的可讀性。
5.解構(gòu)小練習(xí)
5.1，下面是一個(gè)對(duì)象，我們要實(shí)現(xiàn)解構(gòu)出name，然后將其他的所有屬性放到一個(gè)新的對(duì)象中
let user = {
name: 'zs',
age: 16,
sex: '男',
address: {
pro: '湖南',
city: '長(zhǎng)沙'
}
}這里利用擴(kuò)展運(yùn)算符即可實(shí)現(xiàn)
let { name, ...obj } = user //利用展開(kāi)運(yùn)算符收集剩下的屬性
console.log(name, obj)
5.2，下面有一個(gè)對(duì)象，解構(gòu)出第二條評(píng)論的用戶名和用戶內(nèi)容
let article = {
title: '文章標(biāo)題',
content: '文章內(nèi)容',
comments: [
{
content: '評(píng)論1',
user: {
id: 1,
name: '用戶名1'
}
},
{
content: '評(píng)論2',
user: {
id: 2,
name: '用戶名2'
}
}
]
}?利用上面的知識(shí)就可以很輕松的解構(gòu)出我們需要的元素
//解構(gòu)出第二條評(píng)論的用戶名和用戶內(nèi)容
//name:'用戶名2',content:'評(píng)論2'
let {
comments: [
,
{
content,
user: { name }
}
]
} = article
console.log(content, name)
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-600221.html
?
到了這里，關(guān)于ES6解構(gòu)對(duì)象、數(shù)組、函數(shù)傳參的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
