JavaScript 数组去重的五种实现方案与性能对比
本文总结了JavaScript中去除数组重复元素的五种常见方法,包括利用indexOf、Hash表、排序比较、嵌套循环优化及正则表达式。通过对比各方法的代码实现与执行效率,帮助开发者根据数据规模选择最优的去重策略。
JavaScript 数组去重概述
在实际开发中,处理数组数据时经常需要剔除重复项。本文将总结几种在 JavaScript 中实现数组去重的有效方案。
JavaScript 的 Array 类型原生并未提供直接去重的方法,因此需要开发者自行编写逻辑来实现这一功能。
第一种方案:
基于 indexOf 的去重方法
Array.prototype.method1 = function(){
var arr[]; //定义一个临时数组
for(var i = 0; i < this.length; i++){ //循环遍历当前数组
//判断当前数组下标为i的元素是否已经保存到临时数组
//如果已保存,则跳过,否则将此元素保存到临时数组中
if(arr1.indexOf(this[i]) == -1){
arr.push(this[i]);
}
}
return arr;
}
第二种方案:
基于 Hash 表的去重方法
Array.prototype.method2 = function(){
var h{}; //定义一个hash表
var arr[]; //定义一个临时数组
for(var i = 0; i < this.length; i++){ //循环遍历当前数组
//对元素进行判断,看是否已经存在表中,如果存在则跳过,否则存入临时数组
if(!h[this[i]]){
//存入hash表
h[this[i]] = true;
//把当前数组元素存入到临时数组中
arr.push(this[i]);
}
}
return arr;
}
第三种方案:
基于排序与 indexOf 的去重方法
Array.prototype.method3 = function(){
//直接定义结果数组
var arr[this[0]];
for(var i = 1; i < this.length; i++){ //从数组第二项开始循环遍历此数组
//对元素进行判断:
//如果数组当前元素在此数组中第一次出现的位置不是i
//那么我们可以判断第i项元素是重复的,否则直接存入结果数组
if(this.indexOf(this[i]) == i){
arr.push(this[i]);
}
}
return arr;
}
第四种方案:
基于排序与相邻比较的去重方法
Array.prototype.method4 = function(){
//将数组进行排序
this.sort();
//定义结果数组
var arr[this[0]];
for(var i = 1; i < this.length; i++){ //从数组第二项开始循环遍历数组
//判断相邻两个元素是否相等,如果相等说明数据重复,否则将元素写入结果数组
if(this[i] !== arr[arr.length - 1]){
arr.push(this[i]);
}
}
return arr;
}
具体应用示例如下:
var arr = [112,112,34,'你好',112,112,34,'你好','str','str1'];
alert(arr.method3());
方法1和方法3均依赖数组的 indexOf() 方法来查找元素首次出现的位置,这种方式虽然直观,但在大数据量下会消耗较多资源与时间。方法2采用 Hash 表(对象)记录已存在的元素,通过键值引用判断重复性,其效率显著高于数组遍历搜索。方法4则先调用原生 sort() 对数组排序,再依次比较相邻元素,若不相等则保留。读者可通过生成包含50000个随机数的数组,分别运行这四种方法并记录耗时,以直观对比各方案的优劣。
第五种方案:个人较为推荐的一种实现方式。
基于嵌套循环与 Hash 优化的去重方法
function unique(arr) {
var result = [], isRepeated;
for (var i = 0, len = arr.length; i < len; i++) {
isRepeated = false;
for (var j = 0, len = result.length; j < len; j++) {
if (arr[i] == result[j]) {
isRepeated = true;
break;
}
}
if (!isRepeated) {
result.push(arr[i]);
}
}
return result;
}
该思路的核心是将原数组元素逐个迁移至新数组,并在迁移过程中检查是否已存在。若存在则丢弃,否则加入新数组。原始实现使用嵌套循环,效率较低。通过引入 Hash 结构记录已有元素,可避免内层循环,从而大幅提升性能。在 JavaScript 中,利用对象实现 Hash 表非常便捷,改进后的代码如下:
function unique(arr) {
var result = [], hash = {};
for (var i = 0, elem; (elem = arr[i]) != null; i++) {
if (!hash[elem]) {
result.push(elem);
hash[elem] = true;
}
}
return result;
}
完整的测试代码示例。
其他补充实现方案
<script>
var h_hewenqiArray = new Array();
h_hewenqiArray[0] = "jb51.net";
h_hewenqiArray[1] = "easysector";
h_hewenqiArray[2] = "jb51.net";
h_hewenqiArray[3] = "keleyi";
h_hewenqiArray[4] = "keleyi";
h_hewenqiArray[5] = "本站";
h_hewenqiArray[6] = "jb51.net";
h_hewenqiArray[7] = "hoverclock";
h_hewenqiArray[8] = "yestop";
h_hewenqiArray[9] = 163;
h_hewenqiArray[10] = "本站";
h_hewenqiArray[11] = 163;
h_hewenqiArray[12] = "hoverclock";
h_hewenqiArray[13] = "本站";
var h_arrayLength = h_hewenqiArray.length;
document.write("原始数组元素个数:"+h_arrayLength + "<br />");
for (var i = 0; i < h_arrayLength; i++)
{
document.write(h_hewenqiArray[i]+"<br />");
}
function hovercUnique(arr) {
var result = [], hash = {};
for (var i = 0, elem; (elem = arr[i]) != null; i++) {
if (!hash[elem]) {
result.push(elem);
hash[elem] = true;
}
}
return result;
//http://jb51.net.com
}
var h_hewenqiResult = hovercUnique(h_hewenqiArray);
var h_resultLength = h_hewenqiResult.length;
document.write("<br />去重复后数组元素个数:" + h_resultLength + "<br />");
for (var i = 0; i < h_resultLength; i++) {
document.write(h_hewenqiResult[i] + "<br />");
}
</script>
以下是其他开发者提供的补充实现。
代码片段如下:
/// <summary>2 /// 回车键按钮事件(此方法需要在页面加载完后执行,比如在Jquery中的ready中调用)--方法一
/// </summary>
/// 调用示例:
/// var v_Array = new Array(1, 2, 3, 4, 5, 6, 7, 3, 3, 2, 2, 4, 2, 1, 1, 3);
/// var v_ArrayResult = v_Array.deleteEle();
/// alert(v_ArrayResult); //返回结果:, 2, 3, 4, 5, 6, 7
Array.prototype.deleteEle = function () {
var o = {}, newArr = [], i, j;
for (i = 0; i < this.length; i++) {
if (typeof (o[this[i]]) == "undefined") {
o[this[i]] = "";
}
}
for (j in o) {
newArr.push(j)
}
return newArr;
}
/// <summary>
/// 回车键按钮事件(此方法需要在页面加载完后执行,比如在Jquery中的ready中调用)--方法二
/// </summary>
/// 调用示例:
/// var v_Array = new Array(1, 2, 3, 4, 5, 6, 7, 3, 3, 2, 2, 4, 2, 1, 1, 3);
/// var v_ArrayResult = v_Array.deleteEleReg();
/// alert(v_ArrayResult); //返回结果:, 2, 3, 4, 5, 6, 7
Array.prototype.deleteEleReg = function () {
return this.reverse().join(",").match(/([^,]+)(?!.*\1)/ig).reverse();
}
/// <summary>
/// 回车键按钮事件(此方法需要在页面加载完后执行,比如在Jquery中的ready中调用)--方法三
/// </summary>
/// <param name="array">数组</param>
/// 调用示例:
/// var v_Array = new Array(1, 2, 3, 4, 5, 6, 7, 3, 3, 2, 2, 4, 2, 1, 1, 3);
/// alert(unique(v_Array)); //返回结果:, 2, 3, 4, 5, 6, 7
function deleteEleFunction(array) {
var ret = [], record = {}, it, tmp, obj = "__object__", bak = [], i, len;
var type = {
"number": function (n) { return "__number__" + n; },
"string": function (n) { return "__string__" + n; },
"boolean": function (n) { return "__boolean__" + n; },
"undefined": function (n) { return "__undefined__"; },
"object": function (n) {
return n === null ? "__null__" : obj in n ? n[obj] : (n[obj] = obj + bak.push(n));
}
};
for (i = 0, len = array.length; i < len; i++) {
it = array[i]; tmp = type[typeof it](it);
if (!(tmp in record)) { ret.push(it); record[tmp] = true; }
}
for (i = 0, len = bak.length; i < len; delete bak[i++][obj]) { }
return ret;
};
/// <summary>< xmlnamespace prefix ="o" ns ="urn:schemas-microsoft-com:office:office" />
/// 回车键按钮事件(此方法需要在页面加载完后执行,比如在Jquery中的ready中调用)--方法四
/// </summary>
/// 调用示例:
/// var v_Array = new Array(1, 2, 3, 4, 5, 6, 7, 3, 3, 2, 2, 4, 2, 1, 1, 3);
/// var v_ArrayResult = v_Array.deleteEleDis();
/// alert(v_ArrayResult); //返回结果:, 2, 3, 4, 5, 6, 7
Array.prototype.deleteEleDis = function () {
var a = [], b = [];
for (var prop in this) {
var d = this[prop];
if (d === a[prop]) continue; //防止循环到prototype
if (b[d] != 1) {
a.push(d);
b[d] = 1;
}
}
return a;
} JS合并多个数组的三种方法:concat、spread与flat
2026-11-05 17:39:45
JavaScript怎么准确判断数据类型:typeof、instanceof与Object.prototype.toString
2026-11-05 17:09:21
JS中将数组和对象混合组装为JSON字符串
2026-11-05 16:41:42
JS运算符优先级与结合性的区别是什么?
2026-11-05 13:22:02
JS Map怎么只遍历Key或Value
2026-11-05 13:00:36
