总结Javascript中数组各种去重的方法


Posted in Javascript onOctober 04, 2016

前言

在做javascript开发的时候,经常会遇到数组元素重复的问题,而javascript Array又没有直接提供方法解决此问题,还需要自己去实现。这篇文章总结了Javascript中数组各种去重的方法,下面来一起看看。

方法一 利用对象属性不重复的特性

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;
};

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

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;
}

方法三 数组递归去重

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;
};

方法四 利用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;
};

方法五 利用ES6的set

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

方法六 拓展运算符(…)内部使用for…of循环

let arr = [3,5,2,2,5,5];
let unique = [...new Set(arr)];  //[3,5,2]

总结

好了,以上就是这篇文章的全部内容了,个人比较喜欢使用方法一,不会对原数组进行修改,希望这篇文章对大家能有所帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
JMenuTab简单使用说明
Mar 13 Javascript
js AspxButton的客户端操作
Jun 26 Javascript
JQuery异步加载无限下拉框级联功能实现示例
Feb 19 Javascript
通过jquery 获取URL参数并进行转码
Aug 18 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
Aug 04 Javascript
JS获取随机数和时间转换的简单实例
Jul 10 Javascript
BootStrap注意事项小结(五)表单
Mar 10 Javascript
详解VUE 定义全局变量的几种实现方式
Jun 01 Javascript
基于JavaScript实现微信抢红包功能
Jul 20 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
Jul 13 Javascript
vue项目前端错误收集之sentry教程详解
May 27 Javascript
基于html+css+js实现简易计算器代码实例
Feb 28 Javascript
Javascript中arguments对象的详解与使用方法
Oct 04 #Javascript
js判断浏览器是否支持严格模式的方法
Oct 04 #Javascript
浅谈jquery高级方法描述与应用
Oct 04 #Javascript
vue.js中$watch的用法示例
Oct 04 #Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
Oct 04 #Javascript
用jquery快速解决IE输入框不能输入的问题
Oct 04 #Javascript
JavaScript九九乘法口诀表的简单实现
Oct 04 #Javascript
You might like
PHP面向对象之旅:深入理解static变量与方法
2014/01/06 PHP
php结合正则批量抓取网页中邮箱地址
2015/05/19 PHP
PHP+JS实现大规模数据提交的方法
2015/07/02 PHP
推荐一些非常不错的javascript学习资源站点
2007/08/29 Javascript
js onpropertychange输入框 事件获取属性
2009/03/26 Javascript
js获取html参数及向swf传递参数应用介绍
2013/02/18 Javascript
jquery自动填充勾选框即把勾选框打上true
2014/03/24 Javascript
Javascript 读取操作Sql中的Xml字段
2014/10/09 Javascript
window.location 对象所包含的属性
2014/10/10 Javascript
实例详解ECMAScript5中新增的Array方法
2016/04/05 Javascript
有关jquery与DOM节点操作方法和属性记录
2016/04/15 Javascript
JavaScript中Number对象的toFixed() 方法详解
2016/09/02 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
2017/01/12 Javascript
TypeScript入门-基本数据类型
2017/03/28 Javascript
vue.js element-ui validate中代码不执行问题解决方法
2017/12/18 Javascript
JS实现标签滚动切换效果
2017/12/25 Javascript
webpack公共组件引用路径简化小技巧
2018/06/15 Javascript
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
vue遍历对象中的数组取值示例
2019/11/07 Javascript
Python中的Descriptor描述符学习教程
2016/06/02 Python
Python实现将16进制字符串转化为ascii字符的方法分析
2017/07/21 Python
Python实现求解括号匹配问题的方法
2018/04/17 Python
Python 字符串与二进制串的相互转换示例
2018/07/23 Python
python绘制热力图heatmap
2020/03/23 Python
python爬取微信公众号文章的方法
2019/02/26 Python
使用tensorboard可视化loss和acc的实例
2020/01/21 Python
阿联酋航空官方网站:Emirates
2017/10/17 全球购物
荟萃全球保健品:维他购
2018/05/09 全球购物
Why we need EJB
2016/10/20 面试题
标准自荐信范文
2014/01/29 职场文书
《蒙娜丽莎之约》教学反思
2014/02/27 职场文书
课堂教学改革实施方案
2014/03/17 职场文书
个人委托函范文
2015/01/29 职场文书
预防艾滋病宣传活动总结
2015/05/09 职场文书
新员工试用期工作总结2015
2015/05/28 职场文书
2016年村干部公开承诺书(公开承诺事项)
2016/03/25 职场文书