总结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 相关文章推荐
javascript firefox 自动加载iframe 自动调整高宽示例
Aug 27 Javascript
IE、FF浏览器下修改标签透明度
Jan 28 Javascript
JavaScript中的全局对象介绍
Jan 01 Javascript
js实现每日自动换一张图片的方法
May 04 Javascript
jquery ztree实现树的搜索功能
Feb 25 Javascript
jquery实用技巧之输入框提示语句
Jul 28 Javascript
Node.js中.pfx后缀文件的处理方法
Mar 10 Javascript
JS监控关闭浏览器操作的实例详解
Sep 12 Javascript
Vue2.0设置全局样式(less/sass和css)
Nov 18 Javascript
微信小程序实现上传图片裁剪图片过程解析
Aug 22 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
Sep 03 Javascript
Javascript节流函数throttle和防抖函数debounce
Dec 03 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生成随机密码
2015/10/30 PHP
js CSS操作方法集合
2008/10/31 Javascript
javascript 对象定义方法 简单易学
2009/03/22 Javascript
由document.body和document.documentElement想到的
2009/04/13 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
2011/03/28 Javascript
读jQuery之十四 (触发事件核心方法)
2011/08/23 Javascript
jQuery文本框(input textare)事件绑定方法教程
2013/04/24 Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
2013/05/19 Javascript
使用js在页面中绘制表格核心代码
2013/09/16 Javascript
JS弹出对话框实现方法(三种方式)
2015/12/18 Javascript
学习JavaScript设计模式之模板方法模式
2016/01/20 Javascript
利用JavaScript判断浏览器类型及版本
2016/08/23 Javascript
React项目动态设置title标题的方法示例
2018/09/26 Javascript
如何在node环境实现“get数据解析”代码实例
2020/07/03 Javascript
[59:15]EG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/29 DOTA
Python 常用 PEP8 编码规范详解
2017/01/22 Python
Django 添加静态文件的两种实现方法(必看篇)
2017/07/14 Python
Python读取Pickle文件信息并计算与当前时间间隔的方法分析
2019/01/30 Python
Python入门Anaconda和Pycharm的安装和配置详解
2019/07/16 Python
Flask框架实现的前端RSA加密与后端Python解密功能详解
2019/08/13 Python
Python实现AI自动抠图实例解析
2020/03/05 Python
python实现凯撒密码、凯撒加解密算法
2020/06/11 Python
解决keras模型保存h5文件提示无此目录问题
2020/07/01 Python
python openCV自制绘画板
2020/10/27 Python
CSS3 background-image颜色渐变的实现代码
2018/09/13 HTML / CSS
css3 自定义字体font-face使用介绍
2014/05/14 HTML / CSS
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
input元素的url类型和email类型简介
2012/07/11 HTML / CSS
html5跨域通讯之postMessage的用法总结
2013/11/07 HTML / CSS
phonegap常用事件总结(必看篇)
2017/03/31 HTML / CSS
德国PC硬件网站:CASEKING
2016/10/20 全球购物
澳大利亚香水在线:Price Rite Mart
2017/12/28 全球购物
OSPF有什么优点?为什么OSPF比RIP收敛快?
2013/02/13 面试题
搞笑征婚广告词
2014/03/17 职场文书
环卫工人慰问信
2015/02/15 职场文书
《我的美好婚事》动画化决定纪念插画与先导PV公开
2022/04/06 日漫