一、Vue數(shù)組和對(duì)象的概念及區(qū)別
在開(kāi)始探究如何將Vue數(shù)組轉(zhuǎn)換為對(duì)象之前，我們需要先了解Vue數(shù)組和對(duì)象的概念及區(qū)別。
Vue數(shù)組：在Vue中，當(dāng)我們需要展示列表數(shù)據(jù)時(shí)，我們通常使用的是數(shù)組。例如：
data() {
return {
dataList: [
{ id: 1, name: '張三' },
{ id: 2, name: '李四' },
{ id: 3, name: '王五' }
]
}
}Vue對(duì)象：在Vue中，當(dāng)我們需要使用單個(gè)數(shù)據(jù)時(shí)，我們通常使用的是對(duì)象。例如：
data() {
return {
user: {
id: 1,
name: '張三',
age: 20
}
}
}區(qū)別：Vue數(shù)組是由多個(gè)相同數(shù)據(jù)類(lèi)型的值組成，而Vue對(duì)象是由不同數(shù)據(jù)類(lèi)型的屬性組成。
二、Vue數(shù)組轉(zhuǎn)換為對(duì)象的方式
在Vue中，我們可以通過(guò)以下兩種方式將數(shù)組轉(zhuǎn)換為對(duì)象：
1. 使用reduce函數(shù)
reduce() 方法對(duì)數(shù)組中的每個(gè)元素執(zhí)行一個(gè)由您提供的 reducer 函數(shù) (升序執(zhí)行)，將其結(jié)果匯總為單個(gè)返回值。可以使用reduce() 方法將一個(gè)數(shù)組轉(zhuǎn)換為一個(gè)對(duì)象。
data() {
return {
dataList: [
{ id: 1, name: '張三' },
{ id: 2, name: '李四' },
{ id: 3, name: '王五' }
]
}
},
computed: {
objectData() {
return this.dataList.reduce((obj, item) => {
obj[item.id] = item.name
return obj
}, {})
}
}代碼分析：在以上代碼中，我們首先聲明了一個(gè)名為 dataList 的數(shù)組，數(shù)組中包含了多個(gè)對(duì)象。然后，在 computed 中聲明了一個(gè) objectData 計(jì)算屬性，該屬性通過(guò) dataList.reduce() 方法將 dataList 數(shù)組轉(zhuǎn)換為了一個(gè)對(duì)象。
2. 使用forEach函數(shù)
forEach() 方法對(duì)數(shù)組中的每個(gè)元素執(zhí)行一次提供的函數(shù)。我們可以使用forEach() 方法將一個(gè)數(shù)組轉(zhuǎn)換為一個(gè)對(duì)象。
data() {
return {
dataList: [
{ id: 1, name: '張三' },
{ id: 2, name: '李四' },
{ id: 3, name: '王五' }
]
}
},
computed: {
objectData() {
let obj = {}
this.dataList.forEach(item => {
obj[item.id] = item.name
})
return obj
}
}代碼分析：在以上代碼中，我們也首先聲明了一個(gè)名為 dataList 的數(shù)組，數(shù)組中包含了多個(gè)對(duì)象。然后，在 computed 中聲明了一個(gè) objectData 計(jì)算屬性，該屬性通過(guò) dataList.forEach() 方法將 dataList 數(shù)組轉(zhuǎn)換為了一個(gè)對(duì)象。
三、如何在Vue中使用轉(zhuǎn)換后的對(duì)象
一旦我們將 Vue 數(shù)組轉(zhuǎn)換為對(duì)象，我們就可以在 Vue 中使用轉(zhuǎn)換后的對(duì)象了。
data() {
return {
dataList: [
{ id: 1, name: '張三' },
{ id: 2, name: '李四' },
{ id: 3, name: '王五' }
],
objectData: {}
}
},
computed: {
convertObject() {
let obj = {}
this.dataList.forEach(item => {
obj[item.id] = item.name
})
return obj
}
},
mounted() {
this.objectData = JSON.parse(JSON.stringify(this.convertObject))
}代碼分析：首先，我們?cè)?data 中添加了一個(gè)名為 objectData 的對(duì)象，該對(duì)象用來(lái)存儲(chǔ)轉(zhuǎn)換后的對(duì)象。然后，在 computed 中聲明了一個(gè) convertObject 計(jì)算屬性，該屬性用來(lái)將 dataList 數(shù)組轉(zhuǎn)換為對(duì)象。最后，在 mounted 鉤子中通過(guò) JSON.parse() 和 JSON.stringify() 方法將 convertObject 賦值給 objectData。
四、總結(jié)
通過(guò)使用上文提到的方式，我們可以將 Vue 數(shù)組轉(zhuǎn)換為對(duì)象，并在 Vue 中使用轉(zhuǎn)換后的對(duì)象。在實(shí)際開(kāi)發(fā)中，我們可能會(huì)遇到一些需要將數(shù)組轉(zhuǎn)換為對(duì)象的場(chǎng)景，例如：將從后臺(tái)獲取到的數(shù)組數(shù)據(jù)轉(zhuǎn)換為 id 作為鍵，name 作為值的對(duì)象數(shù)據(jù)。
京公網(wǎng)安備 11010802030320號(hào)