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


Posted in Javascript onJuly 14, 2017

方法一:

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

如果有相同的值则跳过,不相同则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实现数组去重方法总结(六种方法),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript中的for in循环和hasOwnProperty结合使用
Jun 05 Javascript
jquery中event对象属性与方法小结
Dec 18 Javascript
jquery实现页面图片等比例放大缩小功能
Feb 12 Javascript
PHP+mysql+Highcharts生成饼状图
May 04 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
Dec 08 Javascript
最简单的JavaScript图片轮播代码(两种方法)
Dec 18 Javascript
EasyUI布局 高度自适应
Jun 04 Javascript
javaScript实现滚动条事件详解
Mar 24 Javascript
Vue源码学习之初始化模块init.js解析
Nov 02 Javascript
详解webpack与SPA实践之开发环境搭建
Dec 18 Javascript
Webpack优化配置缩小文件搜索范围
Dec 25 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
Jun 11 Javascript
Javascript中Promise的四种常用方法总结
Jul 14 #Javascript
js学习心得_一个简单的动画库封装tween.js
Jul 14 #Javascript
详解VUE中v-bind的基本用法
Jul 13 #Javascript
vue通过watch对input做字数限定的方法
Jul 13 #Javascript
深入理解vue $refs的基本用法
Jul 13 #Javascript
js自定义弹框插件的封装
Aug 24 #Javascript
解决vue里碰到 $refs 的问题的方法
Jul 13 #Javascript
You might like
对Session和Cookie的区分与解释
2007/03/16 PHP
php GD绘制24小时柱状图
2008/06/28 PHP
PHP clearstatcache()函数详解
2010/03/02 PHP
THINKPHP+JS实现缩放图片式截图的实现
2010/03/07 PHP
8个出色的WordPress SEO插件收集
2011/02/26 PHP
PhpDocumentor 2安装以及生成API文档的方法
2014/05/21 PHP
PHP实现对xml的增删改查操作案例分析
2017/05/19 PHP
File文件控件,选中文件(图片,flash,视频)即立即预览显示
2009/04/09 Javascript
jQuery之排序组件的深入解析
2013/06/19 Javascript
给事件响应函数传参数的四种方式小结
2013/12/05 Javascript
Jquery解析json数据详解
2013/12/26 Javascript
jQuery中is()方法用法实例
2015/01/06 Javascript
jquery实现动态操作select选中
2015/02/11 Javascript
浅谈javascript获取元素transform参数
2015/07/24 Javascript
jQuery图片左右滚动代码 有左右按钮实例
2016/06/20 Javascript
微信小程序实战之自定义模态弹窗(8)
2017/04/18 Javascript
微信小程序开发animation心跳动画效果
2017/08/16 Javascript
vue短信验证性能优化如何写入localstorage中
2018/04/25 Javascript
jquery图片预览插件实现方法详解
2019/07/18 jQuery
vue动态禁用控件绑定disable的例子
2019/10/28 Javascript
javascript实现弹出层效果
2019/12/10 Javascript
[41:21]夜魇凡尔赛茶话会 第三期02:看图识人
2021/03/11 DOTA
Python设置默认编码为utf8的方法
2016/07/01 Python
20招让你的Python飞起来!
2016/09/27 Python
python将处理好的图像保存到指定目录下的方法
2019/01/10 Python
对Python的多进程锁的使用方法详解
2019/02/18 Python
基于wxPython的GUI实现输入对话框(1)
2019/02/27 Python
python根据txt文本批量创建文件夹
2020/12/08 Python
关于PyTorch源码解读之torchvision.models
2019/08/17 Python
Python __slots__的使用方法
2020/11/15 Python
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
Guess欧洲官网:美国服饰品牌
2019/08/06 全球购物
《跨越百年的美丽》教学反思
2014/02/11 职场文书
乡镇保密工作承诺书
2015/05/04 职场文书
离职证明范本
2015/06/12 职场文书
Python matplotlib绘制雷达图
2022/04/13 Python