vue实现多个数组合并
更新时间：2023年06月29日 14:22:32 作者：蒙面价肥猫
这篇文章主要介绍了vue实现多个数组合并方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue多个数组合并成一个数组
假如有三个数组，a[1,2,3] , b['x','y','z'] , c['a','b','c'] ,将他们三个整合到一起
data(){
return{
//定义一个新数组
parameterArrayList:[],//所有数据
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合并对象中的多个数组并去重
1.合并
代码如下（示例）：
类似这样的数组我们如何高效快速的去合并呢？
我们可以用 Object.values（）
方法返回给定对象自己的可枚举属性值的数组，其顺序与 for...在循环中。唯一的区别是循环也枚举原型链中的属性 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.数组去重
代码如下（示例）：
使用Set实现去重
const arrayResult = Array.from(new Set(result))
console.log('arrayResult',arrayResult)3.数组对象去重
代码如下（示例）：
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)) 总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue3全局组件通信之provide / inject,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-03-03
Vue warn:Property "state" was accessed during
这篇文章主要为大家介绍了Vue warn:Property "state" was accessed during render的报错解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
在本文里小编给大家整理了关于VUE路由动态加载实例代码以及相关知识点，需要的朋友们学习下。2019-08-08
这篇文章主要介绍了vue单应用在ios系统中实现微信分享功能操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要为大家介绍了Vue3源码分析组件挂载创建虚拟节点，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
在 Vue 的项目中，我们经常会遇到 v-if、v-show、v-for 或 v-model 这些内置指令，它们为我们提供了不同的功能。除了使用这些内置指令之外，Vue 也允许注册自定义指令。接下来，将使用Vue 3官方文档自定义指令章节中使用的示例，来一步步揭开自定义指令背后的秘密。2021-05-05
这篇文章主要介绍了Vue父子组件属性传递实现方法，我们主要从案例出发，用Vue3的写法写父子组件之间的属性传递，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2023-02-02
这篇文章主要介绍了Vue 中如何正确引入第三方模块的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要介绍了如何用vite打包解决前端发版后浏览器缓存问题的相关资料,这样的配置能够有效避免浏览器缓存问题,确保浏览器每次都能加载最新的代码,同时又不影响第三方库的缓存效果,需要的朋友可以参考下2024-11-11
这篇文章主要介绍了Vuex state中同步数据和异步数据方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
最新评论