zoukankan      html  css  js  c++  java
  • Javascript从“繁”到“简”进行数组去重

    javaseript从“繁”到“简”进行数组去重

    随着JavaScript提供语法的增多,数组去重方式也越来越多。现在从最原始的方式到最简洁的方式,一步步进行剖析。

    双重循环

    数组去重,不就是比较数组元素,去掉重复出现的么。最原始的方式不正是双重循环进行比较处理嘛

    javaseript从“繁”到“简”进行数组去重

    创建res数组存放返回结果;外层循环遍历target中的每一个数组元素,内层循环将target中的数组元素与res数组中的每一个值进行对比,如果都不相同,则存放到res中。循环完成,返回去重后的数组。这种原始的方式具有良好的兼容性。

    indexof优化内层循环

    在本栗中使用indexof优化内层循环。indexOf()方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1

    javaseript从“繁”到“简”进行数组去重

    使用了indexof方法,就不在需要内层循环,当然还有其他的方式可以优化内层循环了

    javascript学习群:453833554

    对象键值对优化内层循环

    对象的键不同重复,这个特性可以用来判断重复元素

    javaseript从“繁”到“简”进行数组去重

    注意:由于对象的键都是字符,所以,无法区分 1 和 '1' ,所以需要再进行修改一下,存放时加上类型判断。

    javaseript从“繁”到“简”进行数组去重

    加上了类型判断, 1 对应为 Number1 , '1' 对应为 String1,即可正常区分开。

    filter优化外层循环

     在本栗中使用filter优化外层循环。filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

    javaseript从“繁”到“简”进行数组去重

    在target上直接进行过滤,如果是该元素第一次出现,则返回true,否则返回false;这样filter新创建的数组中每个元素只会出现一次,达到了去重的目的。至此我们不再使用for循环,代码量也减少了很多。

    Set去重

    ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。这种特性用来数组去重,十分的方便。

    javaseript从“繁”到“简”进行数组去重

     '...' 是ES6中的扩展运算符,此处的作用是将Set展开为用逗号隔开的参数序列 , 非常简单的就实现了数组去重。不熟悉 ES6语法的童鞋们,先自行了解。如果再用上箭头函数,真的是一句话就搞定了,如下:

    javaseript从“繁”到“简”进行数组去重

     至此,从双重循环的十几行代码到最后 set+箭头函数的一行搞定。从‘繁’到‘简’都已经实现了数组的去重,代码量减少的背后是对JavaScript方法的应用。其实核心思路没变,实现的手段变了而已。

    javascript学习群:453833554

  • 相关阅读:
    Axure RP 9 Beta 开放下载(更新激活密钥和汉化包)
    Android 解决NestedScrollView 嵌套 RecyclerView出现的卡顿,上拉刷新无效
    上周热点回顾(8.27-9.2)团队
    上周热点回顾(8.20-8.26)团队
    上周热点回顾(8.13-8.19)团队
    上周热点回顾(8.6-8.12)团队
    阿里云MVP第6期招募与博客园合作启动团队
    上周热点回顾(7.30-8.5)团队
    上周热点回顾(7.23-7.29)团队
    上周热点回顾(7.16-7.22)团队
  • 原文地址:https://www.cnblogs.com/gongyue/p/7677011.html
Copyright © 2011-2022 走看看