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