reduce()数组去重

最新推荐文章于 2025-05-10 20:27:00 发布

zeroyulong

最新推荐文章于 2025-05-10 20:27:00 发布

阅读量1.1w

点赞数 2

CC 4.0 BY-SA版权

分类专栏： js 文章标签：数组去重去除数组中id重复的对象

本文链接：https://blog.youkuaiyun.com/zeroyulong/article/details/85774894

js 专栏收录该内容

41 篇文章

订阅专栏

本文详细介绍了JavaScript中数组去重的方法，包括使用reduce函数去除数组中重复对象的技巧，以及利用Set对象实现数组元素唯一性的现代方法。同时，深入解析了reduce函数的工作原理及其参数，帮助读者理解如何高效地操作数组。

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

需求：去除掉下列数组中id重复的对象

			let colors = [{
					id: 0,
					colorName: 'red'
				},
				{
					id: 1,
					colorName: "orange"
				},
				{
					id: 2,
					colorName: "yellow"
				},
				{
					id: 3,
					colorName: "green"
				},
				{
					id: 1,
					colorName: "blue"
				},
				{
					id: 2,
					colorName: "purple"
				},
			];

方法：

			let obj = {};
			colors = colors.reduce((cur, next) => {
				obj[next.id] ? "" : obj[next.id] = true && cur.push(next);
				return cur;
			}, []) //设置cur默认类型为数组，并且初始值为空的数组
			console.log(colors);

reduce()方法接收一个回调函数作为第一个参数，回调函数又接受四个参数，分别是：

1.previousValue => 初始值或上一次回调函数叠加的值；

2. currentValue => 本次回调（循环）将要执行的值；

3. index =>“currentValue”的索引值；

4. arr => 数组本身；

reduce()方法返回的是最后一次调用回调函数的返回值；

let log = console.log.bind(console);
let arr = [1,2,3,4,5,6];
arr = arr.reduce((previousValue, currentValue) => {
     return previousValue + currentValue; //返回的是最后一次调用回调函数的值，15+6；
})
log(arr); // 21

可以看出，上面代码的最终结果就是1+2+3+4+5+6 = 21；

此外，reduce还可以接收第二参数initialValue，用来声明回调函数（第一个参数）的previousValue的类型和初始值；

let log = console.log.bind(console);
let arr = [1,2,3,4,5,6];
arr = arr.reduce((previousValue,currentValue) => {
     return previousValue + currentValue;
}，0) //指定cur的类型为Number并且初始值为0，当设为1时，最终打印的值为22
log(arr); // 21

需要注意的是，如果设置了initialValue的值，第一次执行回调函数的previousValue的值等于initialValue，此时查看当前索引（index）为0；但如果不设置initialValue的值，previousValue的值为数组的第一项，并且索引值（index）为1；也就是说，不设置初始值的话reduce()方法实际是从第二次循环开始的！

扩展数组去重方法新：

let mys = [4,4,1,3,6,9,9,0,2];
console.log([...new Set(mys)]);//[4,1,3,6,9,0,2]

参考：https://www.cnblogs.com/caideyipi/p/7679681.html