Javascript从“繁”到“简”进行数组去重
随着JavaScript提供语法的增多,数组去重方式也越来越多。现在从最原始的方式到最简洁的方式,一步步进行剖析。
双重循环
数组去重,不就是比较数组元素,去掉重复出现的么。最原始的方式不正是双重循环进行比较处理嘛
创建res数组存放返回结果;外层循环遍历target中的每一个数组元素,内层循环将target中的数组元素与res数组中的每一个值进行对比,如果都不相同,则存放到res中。循环完成,返回去重后的数组。这种原始的方式具有良好的兼容性。
indexof优化内层循环
在本栗中使用indexof优化内层循环。indexOf()方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1
使用了indexof方法,就不在需要内层循环,当然还有其他的方式可以优化内层循环了
javascript学习群:453833554
对象键值对优化内层循环
对象的键不同重复,这个特性可以用来判断重复元素
注意:由于对象的键都是字符,所以,无法区分 1 和 '1' ,所以需要再进行修改一下,存放时加上类型判断。
加上了类型判断, 1 对应为 Number1 , '1' 对应为 String1,即可正常区分开。
filter优化外层循环
在本栗中使用filter优化外层循环。filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
在target上直接进行过滤,如果是该元素第一次出现,则返回true,否则返回false;这样filter新创建的数组中每个元素只会出现一次,达到了去重的目的。至此我们不再使用for循环,代码量也减少了很多。
Set去重
ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。这种特性用来数组去重,十分的方便。
'...' 是ES6中的扩展运算符,此处的作用是将Set展开为用逗号隔开的参数序列 , 非常简单的就实现了数组去重。不熟悉 ES6语法的童鞋们,先自行了解。如果再用上箭头函数,真的是一句话就搞定了,如下:
至此,从双重循环的十几行代码到最后 set+箭头函数的一行搞定。从‘繁’到‘简’都已经实现了数组的去重,代码量减少的背后是对JavaScript方法的应用。其实核心思路没变,实现的手段变了而已。
javascript学习群:453833554
Javascript从“繁”到“简”进行数组去重的更多相关文章
- JavaScript中好用的对象数组去重
对象数组去重 Demo数据如下: var items= [{ "specItems": [{ "id": "966480614728069122&qu ...
- JavaScript学习系列博客_28_JavaScript 数组去重
数组去重 var arr = [1,2,3,2,2,1,3,4,2,5]; //去除数组中重复的数字 //获取数组中的每一个元素 for(var i=0 ; i<arr.length ; i++ ...
- 160819、JavaScript-数组去重由慢到快由繁到简
JavaScript-数组去重由慢到快由繁到简演化 indexOf去重 Array.prototype.unique1 = function() { var arr = []; for (var ...
- JavaScript常见的五种数组去重的方式
▓▓▓▓▓▓ 大致介绍 JavaScript的数组去重问题在许多面试中都会遇到,现在做个总结 先来建立一个数组 var arr = [1,2,3,3,2,'我','我',34,'我的',NaN,NaN ...
- 也谈面试必备问题之 JavaScript 数组去重
Why underscore (觉得这部分眼熟的可以直接跳到下一段了...) 最近开始看 underscore.js 源码,并将 underscore.js 源码解读 放在了我的 2016 计划中. ...
- javascript数组 去重
数组去重的方法有很多,到底哪种是最理想的,自己不清楚.于是自己测试了下数组去重的效果和性能.测试十万个数据,代码和所耗大概时间如下. 到底采用哪种方法,根据实际情况而定吧. /*方法一: 1,'1' ...
- javascript数组去重算法-----3
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- javascript数组去重算法-----2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- javascript数组去重算法-----1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 网络传输编程之TCP
网络传输编程之TCP 网络传输编程指基于各种网络协议进行编程,包括TCP编程,UDP编程,P2P编程.本节介绍TCP编程. (1)TCP简介: TCP是TCP/IP体系中最重要的传输层协议 ...
- ps中如何让图层在画布内水平居中
下图每个小logo图案距离它们的上参考线的距离均为10px,而我们如何让图层在画布内水平居中??? 如上图中三个图层的图案是用来给Html/Css中的background属性使用的,虽然可以通过鼠标拖 ...
- 201521123050 《Java程序设计》第4周学习总结
1. 本周学习总结 2. 书面作业 1.注释的应用 1.1使用类的注释与方法的注释为前面编写的类与方法进行注释,并在Eclipse中查看.(截图) 2.面向对象设计(大作业1,非常重要) 2.1 将在 ...
- Java 课程设计 "Give it up"小游戏设计(个人) 201521123077
1.团队课程设计博客链接 http://www.cnblogs.com/agts/p/7067948.html 2.个人负责模块或任务说明 个人任务:实现游戏画面的制作,游戏逻辑的编写,以及一些模块与 ...
- Java课程设计—象棋
1. 团队名称.团队成员介绍 团队名称:WY 团队成员: 吴慧婷[组长] 201521123094 网络1514 姚佳希 201521123042 网络1512 2 项目git地址 Java课程设计 ...
- 201521123040《Java程序设计》第11周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线程 1.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) ...
- 201521123024 《Java程序设计》第13周学习总结
1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容.
- vue webuploader 组件开发
最近项目中需要用到百度的webuploader大文件的分片上传,对接后端的fastdfs,于是着手写了这个文件上传的小插件,步骤很简单,但是其中猜到的坑也不少,详细如下: 一.封装组件 引入百度提供的 ...
- CSS公用
*{font-size: 100px;} body,span,h1,h2,h3,h4,h5,h6,li,ul,p,em,strong,ol,form,pre,input,article,header, ...
- angular $compiler
directive是如何被compiled HTML编译发生在三个阶段: 1.$compile遍历DOM节点匹配directives 如果compiler找到元素上的directive,directi ...