js 对象数组去重

背景

最近工作中，遇到了一个很经典的问题，数组去重，因为前段时间带了几个朋友开始学习 Web，发现最初自己开始学习的时候很多技术细节都没有记录下来，今天刚好又遇到了这个问题，于是赶紧随手记下来。

js 对象数组去重方法

日常开发过程中，不论是接口返回给我们的数据，还是我们自己创造的数据，难免会遇到有重复的情况，下面介绍两种简单的方法：

假设我们现在有这样的 arr 对象数组：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const arr = [
  {
    id: "1",
    pId: "0",
    title: "A",
  }, {
    id: "2",
    pId: "0",
    title: "B",
  }, {
    id: "3",
    pId: "0",
    title: "C",
  }, {
    id: "3",
    pId: "0",
    title: "C",
  },
]
  1. 通过 Es6 new Set() 实例的属性和方法来去重
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const res = new Map();
console.log(arr.filter((arr) => !res.has(arr.id) && res.set(arr.id)));
// [
//   {
//     id: "1",
//     pId: "0",
//     title: "A",
//   }, {
//     id: "2",
//     pId: "0",
//     title: "B",
//   }, {
//     id: "3",
//     pId: "0",
//     title: "C",
//   },
// ]
  1. 使用 reduce 方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
  const hash = {};
  const newArr = arr.reduce((pre, next) => {
    if (!hash[next.id]) {
      hash[next.id] = pre.push(next);
    }
    return pre;
  }, []);
  console.log('newArr: ', newArr);
//   newArr: 
//   [
//     {
//         "id": "1",
//         "pId": "0",
//         "title": "A"
//     },
//     {
//         "id": "2",
//         "pId": "0",
//         "title": "B"
//     },
//     {
//         "id": "3",
//         "pId": "0",
//         "title": "C"
//     }
//   ]

对于普通的数组去重，在这里就记录一下最方便的方法把：

  1. 使用 ES6 的 Array.from
1
2
3
4
const arr = [1, 2, 3, 4, 3];
const newArr = Array.from(new Set(arr))
console.log('newArr: ', newArr);
// newArr: [1, 2, 3, 4]

总结：日常开发中，可以只记最简单的方法，复杂的方法都可以在 Google 中搜索到，用到的时候搜就可以了，我相信这些方法用的多了自然而然就记住了，熟能生巧嘛～好好学习，天天向上👆