数组对象去重三种方法-Map/reduce/属性

最新推荐文章于 2025-03-20 14:30:08 发布

原创最新推荐文章于 2025-03-20 14:30:08 发布 · 607 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

js 同时被 2 个专栏收录

37 篇文章

订阅专栏

es6

9 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现数组去重的有效方法。通过利用Map和reduce方法，结合不同的键值组合来过滤重复项，实现了根据单一或多个属性对数组元素进行去重的功能。此外，还展示了传统的对象访问方式来实现数组元素的唯一性。

var arr = [{
id: '1',
key: '1',
value: '明月'
}, {
id: '3',
key: '2',
value: '可欣'
}, {
id: '2',
key: '3',
value: '小红'
}, {
id: '1',
key: '1',
value: '小馨'
}, {
id: '1',
key: '2',
value: '小静'
}];

Map

var map = new Map();
for (let item of arr) {
    map.set(item.id, item);
 }
 arr = [...map.values()]

reduce()

const obj = {}
arr = arr.reduce((total, next) => {
  obj[next.key] ? '' : obj[next.key] = true && total.push(next)
  return total
}, [])
console.log(arr)

这里还有一个需求，如果有两个或者多个判断条件，给数组对象去重，加一个判断条件就行了

const hasObj = {}
arr = arr.reduce((total, next) => {
   const filterKey = next.key + next.id;//key并且id 同时重复的
   hasObj[filterKey] ? "" : hasObj[filterKey] = true && total.push(next)
   return total
}, [])
console.log(arr)

对象访问属性的方法

let newArr = [];
    let obj = {};
    for (var i = 0; i < arr.length; i++) {
       if (!obj[arr[i].key]) {
         newArr.push(arr[i])
         obj[arr[i].key] = true
       }
    }
console.log(newArr);