JS实现数组去重方法总结(六种方法)

发布时间 - 2026-01-11 02:19:57    点击率:

方法一:

双层循环,外层循环元素,内层循环时比较值

如果有相同的值则跳过,不相同则push进数组

Array.prototype.distinct = function(){
 var arr = this,
  result = [],
  i,
  j,
  len = arr.length;
 for(i = 0; i < len; i++){
  for(j = i + 1; j < len; j++){
   if(arr[i] === arr[j]){
    j = ++i;
   }
  }
  result.push(arr[i]);
 }
 return result;
}
var arra = [1,2,3,4,4,1,1,2,1,1,1];
arra.distinct();    //返回[3,4,2,1]

方法二:利用splice直接在原数组进行操作

双层循环,外层循环元素,内层循环时比较值

值相同时,则删去这个值

注意点:删除元素之后,需要将数组的长度也减1.

Array.prototype.distinct = function (){
 var arr = this,
  i,
  j,
  len = arr.length;
 for(i = 0; i < len; i++){
  for(j = i + 1; j < len; j++){
   if(arr[i] == arr[j]){
    arr.splice(j,1);
    len--;
    j--;
   }
  }
 }
 return arr;
};
var a = [1,2,3,4,5,6,5,3,2,4,56,4,1,2,1,1,1,1,1,1,];
var b = a.distinct();
console.log(b.toString()); //1,2,3,4,5,6,56

优点:简单易懂

缺点:占用内存高,速度慢

方法三:利用对象的属性不能相同的特点进行去重

Array.prototype.distinct = function (){
 var arr = this,
  i,
  obj = {},
  result = [],
  len = arr.length;
 for(i = 0; i< arr.length; i++){
  if(!obj[arr[i]]){ //如果能查找到,证明数组元素重复了
   obj[arr[i]] = 1;
   result.push(arr[i]);
  }
 }
 return result;
};
var a = [1,2,3,4,5,6,5,3,2,4,56,4,1,2,1,1,1,1,1,1,];
var b = a.distinct();
console.log(b.toString()); //1,2,3,4,5,6,56

方法四:数组递归去重

运用递归的思想

先排序,然后从最后开始比较,遇到相同,则删除

Array.prototype.distinct = function (){
 var arr = this,
  len = arr.length;
 arr.sort(function(a,b){  //对数组进行排序才能方便比较
  return a - b;
 })
 function loop(index){
  if(index >= 1){
   if(arr[index] === arr[index-1]){
    arr.splice(index,1);
   }
   loop(index - 1); //递归loop函数进行去重
  }
 }
 loop(len-1);
 return arr;
};
var a = [1,2,3,4,5,6,5,3,2,4,56,4,1,2,1,1,1,1,1,1,56,45,56];
var b = a.distinct();
console.log(b.toString());  //1,2,3,4,5,6,45,56

方法五:利用indexOf以及forEach

Array.prototype.distinct = function (){
 var arr = this,
  result = [],
  len = arr.length;
 arr.forEach(function(v, i ,arr){  //这里利用map,filter方法也可以实现
  var bool = arr.indexOf(v,i+1);  //从传入参数的下一个索引值开始寻找是否存在重复
  if(bool === -1){
   result.push(v);
  }
 })
 return result;
};
var a = [1,1,1,1,1,1,1,1,1,2,2,2,2,2,2,3,3,3,3,3,3,3,2,3,3,2,2,1,23,1,23,2,3,2,3,2,3];
var b = a.distinct();
console.log(b.toString()); //1,23,2,3

方法六:利用ES6的set

Set数据结构,它类似于数组,其成员的值都是唯一的。

利用Array.from将Set结构转换成数组

function dedupe(array){
 return Array.from(new Set(array));
}
dedupe([1,1,2,3]) //[1,2,3]

拓展运算符(...)内部使用for...of循环

let arr = [1,2,3,3];
let resultarr = [...new Set(arr)]; 
console.log(resultarr); //[1,2,3]

下面给大家补充介绍合并数组并去重的方法

一、concat()方法

思路:concat() 方法将传入的数组或非数组值与原数组合并,组成一个新的数组并返回。该方法会产生一个新的数组。

function concatArr(arr1, arr2){
  var arr = arr1.concat(arr2);
  arr = unique1(arr);//再引用上面的任意一个去重方法
  return arr;
}

二、Array.prototype.push.apply()

