JavaScript实现数组去重的5种常用高效算法
本文总结了JavaScript中实现数组去重的5种常用高效算法,包括遍历数组法、对象键值对法、数组下标判断法、排序后相邻去除法以及优化遍历数组法。详细解析了各方法的实现思路、性能特点及适用场景,并提供了完整的源码示例与在线工具推荐,帮助开发者根据实际需求选择最优方案。
JavaScript数组去重5种方法概述
本文详细介绍并展示了JavaScript中用于删除数组重复元素的5种常用且高效的算法。
这里整理了JavaScript实现数组去重的5种方法,并附带了演示Demo及完整源码。
遍历数组法与对象键值对法
1. 遍历数组法
这是最基础的去重方式。
实现思路:创建一个新数组,遍历原数组,若元素不在新数组中则将其加入。注意:判断元素是否存在使用的“indexOf”是ECMAScript5标准方法,IE8及以下版本不支持,因此需要补充兼容低版本浏览器的代码,具体源码如下:
// 最简单数组去重法
function unique1(array){
var n = []; //一个新的临时数组
//遍历当前数组
for(var i = 0; i < array.length; i++){
//如果当前数组的第i已经保存进了临时数组,那么跳过,
//否则把当前项push到临时数组里面
if (n.indexOf(array[i]) == -1) n.push(array[i]);
}
return n;
}
// 判断浏览器是否支持indexOf ,indexOf 为ecmaScript5新方法 IE8以下(包括IE8, IE8只支持部分ecma5)不支持
if (!Array.prototype.indexOf){
// 新增indexOf方法
Array.prototype.indexOf = function(item){
var result = -1, a_item = null;
if (this.length == 0){
return result;
}
for(var i = 0, len = this.length; i < len; i++){
a_item = this[i];
if (a_item === item){
result = i;
break;
}
}
return result;
}
}
2. 对象键值对法
该方法的执行速度在所有方法中最快,但缺点是占用内存较大。
实现思路:新建一个JavaScript对象和一个新数组,遍历原数组时,判断元素是否作为JavaScript对象的键,如果不是,则给对象新增该键并将其放入新数组。注意点:判断是否为JavaScript对象键时,系统会自动对传入的键执行“toString()”,这可能导致不同的键被误认为相同;例如:a[1]与a["1"]。要解决上述问题,仍需调用“indexOf”。
// 速度最快, 占空间最多(空间换时间)
function unique2(array){
var n = {}, r = [], len = array.length, val, type;
for (var i = 0; i < array.length; i++) {
val = array[i];
type = typeof val;
if (!n[val]) {
n[val] = [type];
r.push(val);
} else if (n[val].indexOf(type) < 0) {
n[val].push(type);
r.push(val);
}
}
return r;
}
数组下标判断法与排序后相邻去除法
3. 数组下标判断法
该方法同样需要调用“indexOf”,其性能与方法1相近。
实现思路:如果当前数组的第i项在当前数组中第一次出现的位置不是i,则说明第i项是重复的,直接忽略;否则将其存入结果数组。
function unique3(array){
var n = [array[0]]; //结果数组
//从第二项开始遍历
for(var i = 1; i < array.length; i++) {
//如果当前数组的第i项在当前数组中第一次出现的位置不是i,
//那么表示第i项是重复的,忽略掉。否则存入结果数组
if (array.indexOf(array[i]) == i) n.push(array[i]);
}
return n;
}
4. 排序后相邻去除法
虽然原生数组的“sort”方法排序结果并不完全可靠,但在不注重顺序的去重场景中,这一缺点影响不大。
实现思路:对传入数组进行排序,排序后相同值会相邻,遍历时新数组只加入与前一个值不同的元素。
// 将相同的值相邻,然后遍历去除重复值
function unique4(array){
array.sort();
var re=[array[0]];
for(var i = 1; i < array.length; i++){
if( array[i] !== re[re.length-1])
{
re.push(array[i]);
}
}
return re;
}
优化遍历数组法与源码资源
5. 优化遍历数组法
该方法源自国外博客,其实现代码相当精妙。
实现思路:获取未重复的最右侧值放入新数组。(当检测到有重复值时终止当前循环,同时进入顶层循环的下一轮判断)。
// 思路:获取没重复的最右一值放入新数组
function unique5(array){
var r = [];
for(var i = 0, l = array.length; i < l; i++) {
for(var j = i + 1; j < l; j++)
if (array[i] === array[j]) j = ++i;
r.push(array[i]);
}
return r;
}
GitHub项目源码:https://github.com/wteam-xq/testDemo/blob/master/array.html
PS:这里再为大家提供几款去重复工具供大家参考使用:
在线去除重复项工具: http://tools.jb51.net/code/quchong
在线文本去重复工具: http://tools.jb51.net/aideddesign/txt_quchong
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript数组操作技巧总结》、《JavaScript排序算法总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
JS大数值转字符串出现科学计数法怎么办
2026-11-05 17:09:21
JS split切割后出现空字符串怎么过滤
2026-11-05 16:00:30
在 React 或 Vue 项目中封装使用 JS 节流防抖
2026-11-05 15:27:29
JavaScript中怎么将带小数的字符串转为整数?
2026-11-05 14:32:38
怎么用JavaScript策略模式重构电商促销计算逻辑?
2026-11-05 14:01:09
