随着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从“繁”到“简”进行数组去重的更多相关文章

  1. JavaScript中好用的对象数组去重

    对象数组去重 Demo数据如下: var items= [{ "specItems": [{ "id": "966480614728069122&qu ...

  2. JavaScript学习系列博客_28_JavaScript 数组去重

    数组去重 var arr = [1,2,3,2,2,1,3,4,2,5]; //去除数组中重复的数字 //获取数组中的每一个元素 for(var i=0 ; i<arr.length ; i++ ...

  3. 160819、JavaScript-数组去重由慢到快由繁到简

    JavaScript-数组去重由慢到快由繁到简演化   indexOf去重 Array.prototype.unique1 = function() { var arr = []; for (var ...

  4. JavaScript常见的五种数组去重的方式

    ▓▓▓▓▓▓ 大致介绍 JavaScript的数组去重问题在许多面试中都会遇到,现在做个总结 先来建立一个数组 var arr = [1,2,3,3,2,'我','我',34,'我的',NaN,NaN ...

  5. 也谈面试必备问题之 JavaScript 数组去重

    Why underscore (觉得这部分眼熟的可以直接跳到下一段了...) 最近开始看 underscore.js 源码,并将 underscore.js 源码解读 放在了我的 2016 计划中. ...

  6. javascript数组 去重

    数组去重的方法有很多,到底哪种是最理想的,自己不清楚.于是自己测试了下数组去重的效果和性能.测试十万个数据,代码和所耗大概时间如下. 到底采用哪种方法,根据实际情况而定吧. /*方法一: 1,'1' ...

  7. javascript数组去重算法-----3

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. javascript数组去重算法-----2

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. javascript数组去重算法-----1

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. web项目的发布

    1.我们将web项目布署到IIS上之前需要将我们的源码发布,然后再将发布后的代码布署到II上 2.首先在VS上打开我们的应用程序,在WEB层上右键->发布,会弹出一个"发布web&qu ...

  2. 转: 【Java并发编程】之二十:并发新特性—Lock锁和条件变量(含代码)

    简单使用Lock锁 Java5中引入了新的锁机制--Java.util.concurrent.locks中的显式的互斥锁:Lock接口,它提供了比synchronized更加广泛的锁定操作.Lock接 ...

  3. 转:【Java集合源码剖析】Vector源码剖析

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/35793865   Vector简介 Vector也是基于数组实现的,是一个动态数组,其容量 ...

  4. 团队作业8----第二次项目冲刺(Beta阶段) 第三天

    BETA阶段冲刺第三天 1.小会议ing 2.每个人的工作 (1) 昨天已完成的工作 注册账号时时添加了账号相同不能添加的功能,以防两个账号一样的情况: 老师账号注册时添加一个密令: (2) 今天计划 ...

  5. 【Alpha】Daily Scrum Meeting——Day3

    站立式会议照片 1.本次会议为第三次 Meeting会议: 2.本次会议于早上9:40在陆大楼召开,本次会议为30分钟讨论昨天的任务完成情况以及接下来的任务安排. 每个人的工作分配 成 员 昨天已完成 ...

  6. 201521123103 《Java学习笔记》 第八周学习总结

    一.本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 集合部分:TreeMap实现类:对键值进行排序. Map的entrySet Set<Map.Entry&l ...

  7. 201521123066《Java程序设计》第八周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 本次作业题集集合 1.List中指定元素的删除(题目4-1) 1.1 实验总结** 用cont ...

  8. 201521123005 《java程序设计》 第六周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...

  9. 201521123029《Java程序设计》第五周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 1.2 可选:使用常规方法总结其他上课内容. 答:1. 课上讲了匿名内部类的使用,其中内部类就是定义在另一个类里面的类,与之相 ...

  10. 201521123016 《Java程序设计》第5周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 2. 书面作业 1.代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过? ...