JS数组去重

1,096 阅读3分钟

📖参考笔记:JavaScript 数组去重的方法(12 种方法,史上最全)

数组去重

  1. 利用 ES6 的 Set 去重
  2. 利用 includes
  3. 利用 indexOf 去重
  4. 利用 sort()
  5. 利用 hasOwnProperty
  6. reduce去重

⚽利用 ES6 的 Set 去重

不考虑兼容性,这种去重的方法代码最少。这种方法还无法去掉 {} 空对象,后面的高阶方法会添加去掉重复 {} 的方法。

      let array = [1, 2, 2, 3, 4, 4, 5];
      let uniqueArray = [...new Set(array)];
      console.log(uniqueArray); // 输出: [1, 2, 3, 4, 5]

⚾利用 includes

检测数组是否有某个值,但{}没有去重

      let array = [1, 2, 2, 3, 4, 4, 5, {}, {}];
      let uniqueArr = [];
      for (let i = 0; i < array.length; i++) {
        if (!uniqueArr.includes(array[i])) {
          uniqueArr.push(array[i]);
        }
      }
      console.log(uniqueArr);

🏀利用 indexOf 去重

新建一个空的结果数组,for 循环原数组,判断结果数组是否存在当前元素,如果有相同的值则跳过,不相同则 push 进数组。但 NaN、{}没有去重

      let array = [1, 2, 2, 3, 4, 4, 5, {}, {}];
      let uniqueArr = [];
      for (let i = 0; i < array.length; i++) {
        if (uniqueArr.indexOf(array[i]) === -1) {
          uniqueArr.push(array[i]);
        }
      }
      console.log(uniqueArr);

🏐利用 sort()

利用 sort() 排序方法,然后根据排序后的结果进行遍历及相邻元素比对。

      let array = [1, 2, 2, 3, 4, 4, 5, {}, {}];
      let uniqueArr = [];
      array.sort();
      uniqueArr.push(array[0]);
      for (let i = 1; i < array.length; i++) {
        if (array[i] !== array[i - 1]) {
          uniqueArr.push(array[i]);
        }
      }
      console.log(uniqueArr);

🏈利用 hasOwnProperty

利用 hasOwnProperty 判断是否存在对象属性,所有的都去重了

判断一个属性是定义在对象本身而不是继承自原型链,我们需要使用从 Object.prototype 继承而来的 hasOwnProperty 方法。 hasOwnProperty 方法是 Javascript 中唯一一个处理对象属性而不会往上遍历原型链的。

      // 这种方法不是很好,如果是true和“true”这样的值,会返回false
      // function unique(arr) {
      //   var obj = {};
      //   return arr.filter(function (item) {
      //     var key =
      //       item === null
      //         ? "null"
      //         : item === undefined
      //         ? "undefined"
      //         : item.toString();
      //     return obj.hasOwnProperty(key) ? false : (obj[key] = true);
      //   });
      // }

      // 这种方法加了一个类型进行判断,解决了true和“true”的问题
      function unique(arr) {
        // 创建一个空对象用于存储已经遇到的元素类型+值的组合
        var obj = {};
        // 使用filter函数遍历数组arr,返回一个新数组,该数组只包含未遇到过的元素
        return arr.filter(function (item, index) {
          // 检查对象obj是否已经有一个属性,其键是元素类型的字符串表示加上元素的值
          // 这里使用typeof item + item作为键,这通常不是最佳实践,因为它可能不适用于所有数据类型或值
          return obj.hasOwnProperty(typeof item + item)
            ? false // 如果已经存在,说明是重复项,不包含在结果数组中
            : (obj[typeof item + item] = true); // 如果不存在,添加到obj中,并返回true以包含在结果数组中
        });
      }

      var arr = [
        1,
        1,
        "true",
        "true",
        true,
        true,
        15,
        15,
        false,
        false,
        undefined,
        undefined,
        null,
        null,
        NaN,
        NaN,
        "NaN",
        0,
        0,
        "a",
        "a",
        {},
        {},
      ];
      console.log(unique(arr));
      //[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}]   //所有的都去重了
    

🥎reduce去重

      function unique(arr) {
        return arr.reduce(
          (prev, cur) => (prev.includes(cur) ? prev : [...prev, cur]),
          []
        );
      }
      var arr = [
        1,
        1,
        "true",
        "true",
        true,
        true,
        15,
        15,
        false,
        false,
        undefined,
        undefined,
        null,
        null,
        NaN,
        NaN,
        "NaN",
        0,
        0,
        "a",
        "a",
        {},
        {},
      ];
      console.log(unique(arr));
       [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]