JS数组去重详解：遍历、对象记录、下标判断与排序法

本文总结了JavaScript中数组去重的4种常用实现方式，包括利用indexOf遍历判断、通过Object对象记录值、基于数组下标与indexOf对比以及先排序后比较首尾元素。文中提供了完整的代码示例及浏览器兼容性Polyfill处理，帮助开发者根据场景选择合适方案。

JS数组去重方法概述

本文通过具体实例，详细讲解了JavaScript中实现数组去重的几种常见方案，供读者参考学习。

关于JS数组去重的讨论已十分普遍，本文对此进行系统梳理，归纳出4种典型的实现方法。

在展示具体代码之前，为确保兼容性，先对浏览器原生Array对象中可能缺失的indexOf和forEach方法进行Polyfill补充。

浏览器兼容性Polyfill处理


Array.prototype.indexOf = Array.prototype.indexOf || function(item) {
  for (var i = 0, j = this.length; i < j; i++) {
    if (this[i] === item) {
      return i;
    }
  }
  return -1;
}
Array.prototype.forEach = Array.prototype.forEach || function(callback, thisArg) {
  if (!callback || typeof callback !== 'function') return;
  for (var i = 0, j = this.length; i < j; i++) {
    callback.call(thisArg, this[i], i, this);
  }
}

方法一：利用indexOf遍历判断

第一种方法：遍历原数组并构建新数组，利用indexOf检查元素是否已存在于新数组中，若不存在则使用push添加，最终返回去重后的新数组。


function removeDuplicatedItem(ar) {
  var ret = [];
  for (var i = 0, j = ar.length; i < j; i++) {
    if (ret.indexOf(ar[i]) === -1) {
      ret.push(ar[i]);
    }
  }
  return ret;
}

方法二：利用Object对象记录值

第二种方法：遍历数组，借助Object对象来存储已出现的值。通过判断该值是否已保存在Object中，若未保存则将其push到新数组，并通过tmp[arrayItem]=1的方式标记该值已存在。


function removeDuplicatedItem2(ar) {
  var tmp = {},
    ret = [];
  for (var i = 0, j = ar.length; i < j; i++) {
    if (!tmp[ar[i]]) {
      tmp[ar[i]] = 1;
      ret.push(ar[i]);
    }
  }
  return ret;
}

方法三：数组下标判断法

第三种方法：利用数组下标判断。遍历数组时，使用indexOf检查当前元素的值是否等于其当前索引，若相等则说明是第一次出现，将其加入结果数组。


function removeDuplicatedItem3(ar) {
  var ret = [];
  ar.forEach(function(e, i, ar) {
    if (ar.indexOf(e) === i) {
      ret.push(e);
    }
  });
  return ret;
}

方法四：排序后比较首尾去重

第四种方法：先将数组进行排序，随后通过比较相邻元素（一头一尾或前后项）来去除重复值，从而实现去重。


function removeDuplicatedItem4(ar) {
  var ret = [],
    end;
  ar.sort();
  end = ar[0];
  ret.push(ar[0]);
  for (var i = 1; i < ar.length; i++) {
    if (ar[i] != end) {
      ret.push(ar[i]);
      end = ar[i];
    }
  }
  return ret;
}

补充说明与工具推荐

如果您有其他更优的去重方案，欢迎补充交流。

此外，本文还提供了几款实用的在线工具供参考使用：

在线去除重复项工具： http://tools.jb51.net/code/quchong

在线文本去重复工具： http://tools.jb51.net/aideddesign/txt_quchong

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript数组操作技巧总结》、《JavaScript字符与字符串操作技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript排序算法总结》、《JavaScript查找算法技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述内容能对您的JavaScript程序设计有所帮助。

JavaScript数组去重的4种常用实现方法