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 相关文章推荐
Javascript 面向对象编程(一) 封装
Aug 28 Javascript
js中判断用户输入的值是否为空的简单实例
Dec 23 Javascript
js写的评论分页(还不错)
Dec 23 Javascript
javascript拖拽应用实例
Mar 25 Javascript
AngularJS ng-bind-template 指令详解
Jul 30 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
Angular实现图片裁剪工具ngImgCrop实践
Aug 17 Javascript
vue 实现全选全不选的示例代码
Mar 29 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
Nov 14 Javascript
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
解决layer弹出层自适应页面大小的问题
Sep 16 Javascript
vue中touch和click共存的解决方式
Jul 28 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 COOKIE设置为浏览器进程
2009/06/21 PHP
php下统计用户在线时间的一种尝试
2010/08/26 PHP
CodeIgniter采用config控制的多语言实现根据浏览器语言自动转换功能
2014/07/18 PHP
php命令行(cli)模式下报require 加载路径错误的解决方法
2015/11/23 PHP
php和html的区别点详细总结
2019/09/24 PHP
Alliance vs AM BO3 第二场2.13
2021/03/10 DOTA
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
2011/06/02 Javascript
javascript变量作用域使用中常见错误总结
2013/03/26 Javascript
Jquery时间验证和转换工具小例子
2013/07/01 Javascript
Seajs的学习笔记
2014/03/04 Javascript
javascript ajax的5种状态介绍
2014/08/18 Javascript
浅谈Javascript如何实现匀速运动
2014/12/19 Javascript
jQuery $.each遍历对象、数组用法实例
2015/04/16 Javascript
JS实现的自定义水平滚动字体插件完整实例
2016/06/17 Javascript
js中的触发事件对象event.srcElement与event.target详解
2017/03/15 Javascript
JavaScript验证知识整理
2017/03/24 Javascript
基于bootstrop常用类总结(推荐)
2017/09/11 Javascript
详解vue-router 初始化时做了什么
2018/06/11 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
2018/07/31 Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
2019/07/04 Javascript
js 对象使用的小技巧实例分析
2019/11/08 Javascript
用pywin32实现windows模拟鼠标及键盘动作
2014/04/22 Python
使用Python编写一个最基础的代码解释器的要点解析
2016/07/12 Python
Python实现字符串匹配的KMP算法
2019/04/04 Python
详解Python中namedtuple的使用
2020/04/27 Python
python如何调用百度识图api
2020/09/29 Python
利用CSS3实现单选框动画特效示例代码
2016/09/26 HTML / CSS
美国电力供应商店/电气批发商:USESI
2018/10/12 全球购物
李维斯法国官网:Levi’s法国
2019/07/13 全球购物
迎元旦广播稿
2014/02/22 职场文书
党的群众路线教育实践活动督导组工作情况汇报
2014/10/28 职场文书
新入职员工工作总结
2015/10/15 职场文书
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python
python中pandas对多列进行分组统计的实现
2021/06/18 Python
Java中Quartz高可用定时任务快速入门
2022/04/03 Java/Android
python可视化分析绘制带趋势线的散点图和边缘直方图
2022/06/25 Python