Several ways to deduplicate array objects in js

First we define the form of the array

let arrObj = [
    {
    
     name: "张三", key: '1' },
    {
    
     name: "李四", key: '2' },
    {
    
     name: "王五", key: '3' },
    {
    
     name: "张三", key: '1' },
    {
    
     name: "李四", key: '2' }
];

Requirement: Delete objects with the same key value, the following is the desired result

1. Method 1: Double-layer for loop

Two-by-two comparison, if the key value of the latter object is equal to the key value of the previous object, delete the latter object.

let arrObj = [
  {
    
     name: "张三", key: '1' },
  {
    
     name: "李四", key: '2' },
  {
    
     name: "王五", key: '3' },
  {
    
     name: "张三", key: '1' },
  {
    
     name: "李四", key: '2' }
]
function uniqueArr (arr) {
    
    
  for (let i = 0; i < arr.length; i++) {
    
    
    for (let j = i + 1; j < arr.length; j++) {
    
    
      if (arr[i].key == arr[j].key) {
    
    
        arr.splice(j, 1)
        j--
      }
    }

  }
  return arr
}
console.log(uniqueArr(arrObj));

2. The method of object access property

Use the method of object access attribute to judge whether the attribute value exists.

let arrObj = [
  {
    
     name: "张三", key: '1' },
  {
    
     name: "李四", key: '2' },
  {
    
     name: "王五", key: '3' },
  {
    
     name: "张三", key: '1' },
  {
    
     name: "李四", key: '2' }
]
function uniqueArr (arr) {
    
    
  var result = []
  var obj = {
    
    }
  for (var i = 0; i < arr.length; i++) {
    
    
    if (!obj[arr[i].key]) {
    
    
      result.push(arr[i])
      obj[arr[i].key] = true
    }
  }

  return result
}
console.log(uniqueArr(arrObj));

3. Map() method

The has method can determine whether the specified element exists in the Map object, and return true if there is, otherwise return false

The set method can add new elements to the Map object map.set(key, value)

The values ​​method can return the traverser object of the value of the Map object

let arrObj = [
  {
    
     name: "张三", key: '1' },
  {
    
     name: "李四", key: '2' },
  {
    
     name: "王五", key: '3' },
  {
    
     name: "张三", key: '1' },
  {
    
     name: "李四", key: '2' }
]
// 方法一：
let map = new Map()
for (let item of arrObj) {
    
    
  if (!map.has(item.key)) {
    
    
    map.set(item.key, item)
  };
};
arr = [...map.values()]
console.log(arr)



// 方法二： (代码较为简洁)
const map = new Map()
const newArr = arrObj.filter(v => !map.has(v.key) && map.set(v.key, 1))
console.log(newArr);

4. reduce method

let arrObj = [
  {
    
     name: "张三", key: '1' },
  {
    
     name: "李四", key: '2' },
  {
    
     name: "王五", key: '3' },
  {
    
     name: "张三", key: '1' },
  {
    
     name: "李四", key: '2' }
]
var obj = {
    
    }
arrObj = arrObj.reduce(function (item, next) {
    
    
  obj[next.key] ? '' : obj[next.key] = true && item.push(next)
  return item
}, [])
console.log(arrObj);