JavaScript 删除数组重复元素的五种常用方法解析

作者:拾光时间:2026-10-29 11:45:23浏览:282

本文汇总了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程序设计思路能为读者带来实际帮助。

作者最新文章