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 07 Javascript
jquery图片不完全按比例自动缩小的简单代码
Jul 29 Javascript
js动态添加事件并可传参数示例代码
Oct 21 Javascript
用js闭包的方法实现多点标注冒泡示例
May 29 Javascript
javascript正则表达式中的replace方法详解
Apr 20 Javascript
JS实现的表格行鼠标点击高亮效果代码
Nov 27 Javascript
SWFUpload多文件上传及文件个数限制的方法
May 31 Javascript
jQuery Validate 数组 全部验证问题
Jan 12 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
Apr 12 Javascript
JSONP原理及应用实例详解
Sep 13 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
Oct 31 Javascript
图文详解vue框架安装步骤
Feb 12 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中操作MySQL数据库的一些要注意的问题
2006/10/09 PHP
destoon常用的安全设置概述
2014/06/21 PHP
PHP中is_dir()函数使用指南
2015/05/08 PHP
Extjs列表详细信息窗口新建后自动加载解决方法
2010/04/02 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
2013/07/15 Javascript
Jquery获得控件值的三种方法总结
2014/02/13 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
2015/03/14 Javascript
jQuery获得document和window对象宽度和高度的方法
2015/03/25 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
2016/06/14 Javascript
js的三种继承方式详解
2017/01/21 Javascript
jQuery实现简单的手风琴效果
2020/04/17 jQuery
vue微信分享到朋友圈 vue微信发送给好友
2018/11/28 Javascript
微信小程序如何实现五星评价功能
2019/10/15 Javascript
jQuery HTML设置内容和属性操作实例分析
2020/05/20 jQuery
antd日期选择器禁止选择当天之前的时间操作
2020/10/29 Javascript
[02:00]DOTA2英雄COSPLAY闹市街头巡游助威2015国际邀请赛
2015/08/02 DOTA
[06:25]第二届DOTA2亚洲邀请赛主赛事第二天比赛集锦.mp4
2017/04/03 DOTA
[01:20]DOTA2 齐天大圣至宝动态展示
2016/12/13 DOTA
[01:08:00]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python中set()函数简介及实例解析
2018/01/09 Python
python使用锁访问共享变量实例解析
2018/02/08 Python
Python之文字转图片方法
2018/05/10 Python
python中的for循环
2018/09/28 Python
python opencv摄像头的简单应用
2019/06/06 Python
Python matplotlib学习笔记之坐标轴范围
2019/06/28 Python
时尚的CSS3进度条效果
2012/02/22 HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
2017/07/11 HTML / CSS
美国知名的在线旅游服务网站:Priceline
2016/07/23 全球购物
俄罗斯游戏商店:Buka
2020/03/01 全球购物
《孔子游春》教学反思
2014/02/25 职场文书
文明和谐家庭事迹材料
2014/05/18 职场文书
员工安全承诺书
2014/05/22 职场文书
优秀三好学生事迹材料
2014/08/31 职场文书
2014年设计师工作总结
2014/11/25 职场文书
python实现剪贴板的操作
2021/07/01 Python
Vue全局事件总线你了解吗
2022/02/24 Vue.js