zoukankan      html  css  js  c++  java
  • forEach,map,filter的区别使用

    https://blog.csdn.net/qq_41559229/article/details/90087456?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.nonecase

    相同之处
    forEach
    最早知道这个方法的时候是使用Jquery的迭代方法Each,有兴趣的朋友可以去了解一下,基本的使用情况都是差不多的。首先举一个常用的例子。

    var array = [[1,2,3,4],[2,4,5,6]]

    array.forEach(function (item,i,arr) {
    console.log('item的值:'+item) //第一次是[1,2,3,4] 第二次是[2,4,5,6]
    console.log('i的值:'+i) //第一次是0 第二次是1
    console.log(arr) //都是指向这个数组arr
    console.log(item[i]); //第一次是1 第二次是4
    })
    1
    2
    3
    4
    5
    6
    7
    8
    item是每次遍历的子元素,i是下标,arr这个用的比较少,实际发现指向的就是当前遍历的数组array

    Map
    这个方法的使用跟forEach没有什么区别,而且参数都是一样的。

    filter(过滤器)
    这个也是跟forEach相同的参数。用法稍微有点区别。

    不同之处
    1、是否有返回值
    forEach
    var arr = [[1,2,3,4],[2,4,5,6]]
    console.log(arr.forEach(function (item, i) {

    return item
    }));
    1
    2
    3
    4
    5
    结果如下:


    Map
    var arr = [[1,2,3,4],[2,4,5,6]]
    console.log(arr.map(function (item, i) {

    return item
    }));
    1
    2
    3
    4
    5
    结果如下:


    filter
    var arr = [[1,2,3,4],[2,4,5,6]]
    console.log(arr.filter(function (item, i) {

    return item
    }));
    1
    2
    3
    4
    5
    结果如下:

    可以从中看到forEach的返回值是undefined,而Map和filter的返回值确实相同的。那么Map与filter到底有什么不同之处呢?

    由于filter的翻译是过滤器的意思,所以filter更多时候是用来筛选条件符合的元素。如下:

    var a = [1,2,3,4,5,6,7,8,9,10]
    console.log(a.map(function (item, i) {

    return item >5
    }));

    console.log(a.filter(function (item, i) {

    return item >5
    }));
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    分别输出的结果是


    filter返回的是一个新的数组,而Map返回的是原来的数组。将原来的数组对于条件返回。

    总结
    forEach、Map、filter三个迭代方法都各有优势,如果不需要返回值,只需要操作的话,可以直接使用forEach,如果需要返回值的话,可以使用Map、filter方法,如果需要条件筛选的话,可以直接用filter
    ————————————————
    版权声明:本文为CSDN博主「RadiomMl」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/qq_41559229/java/article/details/90087456

  • 相关阅读:
    SSM博客
    做完了第一个
    day08
    day07
    day06
    解决Zend OPcache huge_code_pages: mmap(HUGETLB) failed: Cannot allocate memory报错
    《响应式网页设计》系列分享专栏
    《Linux命令学习手册》系列分享专栏
    详解Docker 端口映射与容器互联
    centos7安装gitlab
  • 原文地址:https://www.cnblogs.com/gxw123/p/13288884.html
Copyright © 2011-2022 走看看