JavaScript数组去重方法汇总:从indexOf到ES6 Set
作者:代码拾荒时间:2026-10-29 12:53:11浏览:484
本文汇总了JavaScript中实现数组去重的多种方案。首先介绍基于indexOf判断新数组与旧数组的两种传统逻辑,随后解析利用JS对象作为Hash表进行快速查找的实现方式。此外,还展示了通过扩展Array原型链封装去重函数的做法,并重点讲解ES6新增的Set数据结构及其增删遍历操作,为开发者提供从基础到现代的完整去重技术参考。
数组去重方法概述
三种方案
基于indexOf的去重方案
借助indexOf检测新数组
underscore.js内部同样采用类似的indexOf机制
//传入数组
function unique1(arr){
var tmpArr = [];
for(var i=0; i<arr.length; i++){
//如果当前数组的第i已经保存进了临时数组,那么跳过,
//否则把当前项push到临时数组里面
if(tmpArr.indexOf(arr[i]) == -1){
tmpArr.push(arr[i]);
}
}
return tmpArr;
}
借助indexOf检测旧数组
function unique2(arr){
var tmpArr = []; //结果数组
for(var i=0; i<arr.length; i++){
//如果当前数组的第i项在当前数组中第一次出现的位置不是i,
//那么表示第i项是重复的,忽略掉。否则存入结果数组
if(arr.indexOf(arr[i]) == i){
tmpArr.push(arr[i]);
}
}
return tmpArr;
}
利用Hash表进行去重
借助hash表查找
此处利用了JS对象底层即为hash表的特性
function unique3(arr){
var tmpArr = [], hash = {};//hash为hash表
for(var i=0;i<arr.length;i++){
if(!hash[arr[i]]){//如果hash表中没有当前项
hash[arr[i]] = true;//存入hash表
tmpArr.push(arr[i]);//存入临时数组
}
}
return tmpArr;
}
数组原型扩展与ES6 Set应用
数组原型扩展
Array.prototype.unique1 = function (){
var tmpArr = [];
for (var i = 0; i < this.length; i++){
if (tmpArr.indexOf(this[i]) == -1){
tmpArr.push(this[i]);
}
}
return tmpArr;
}
Array.prototype.unique2 = function(){
var tmpArr = []; //结果数组
for(var i = 0; i < this.length; i++){
if (this.indexOf(this[i]) == i){
tmpArr.push(this[i]);
}
}
return tmpArr;
}
Array.prototype.unique3 = function(){
var tmpArr=[], hash = {};
for(var i = 0; i < this.length; i++){
if (!hash[this[i]]){
hash[this[i]] = true;
tmpArr.push(this[i]);
}
}
return tmpArr;
}
应用Set结构
Set与Map属于ES6新增数据结构 Set可直接存储不重复的一组key,key可为对象、字符串等 构建set实例
var s = new Set([1, 2, 3,]);
s; // Set {1, 2, 3}
添加元素操作
>>> s.add(4)
>>> s
{1, 2, 3, 4}
>>> s.add(4)
>>> s
{1, 2, 3, 4}//重复元素不会被添加
移除元素操作
s; // Set {1, 2, 3, 4}
s.delete(3);
s; // Set {1, 2, 4}
遍历元素操作
Map与Set不支持下标访问 ES6标准引入新的iterable类型,Array、Map和Set均属于iterable类型
var s = new Set(['A', 'B', 'C']);
for (var x of s) { // 遍历Set
alert(x);
}
或直接调用iterable内置的forEach方法 forEach方法由ES5.1标准引入
var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, set) {
alert(element);
});
上述内容即本文全部要点,期望大家喜爱。
作者最新文章
JavaScript异步发送HTTP请求时怎么优雅地处理错误
2026-11-05 17:10:44
5款主流JS在线运行工具对比:CodePen、JSFiddle与StackBlitz怎么选
2026-11-05 17:04:04
JavaScript入门书籍避坑:这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00
