In the course of daily development, whether it’s data returned to us by an interface or data we create ourselves, we inevitably encounter cases where there are duplicates.

Two simple methods of object array de-duplication are described below.

Suppose we now have this array of arr objects as follows.

 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. de-duplication through properties and methods of Es6 new Set() instances

     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",
//   },
// ]

  2. Using the reduce method

     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"
//     }
//   ]

For normal array de-duplication, you can use ES6’s 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]