本文汇总了JavaScript中删除数组重复元素的多种实现方案,涵盖利用indexOf判断、对象键值交换及遍历过滤等经典算法。通过对比不同方法的逻辑与代码实现,帮助开发者理解去重原理,适用于前端面试及实际项目开发中的数据处理场景。
JavaScript数组去重方法概述
本文详细介绍了几种在JavaScript中移除数组重复元素的有效方法,旨在为读者提供实用的参考与学习资源。
数组去重是前端开发中常见的高频面试题,本文重点讲解几种主流的实现思路,希望能对初学者掌握相关技术有所帮助。
//数组去重的方法
Array.prototype.unique=function(){
//集中声明变量
var
oldArr=this,
newArr=[oldArr[0]],
len=oldArr.length,
i=1;
//过滤空数组
if(!len) return this;
//过滤重复元素
for(;i<len;i++){
newArr.indexOf(oldArr[i])<0 ? newArr.push(_this) : '';
}
//返回过滤后的数组没有影响原数组
return newArr;
}
var arr=['a','a','b','a','c','d'];
console.log(arr.unique());
//["a", "b", "c", "d", unique: function]
尽管网络上已存在大量相关教程,且部分个人实现逻辑可能不够完善,但清晰的代码逻辑有助于后续扩展,例如支持对象元素去重或多数组并行处理。下文将列举几种典型实现方法供综合比较。
方法一:扩展原型与索引判断
第一种实现方式:
function oSort(arr)
{
var result ={};
var newArr=[];
for(var i=0;i
{
if(!result[arr[i]])
{
newArr.push(arr[i])
result[arr[i]]=1
}
}
return newArr
}
方法二:对象键值统计法
第二种实现方式:
该方法通过遍历目标数组arr,将元素逐一尝试放入新数组tmp中。只有当元素在arr中未被判定为重复时,才将其加入tmp。此过程主要依赖for...in循环结构与indexOf()查找函数。
var student = ['qiang','ming','tao','li','liang','you','qiang','tao'];
function unique(arr){
// 遍历arr,把元素分别放入tmp数组(不存在才放)
var tmp = new Array();
for(var i in arr){
//该元素在tmp内部不存在才允许追加
if(tmp.indexOf(arr[i])==-1){
}
}
return tmp;
}
方法三:遍历与indexOf过滤
第三种实现方式:
此方法的核心思路是将目标数组arr的元素值作为键、索引位置作为值进行调换。由于对象键名具有唯一性,重复元素在转换过程中会被自动覆盖,从而实现去重效果。转换后的数据结构示例类似于array('qiang'=>1,'ming'=>1,'tao'=>1)。
<script type="text/javascript">
var student = ['qiang','ming','tao','li','liang','you','qiang','tao'];
function unique(arr){
var tmp = new Array();
for(var m in arr){
tmp[arr[m]]=1;
}
//再把键和值的位置再次调换
var tmparr = new Array();
for(var n in tmp){
tmparr.push(n);
}
return tmparr;
}
</script>
方法四:键值位置互换技巧
第四种实现方式:
/**
* 去除数组重复元素
*/
function uniqueArray(data){
data = data || [];
var a = {};
for (var i=0; i<data.length; i++) {
var v = data[i];
if (typeof(a[v]) == 'undefined'){
a[v] = 1;
}
};
data.length=0;
for (var i in a){
data[data.length] = i;
}
return data;
}
方法五:综合去重实现
上述几种方法在核心逻辑上各有相似之处,但第三种方法通过键值互换的思路显得尤为巧妙。
希望本文提供的JavaScript程序设计思路能为读者带来实际帮助。