JavaScript数组去重的几种方法分享

数组去重,一般需求是给你一个数组,调用去重方法,返回数值副本,副本中没有重复元素。一般来说,两个元素通过 === 比较返回 true 的视为相同元素,需要去重,所以,1 和 “1” 是不同的元素,1 和 new number(1) 是不同的元素,{} 和 {} 是不同的元素(引用不同)。(当然如果需求认为 {} 和 {} 算作相同的元素,那么解法就不一样了),本文主要和大家分享javascript数组去重的几种方法。

method 1

使用两重循环

function unique(arr) { var res = []; for(var i = 0, len = arr.length;i < len; i++) {  var item = arr[i];  for(var j = 0, jLen = res.length; j<jLen; j++) {   if(item == res[j]) break;  }  if(j == jLen) res.push(item); } return res;}

登录后复制

method 2

function unique(arr) { var ret = [] for (var i = 0; i < arr.length; i++) { var item = arr[i] if (ret.indexOf(item) === -1) {  ret.push(item) } } return ret}

登录后复制

这里判断可以使用一个语法糖

立即学习“Java免费学习笔记(深入)”;

function unique(arr) { var res = []; for(var i = 0, len = arr.length;i < len; i++) {  var item = arr[i];  (res.indexOf(item) === -1) && res.push(item); } return res;}

登录后复制

但是在低版本浏览器并没有 indexOf

var indexOf = [].indexOf ? function(arr, item) {  return arr.indexOf(item) } : function indexOf(arr, item) {  for (var i = 0; i < arr.length; i++) {  if (arr[i] === item) {   return i  }  }  return -1 }function unique(arr) { var ret = [] for (var i = 0; i < arr.length; i++) { var item = arr[i] if (indexOf(ret, item) === -1) {  ret.push(item) } } return ret}

登录后复制

method3

使用两重循环的另外一种比较方式,前面是将原数组的元素和结果数组一一比较,下面我们可以将原数组的重复元素的最后一个元素放入数组中

function unique(arr) { var ret = []; var len = arr.length; var isRepeat; for(var i=0; i<len; i++) {  isRepeat = false;  for(var j=i+1; j<len; j++) {   if(arr[i] === arr[j]){    isRepeat = true;    break;   }  }  if(!isRepeat){   ret.push(arr[i]);  } } return ret;}

登录后复制

这里还有一个优化的版本

function unique(a) { var res = []; for (var i = 0, len = a.length; i < len; i++) { for (var j = i + 1; j < len; j++) {  // 这一步十分巧妙  // 如果发现相同元素  // 则 i 自增进入下一个循环比较  if (a[i] === a[j])  j = ++i; //j = i = i + 1; } res.push(a[i]); } return res;}

登录后复制

method4

用 javascript 中的 object 对象来当作 哈希表

function dedup(arr) { var hashTable = {}; return arr.filter(function(value,index,arr){  var key = JSON.stringify(value);  var match = Boolean(hashTable[key]);  return (match ? false : hashTable[key] = true); });}

登录后复制

因为 Object 的 key 值都是 String 类型,所以对于 1 和 “1” 无法分别,我们可以稍微改进下,将类型也存入 key 中

function dedup(arr) { var ret = []; var hash = {}; for(var i = 0; i < arr.length; i++) {  var item = arr[i];  var key = typeof(item) + item;  if(hash[key] !== 1) {   ret.push(item)   hash[key] = 1;  } } return ret;}

登录后复制

相关推荐:

PHP实现数组去重的方法代码

JS简单实现数组去重的方法分析

jQuery简单实现对数组去重及排序操作详解

以上就是JavaScript数组去重的几种方法分享的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2786971.html

(0)
上一篇 2025年3月8日 17:58:50
下一篇 2025年2月22日 21:28:49

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • js实现抽奖系统功能代码分享

    本文主要和大家详细介绍了一个关于抽奖系统的题目之js抽奖系统功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助大家运用js开发一个抽系统。 要求实现功能: 1.点击左侧按键,开始抽奖,点击右侧按键,停止抽奖; 2.敲击回车键…

    编程技术 2025年3月8日
    200
  • JavaScript事件处理程序详解

    本文主要和大家详细介绍javascript事件处理程序的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。 nbsp;html>    DOM0级DOM2级 function show() { alert(…

    编程技术 2025年3月8日
    200
  • 全面讲解js中的原型

    在讲js的原型之前,必须先了解下object和function。object和function都作为js的自带函数,object继承自己,funtion继承自己,object和function互相是继承对方,也就是说object和funct…

    2025年3月8日
    200
  • Node.js、jade生成静态html文件实例

    本文主要为大家带来一篇node.js+jade抓取博客所有文章生成静态html文件的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。 项目结构: 立即学习“前端免费学习笔记(深入)”; …

    2025年3月8日
    200
  • javascript知识小结

    本文主要整理 javascript 中一些相似的关键字、方法、概念,并分享给大家,希望能帮助到大家。 1. var、function、let、const 命令的区别 使用var声明的变量,其作用域为该语句所在的函数内,且存在变量提升现象 使…

    2025年3月8日
    200
  • 实例详解javascript数组去重的几种思路

    数据去重的需求实际上像是lodash这些工具库已经有成熟完备的实现,并且可以成熟地运用于生产环境。但是这并不妨碍我们从思维拓展的角度出发,看看去重可以用几种思路去实现。本文主要和大家分享javascript数组去重的几种思路。 首先是常规的…

    编程技术 2025年3月8日
    200
  • 前端框架ThinkJS框架详解

    本文主要和大家分享前端框架thinkjs框架详解,thinkjs 是一个快速、简单的基于mvc和面向对象的轻量级node.js开发框架,遵循mit协议发布。秉承简洁易用的设计原则,在保持出色的性能和至简的代码同时,注重开发体验和易用性,为w…

    编程技术 2025年3月8日
    200
  • 关于JavaScript面向对象的新认识

    1. javascript是一门面向对象的语言,在说明javascript是一个面向对象的语言之前, 我们来探讨一下面向对象的三大基本特征:  封装, 继承, 多态。本文我们就和大家重新介绍一下javascript面向对象。 封装 把抽象出…

    2025年3月8日
    200
  • ajax前后台跨域请求处理方法

    最近一直在搞公众号前台开发,遇到了ajax跨域请求的问题,像地区的省-市-县三级联动、汽车品牌-车系-车款的三级联动查询等都需要调用外部接口(其他工程项目的接口)完成。本文主要介绍通过前台跨域请求处理以及后台跨域的数据处理方式,详细分析了a…

    编程技术 2025年3月8日
    200
  • JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例

    这篇文章主要介绍了javascript实现多叉树的递归遍历和非递归遍历算法,结合实例形式详细分析了javascript多叉树针对json节点的递归与非递归遍历相关操作技巧,对javascript感兴趣的朋友可以参考下 本文实例讲述了Java…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论