VUE数组根据ID相同，对 value进行累加以及数组去重

wei佳

已于 2022-06-14 15:46:56 修改

阅读量2.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 优化 js 文章标签： vue.js javascript 前端

于 2022-06-14 15:45:52 首次发布

原文链接：http://www.mark-to-win.com/tutorial/50922.html

js 同时被 3 个专栏收录

32 篇文章

订阅专栏

vue

25 篇文章

订阅专栏

优化

15 篇文章

订阅专栏

本文探讨了JavaScript中如何使用数组操作技巧，包括对象属性的累加和数组去重，通过示例展示了`forEach`、`reduce`和`Set`等方法的应用。重点介绍了如何用`obj`结构存储并累加具有相同id的对象值，以及如何利用`reduce`和`Set`实现数组元素的高效去重。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

数组对象相同属性的相加

let obj = {};
const arr = [
	{ id: ‘aaa’, value: 11 },
	{ id: bbb, value: 21 },
	{ id: ‘aaa’, value: 111 },
	{ id: bbb, value: 222 },
	{ id: ccc, value: 22 },
	{ id: ddd, value: 122 },
	{ id: ccc, value: 22 },
	{ id: ddd, value: 122 },
	{ id: ccc, value: 22 },
	{ id: ddd, value: 122 },
];
// 第一种方式
arr.forEach(v => obj[v.id] = obj[v.id] === undefined ? v.value : obj[v.id] + v.value)
console.log(obj)
// 第二种方法
arr.forEach(v=>{
	if (obj.hasOwnProperty(v.id)) {
		obj[v.id] += v.value
	} else{
		obj [v.id] = v.value
	}
})
console.log(obj)


数组去重

//1 reduce去重，针对数组对象
let person = [
      {id: 0, name: "A"},
      {id: 1, name: "B"},
      {id: 2, name: "C"},
      {id: 3, name: "D"},
      {id: 1, name: "E"},
      {id: 2, name: "F"},   
 ];

 let obj = {};
 let peon = person.reduce((cur,next) => {
     obj[next.id] ? "" : obj[next.id] = true && cur.push(next);
     return cur;
 },[]) //设置cur默认类型为数组，并且初始值为空的数组
 console.log(peon);
 //2 Set去重，针对纯数组元素
 let arr = [1,2,2];
 console.log([...new Set(arr)]); // [1,2]