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)文章
這篇文章主要介紹了Vue3全局組件通信之provide?/?inject,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
Vue?warn:Property?"state"?was?accessed?during
這篇文章主要為大家介紹了Vue?warn:Property?"state"?was?accessed?during?render的報錯解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
在本文里小編給大家整理了關(guān)于VUE路由動態(tài)加載實例代碼以及相關(guān)知識點，需要的朋友們學(xué)習下。2019-08-08
vue單應(yīng)用在ios系統(tǒng)中實現(xiàn)微信分享功能操作
這篇文章主要介紹了vue單應(yīng)用在ios系統(tǒng)中實現(xiàn)微信分享功能操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
Vue3源碼分析組件掛載創(chuàng)建虛擬節(jié)點
這篇文章主要為大家介紹了Vue3源碼分析組件掛載創(chuàng)建虛擬節(jié)點，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
在 Vue 的項目中，我們經(jīng)常會遇到 v-if、v-show、v-for 或 v-model 這些內(nèi)置指令，它們?yōu)槲覀兲峁┝瞬煌墓δ?。除了使用這些內(nèi)置指令之外，Vue 也允許注冊自定義指令。接下來，將使用Vue 3官方文檔自定義指令章節(jié)中使用的示例，來一步步揭開自定義指令背后的秘密。2021-05-05
這篇文章主要介紹了Vue父子組件屬性傳遞實現(xiàn)方法，我們主要從案例出發(fā)，用Vue3的寫法寫父子組件之間的屬性傳遞，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習吧2023-02-02
這篇文章主要介紹了Vue 中如何正確引入第三方模塊的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2019-05-05
這篇文章主要介紹了如何用vite打包解決前端發(fā)版后瀏覽器緩存問題的相關(guān)資料,這樣的配置能夠有效避免瀏覽器緩存問題,確保瀏覽器每次都能加載最新的代碼,同時又不影響第三方庫的緩存效果,需要的朋友可以參考下2024-11-11
Vuex state中同步數(shù)據(jù)和異步數(shù)據(jù)方式
這篇文章主要介紹了Vuex state中同步數(shù)據(jù)和異步數(shù)據(jù)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08