思路:该方法优点是不会产生一个新的数组。

 var a = [1, 2, 3];
 var b = [4, 5, 6];
 Array.prototype.push.apply(a, b);//a=[1,2,3,4,5,6]
 //等效于:a.push.apply(a, b);
 //也等效于[].push.apply(a, b); 
 function concatArray(arr1,arr2){
   Array.prototype.push.apply(arr1, arr2);
   arr1 = unique1(arr1);
   return arr1;
 }

总结

以上所述是小编给大家介绍的JS实现数组去重方法总结(六种方法),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!


# js  # 数组去重  # 实现数组去重  # js数组去重的常用方法总结  # js数组去重的5种算法实现  # 史上最全JavaScript数组去重的十种方法(推荐)  # 高性能js数组去重(12种方法  # 史上最全)  # JavaScript中数组去重的5种方法  # js数组去重的11种方法  # 七种JS实现数组去重的方式  # JavaScript数组去重的15种方法总结  # 递归  # 给大家  # 小编  # 在此  # 数据结构  # 可以实现  # 转换成  # 类似于  # 所述  # 给我留言  # 跳过  # 速度慢  # 六种  # 感谢大家  # 是否存在  # 或非  # 运算符  # 法会  # 疑问请  # 有任何 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: 音乐网站服务器如何优化API响应速度?  Linux系统命令中tree命令详解  利用vue写todolist单页应用  弹幕视频网站制作教程下载,弹幕视频网站是什么意思?  laravel怎么为API路由添加签名中间件保护_laravel API路由签名中间件保护方法  Laravel怎么实现一对多关联查询_Laravel Eloquent模型关系定义与预加载【实战】  百度浏览器如何管理插件 百度浏览器插件管理方法  Laravel的路由模型绑定怎么用_Laravel Route Model Binding简化控制器逻辑  详解MySQL数据库的安装与密码配置  php在windows下怎么调试_phpwindows环境调试操作说明【操作】  高端建站三要素:定制模板、企业官网与响应式设计优化  Laravel怎么实现验证码功能_Laravel集成验证码库防止机器人注册  Laravel如何生成API文档?(Swagger/OpenAPI教程)  如何在IIS中新建站点并配置端口与物理路径?  google浏览器怎么清理缓存_谷歌浏览器清除缓存加速详细步骤  长沙做网站要多少钱,长沙国安网络怎么样?  利用python获取某年中每个月的第一天和最后一天  详解Oracle修改字段类型方法总结  实例解析angularjs的filter过滤器  大连 网站制作,大连天途有线官网?  Java类加载基本过程详细介绍  如何在阿里云虚拟主机上快速搭建个人网站?  Python企业级消息系统教程_KafkaRabbitMQ高并发应用  太平洋网站制作公司,网络用语太平洋是什么意思?  Laravel观察者模式如何使用_Laravel Model Observer配置  韩国代理服务器如何选?解析IP设置技巧与跨境访问优化指南  Laravel中的Facade(门面)到底是什么原理  Laravel如何实现URL美化Slug功能_Laravel使用eloquent-sluggable生成别名【方法】  C#如何调用原生C++ COM对象详解  javascript如何操作浏览器历史记录_怎样实现无刷新导航  Swift中swift中的switch 语句  Laravel控制器是什么_Laravel MVC架构中Controller的作用与实践  Laravel Session怎么存储_Laravel Session驱动配置详解  Android利用动画实现背景逐渐变暗  如何快速配置高效服务器建站软件?  Linux安全能力提升路径_长期防护思维说明【指导】  如何在建站主机中优化服务器配置?  INTERNET浏览器怎样恢复关闭标签页_INTERNET浏览器标签恢复快捷键与方法【指南】  phpredis提高消息队列的实时性方法(推荐)  香港网站服务器数量如何影响SEO优化效果?  Laravel模型关联查询教程_Laravel Eloquent一对多关联写法  java中使用zxing批量生成二维码立牌  宙斯浏览器文件分类查看教程 快速筛选视频文档与图片方法  JavaScript实现Fly Bird小游戏  Midjourney怎么调整光影效果_Midjourney光影调整方法【指南】  如何在阿里云高效完成企业建站全流程?  网站制作价目表怎么做,珍爱网婚介费用多少?  Laravel如何优化应用性能?(缓存和优化命令)  JavaScript如何实现继承_有哪些常用方法  BootStrap整体框架之基础布局组件