js-数组对象去重的几种方式

问题及需要实现的结果展示

首先定义数组：

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

需要得到的结果是：

1、方法一：双层for循环

两两比较，如果后一个对象的key值和前一个对象的key值相等，就把后面的对象删除。

<el-button type="primary" @click="openList()">点击</el-button>

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

2、方法二：对象访问属性的方法

采用对象访问属性的方法，判断属性值是否存在。

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

3、方法三：Map()方法

has方法可以判断Map对象中是否存在指定元素,有则返回true，否则返回false

set方法可以向Map对象添加新元素 map.set(key, value)

values方法可以返回Map对象值的遍历器对象

//方法一
 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);
        }
      }
      let arr = [...map.values()];
      console.log("arrObj-----------------------", arr);

//方法二
 openList() {
      let arrObj = [
        { name: "张三", key: "1" },
        { name: "李四", key: "2" },
        { name: "王五", key: "3" },
        { name: "张三", key: "1" },
        { name: "李四", key: "2" },
      ];
      const map = new Map();
      const newArr = arrObj.filter((v) => !map.has(v.key) && map.set(v.key, 1));
      console.log("arrObj-----------------------", newArr);
    },

4、方法四：reduce方法

 openList() {
      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-----------------------", arrObj);
    },