JS数组去重常用方法实例小结【4种方法】


Posted in Javascript onMay 28, 2018

本文实例讲述了JS数组去重常用方法。分享给大家供大家参考,具体如下:

js数组去重,老生长谈,今天对其进行一番归纳,总结出来4种方法

贴入代码前 ,先对浏览器Array对象进行支持indexOf和forEach的polyfill

Array.prototype.indexOf = Array.prototype.indexOf || function(item) {
  for (var i = 0, j = this.length; i < j; i++) {
    if (this[i] === item) {
      return i;
    }
  }
  return -1;
}
Array.prototype.forEach = Array.prototype.forEach || function(callback, thisArg) {
  if (!callback || typeof callback !== 'function') return;
  for (var i = 0, j = this.length; i < j; i++) {
    callback.call(thisArg, this[i], i, this);
  }
}

方法一:遍历数组,建立新数组,利用indexOf判断是否存在于新数组中,不存在则push到新数组,最后返回新数组

function removeDuplicatedItem(ar) {
  var ret = [];
  for (var i = 0, j = ar.length; i < j; i++) {
    if (ret.indexOf(ar[i]) === -1) {
      ret.push(ar[i]);
    }
  }
  return ret;
}

方法二:遍历数组,利用object对象保存数组值,判断数组值是否已经保存在object中,未保存则push到新数组并用object[arrayItem]=1的方式记录保存

function removeDuplicatedItem2(ar) {
  var tmp = {},
    ret = [];
  for (var i = 0, j = ar.length; i < j; i++) {
    if (!tmp[ar[i]]) {
      tmp[ar[i]] = 1;
      ret.push(ar[i]);
    }
  }
  return ret;
}

方法三:数组下标判断法, 遍历数组,利用indexOf判断元素的值是否与当前索引相等,如相等则加入

function removeDuplicatedItem3(ar) {
  var ret = [];
  ar.forEach(function(e, i, ar) {
    if (ar.indexOf(e) === i) {
      ret.push(e);
    }
  });
  return ret;
}

方法四:数组先排序, 然后比较俩数组一头一尾进行去重

function removeDuplicatedItem4(ar) {
  var ret = [],
    end;
  ar.sort();
  end = ar[0];
  ret.push(ar[0]);
  for (var i = 1; i < ar.length; i++) {
    if (ar[i] != end) {
      ret.push(ar[i]);
      end = ar[i];
    }
  }
  return ret;
}

有其他好的方式 ,欢迎补充。

Javascript 相关文章推荐
制作特殊字的脚本
Jun 26 Javascript
学习ExtJS(二) Button常用方法
Oct 07 Javascript
JQuery选择器特辑 详细小结
May 14 Javascript
对Web开发中前端框架与前端类库的一些思考
Mar 27 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
Oct 12 Javascript
js实现漫天星星效果
Jan 19 Javascript
原生js实现瀑布流布局
Mar 08 Javascript
javascript实现二叉树遍历的代码
Jun 08 Javascript
高性能的javascript之加载顺序与执行原理篇
Jan 14 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
JS求Number类型数组中最大元素方法
Apr 08 Javascript
Javascript查看大图功能代码实现
May 07 Javascript
jQuery中将json数据显示到页面表格的方法
May 27 #jQuery
javascript少儿编程关于返回值的函数内容
May 27 #Javascript
《javascript少儿编程》location术语总结
May 27 #Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
May 27 #Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
May 27 #Javascript
JS面向对象的程序设计相关知识小结
May 26 #Javascript
JavaScript门道之标准库
May 26 #Javascript
You might like
php中get_headers函数的作用及用法的详细介绍
2013/04/27 PHP
php格式文件打开的四种方法
2018/02/24 PHP
PHP echo()函数讲解
2019/02/15 PHP
javascript 二分法(数组array)
2010/04/24 Javascript
javascript日期转换 时间戳转日期格式
2011/11/05 Javascript
js控制表单操作的常用代码小结
2013/08/15 Javascript
使用 Node.js 做 Function Test实现方法
2013/10/25 Javascript
jQuery中:file选择器用法实例
2015/01/04 Javascript
js动态修改表格行colspan列跨度的方法
2015/03/30 Javascript
JavaScript实现的简单烟花特效代码
2015/10/20 Javascript
jquery实现加载进度条提示效果
2015/11/23 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
2016/02/25 Javascript
Jquery技巧(必须掌握)
2016/03/16 Javascript
jQuery ajaxForm()的应用
2016/10/14 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
2017/01/19 Javascript
jQuery实现的简单拖动层示例
2017/02/22 Javascript
微信小程序实现文字跑马灯效果
2020/05/26 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
2019/09/16 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
2020/01/21 Javascript
JS倒计时两种实现方式代码实例
2020/07/27 Javascript
教你学会使用Python正则表达式
2017/09/07 Python
恢复百度云盘本地误删的文件脚本(简单方法)
2017/10/21 Python
使用apidoc管理RESTful风格Flask项目接口文档方法
2018/02/07 Python
Pyinstaller打包.py生成.exe的方法和报错总结
2019/04/02 Python
关于numpy数组轴的使用详解
2019/12/05 Python
python实现快递价格查询系统
2020/03/03 Python
python tkinter的消息框模块(messagebox,simpledialog)
2020/11/07 Python
python动态规划算法实例详解
2020/11/22 Python
巴基斯坦购物网站:Goto
2019/03/11 全球购物
希腊香水和化妆品购物网站:Parfimo.gr
2019/10/03 全球购物
颇特女士香港官网:NET-A-PORTER香港
2021/03/08 全球购物
求职者简历中的自我评价
2013/10/20 职场文书
留学经费担保书
2014/05/12 职场文书
民主评议党员总结
2014/10/20 职场文书
法院执行局工作总结
2015/08/11 职场文书
2016年端午节校园广播稿
2015/12/18 职场文书