vue實(shí)現(xiàn)多個(gè)數(shù)組合并
更新時(shí)間：2023年06月29日 14:22:32 作者：蒙面價(jià)肥貓
這篇文章主要介紹了vue實(shí)現(xiàn)多個(gè)數(shù)組合并方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue多個(gè)數(shù)組合并成一個(gè)數(shù)組
假如有三個(gè)數(shù)組，a[1,2,3] , b['x','y','z'] , c['a','b','c'] ,將他們?nèi)齻€(gè)整合到一起
data(){
return{
//定義一個(gè)新數(shù)組
parameterArrayList:[],//所有數(shù)據(jù)
a[1,2,3] ,
b['x','y','z'] ,
c['a','b','c']
}
}
methods:{
test(){
this.a.forEach((item,i)=>{
this.parameterArrayList.push({
date:item,
describe:this.b[i],
dataEnd:this.c[i],
})
})
}
}vue合并對(duì)象中的多個(gè)數(shù)組并去重
1.合并
代碼如下（示例）：
類(lèi)似這樣的數(shù)組我們?nèi)绾胃咝Э焖俚娜ズ喜⒛兀?/p>
我們可以用 Object.values（）
方法返回給定對(duì)象自己的可枚舉屬性值的數(shù)組，其順序與 for...在循環(huán)中。唯一的區(qū)別是循環(huán)也枚舉原型鏈中的屬性 for...in
const data = {"A":["1","2","3","4","21","22"],"B":["3","4","5","6","7","8"]};
const result = [].concat(...Object.values(data));
console.log(result);2.數(shù)組去重
代碼如下（示例）：
使用Set實(shí)現(xiàn)去重
?const arrayResult = Array.from(new Set(result))?
?console.log('arrayResult',arrayResult)3.數(shù)組對(duì)象去重
代碼如下（示例）：
const arr = [
{
name: '潺潺',
age: 18
},
{
name: '挖挖',
age: 29
},
{
name: '挖挖',
age: 29
},
{
name: '潺潺',
age: 18
}
]
const map = new Map()
// 對(duì)name屬性進(jìn)行去重
const result= arr.filter(key => !map.has(key.name) && map.set(key.name, 1)) 總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue2.x中keep-alive源碼解析(實(shí)例代碼)
Keep-Alive模式避免頻繁創(chuàng)建、銷(xiāo)毀鏈接，允許多個(gè)請(qǐng)求和響應(yīng)使用同一個(gè)HTTP鏈接，這篇文章主要介紹了vue2.x中keep-alive源碼解析,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vue為什么要封裝全局組件引入，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，感興趣的小伙伴可以參考一下2022-07-07
Vue百度地圖實(shí)現(xiàn)定位和marker拖拽監(jiān)聽(tīng)功能
這篇文章主要介紹了Vue百度地圖實(shí)現(xiàn)定位和marker拖拽監(jiān)聽(tīng)功能,實(shí)現(xiàn)思路非常簡(jiǎn)單，本文結(jié)合實(shí)例代碼效果圖給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-11-11
vue單個(gè)組件實(shí)現(xiàn)無(wú)限層級(jí)多選菜單功能
這篇文章主要介紹了vue單個(gè)組件實(shí)現(xiàn)無(wú)限層級(jí)多選菜單的相關(guān)資料，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2018-04-04
稍微學(xué)一下Vue的數(shù)據(jù)響應(yīng)式（Vue2及Vue3區(qū)別）
這篇文章主要介紹了稍微學(xué)一下 Vue 的數(shù)據(jù)響應(yīng)式（Vue2 及 Vue3），文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
Vue狀態(tài)管理庫(kù)Pinia詳細(xì)介紹
這篇文章主要介紹了Vue3-pinia狀態(tài)管理,pinia是 vue3 新的狀態(tài)管理工具，簡(jiǎn)單來(lái)說(shuō)相當(dāng)于之前 vuex，它去掉了 Mutations 但是也是支持 vue2 的，需要的朋友可以參考下2022-08-08
VUE學(xué)習(xí)寶典之vue-dialog使用方法
在Vue中dialog對(duì)話框是一種常見(jiàn)的組件,用于在用戶(hù)與應(yīng)用程序進(jìn)行交互時(shí)顯示信息或收集輸入,這篇文章主要給大家介紹了關(guān)于VUE學(xué)習(xí)寶典之vue-dialog使用方法的相關(guān)資料,需要的朋友可以參考下2024-05-05
基于Vue.js 實(shí)現(xiàn)簡(jiǎn)易拖拽指令
在 Vue.js 中,我們可以通過(guò)自定義指令的方式來(lái)實(shí)現(xiàn)拖拽功能,使得代碼更加模塊化和可復(fù)用,本文將介紹如何基于 Vue.js 實(shí)現(xiàn)一個(gè)簡(jiǎn)易的拖拽指令,感興趣的朋友跟隨小編一起看看吧2024-04-04
這篇文章主要介紹了vue2.0+使用md-edit編輯器的解決方案，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2024-02-02
這篇文章主要介紹了vue中巧用三元表達(dá)式解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04