js实现对象数组去重及数据叠加

原创于 2021-12-20 16:57:37 发布 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

JavaScript 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的列表去重及计数叠加功能。通过实例展示了如何利用JavaScript Map对象来过滤重复项，并将重复项的计数进行累加。此方法适用于需要对具有相同ID的项进行计数汇总的应用场景。

HTML

<template>
  <div>
		<div v-for="item in list">
			id：{{item.id}} - count：{{item.count}}
		</div>
		<br />
		<div>点击按钮去重，count叠加</div>
		<button @click="getData">去重</button>
	</div>
</template>

JavaScript

<script>
export default {
  name: 'app',
  data(){
		return {
			list: [
				{
					id: 0,
					count: 2,
				},
				{
					id: 1,
					count: 2,
				},
				{
					id: 2,
					count: 2,
				},
				{
					id: 3,
					count: 2,
				},
				{
					id: 0,
					count: 2,
				},
				{
					id: 2,
					count: 2,
				},
			]
		}
	},
	methods: {
		getData(){
			let listFilter = this.list
			
			// 定义map方法
			const res = new Map();
			
			// 过滤器过滤listFilter
			this.list = listFilter.filter((item) => {
				
				// res收集第一次存在的元素，如果存在，查看存在的位置，对list中的count进行叠加
				if(res.has(item.id)){
					for(let [key,value] of res){
						if(key==item.id){
							this.list[key].count += item.count
						}
					}
				}
				
				// 如果不存在,则添加到res中
				return !res.has(item.id) && res.set(item.id, 1)
			});
		}
	}
}
</script>