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

作者:小括号时间:2026-10-22 14:51:55浏览:594

本文总结了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程序设计有所帮助。

作者最新文章