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 相关文章推荐
解决表单中第一个非隐藏的元素获得焦点的一个方案
Oct 26 Javascript
jQuery 打造动态下滑菜单实现说明
Apr 15 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
Jun 19 Javascript
javascript中定义类的方法详解
Feb 10 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
Mar 19 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
Sep 10 Javascript
Bootstrap按钮下拉菜单组件详解
May 10 Javascript
JS解决移动web开发手机输入框弹出的问题
Mar 31 Javascript
js实现水平滚动菜单导航
Jul 21 Javascript
快速了解vue-cli 3.0 新特性
Feb 28 Javascript
javascript实现blob加密视频源地址的方法
Aug 08 Javascript
浅谈React中组件逻辑复用的那些事儿
May 21 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
特详细的PHPMYADMIN简明安装教程
2008/08/01 PHP
PHP下对字符串的递增运算代码
2010/08/21 PHP
php的memcache类分享(memcache队列)
2014/03/26 PHP
php验证session无效的解决方法
2014/11/04 PHP
thinkphp项目部署到Linux服务器上报错“模板不存在”如何解决
2016/04/27 PHP
PHP优化之批量操作MySQL实例分析
2020/04/23 PHP
面向对象继承实例(a如何继承b问题)(自写)
2013/07/01 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
2016/07/09 Javascript
JS中使用FormData上传文件、图片的方法
2016/08/07 Javascript
jQuery解析XML 详解及方法总结
2016/09/28 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
2017/04/17 jQuery
angularjs $http实现form表单提交示例
2017/06/09 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
2017/07/10 Javascript
JavaScript实现随机数生成器(去重)
2017/10/13 Javascript
Angular4集成ng2-file-upload的上传组件
2018/03/14 Javascript
Vue实现固定定位图标滑动隐藏效果
2019/05/30 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
2020/02/03 Javascript
vue使用axios实现excel文件下载的功能
2020/07/16 Javascript
Python中暂存上传图片的方法
2015/02/18 Python
Python random模块用法解析及简单示例
2017/12/18 Python
PyQt5每天必学之组合框
2018/04/20 Python
Python3实现爬取简书首页文章标题和文章链接的方法【测试可用】
2018/12/11 Python
如何在mac环境中用python处理protobuf
2019/12/25 Python
python基于property()函数定义属性
2020/01/22 Python
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
2012/12/13 HTML / CSS
大学生工作推荐信范文
2013/12/02 职场文书
计算机专业毕业生自荐信范文
2014/03/06 职场文书
信用社竞聘演讲稿
2014/05/16 职场文书
企业读书活动总结
2014/06/30 职场文书
网站文案策划岗位职责
2015/04/14 职场文书
第一书记观后感
2015/06/08 职场文书
居安思危观后感
2015/06/11 职场文书
《七律·长征》教学反思
2016/02/16 职场文书
windows安装python超详细图文教程
2021/05/21 Python
详解盒子端CSS动画性能提升
2021/05/24 HTML / CSS
对Keras自带Loss Function的深入研究
2021/05/25 Python