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中的细节分析
Jun 30 Javascript
JQuery AJAX 中文乱码问题解决
Jun 05 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
Sep 24 Javascript
js实现点击向下展开的下拉菜单效果代码
Sep 01 Javascript
javascript正则表达式之分组概念与用法实例
Jun 16 Javascript
实例解析jQuery工具函数
Dec 01 Javascript
JS实现两周内自动登录功能
Mar 23 Javascript
js实现适配不同的屏幕大小
Apr 10 Javascript
原生js实现拖拽功能基本思路详解
Apr 18 Javascript
vue-devtools的安装步骤
Apr 23 Javascript
微信小程序获取用户绑定手机号方法示例
Jul 21 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
Dec 16 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正则走开
2008/03/15 PHP
VIM中设置php自动缩进为4个空格的方法详解
2013/06/14 PHP
smarty表格换行实例
2014/12/15 PHP
PHP的Laravel框架结合MySQL与Redis数据库的使用部署
2016/03/21 PHP
Laravel 将数据表的数据导出,并生成seeds种子文件的方法
2019/10/09 PHP
jquery插件 cluetip 关键词注释
2010/01/12 Javascript
js Function类型
2011/12/04 Javascript
JavaScript多并发问题如何处理
2015/10/28 Javascript
详解VueJS 数据驱动和依赖追踪分析
2017/07/26 Javascript
webpack3+React 的配置全解
2017/08/21 Javascript
Vue组件之Tooltip的示例代码
2017/10/18 Javascript
Vue.js实现可排序的表格组件功能示例
2019/02/19 Javascript
nodejs微信开发之接入指南
2019/03/17 NodeJs
Vue CLI2升级至Vue CLI3的方法步骤
2019/05/20 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
2019/11/25 Javascript
在Vue项目中使用Typescript的实现
2019/12/19 Javascript
Nuxt 项目性能优化调研分析
2020/11/07 Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
2021/01/18 Javascript
Python中shutil模块的常用文件操作函数用法示例
2016/07/05 Python
非递归的输出1-N的全排列实例(推荐)
2017/04/11 Python
python读写json文件的简单实现
2017/04/11 Python
Python编程生成随机用户名及密码的方法示例
2017/05/05 Python
Python数据结构与算法之使用队列解决小猫钓鱼问题
2017/12/14 Python
python 快速把超大txt文件转存为csv的实例
2018/10/26 Python
详解django自定义中间件处理
2018/11/21 Python
Python 列表的清空方式
2020/01/13 Python
Python对excel的基本操作方法
2021/02/18 Python
H5最强接口之canvas实现动态图形功能
2019/05/31 HTML / CSS
西安众合通用.net笔试题
2013/03/18 面试题
力学专业毕业生自荐信
2013/11/17 职场文书
小学生清明节演讲稿
2014/09/05 职场文书
oracle通过存储过程上传list保存功能
2021/05/12 Oracle
nginx+lua单机上万并发的实现
2021/05/31 Servers
使用Ajax实现进度条的绘制
2022/04/07 Javascript
Win11安装升级时提示“该电脑必须支持安全启动”
2022/04/19 数码科技
Redis过期数据是否会被立马删除
2022/07/23 Redis