V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
yuan321
V2EX  ›  JavaScript

js 中 foreach,map,find,filter,reduce 的适用场景分别是哪些?

  •  
  •   yuan321 · 46 天前 · 1496 次点击
    这是一个创建于 46 天前的主题,其中的信息可能已经有所发展或是发生改变。

    js 中 foreach,map,find,filter,reduce 的适用场景分别是哪些?他们的相同点和不同点又有哪些呢?

    18 条回复    2022-06-18 18:23:18 +08:00
    libook
        1
    libook  
       46 天前   ❤️ 1
    可以看 Reference 文档对比一下
    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array

    相同点只是用了迭代器,除此之外功能不一样;一项需求如果有现成方法就可以实现就直接用现成方法,没有的话再用需要加工数量最少的方法。

    比如你要把一个数组里的每一个元素加工后再生成另一个数组,你用 forEach 也可以实现,甚至用 for 循环,但都需要自己额外写一些代码,不如直接用 map 方便。
    Pastsong
        2
    Pastsong  
       46 天前
    English 啊 English
    molvqingtai
        3
    molvqingtai  
       46 天前
    可以分为两类,一种有副作用,一种是无副作用
    molvqingtai
        4
    molvqingtai  
       46 天前
    foreach 没有返回值,用于改变原数组或做一些其操作
    molvqingtai
        5
    molvqingtai  
       46 天前
    其他都是纯函数
    murmur
        6
    murmur  
       46 天前
    reduce 没用过,其余的都挺常用,数据处理,过滤下接口转个格式啥的
    DOLLOR
        7
    DOLLOR  
       46 天前   ❤️ 1
    // 单纯地遍历
    Array.prototype.forEach

    // 检测数组中是否有元素符合条件
    Array.prototype.some

    // 检测数组中是否所有元素符合条件
    Array.prototype.every

    // 用来将一个列表转换成另一个等长的列表
    Array.prototype.map

    // 用来将一个列表转换成一个值
    Array.prototype.reduce

    // 从列表中找出符合条件的一个元素
    Array.prototype.find

    // 从列表中找出符合条件的若干元素
    Array.prototype.filter

    // 拍平列表
    Array.prototype.flat

    // map 和 flat 的结合,适合用来将一个列表转换成另一个不等长的列表
    Array.prototype.flatMap
    FaiChou
        8
    FaiChou  
       46 天前
    Reduce 的一共场景: https://v2ex.com/t/852210#reply6
    duduaba
        9
    duduaba  
       46 天前
    语法糖,for 循环变种,理解为 lodash 工具集封装就行
    Building
        10
    Building  
       46 天前
    ……我无语了,这么直白的英语,这么直白的函数,再不济一个个跑一遍也搞懂了吧
    luob
        11
    luob  
       46 天前
    会用 reduce 就行了,其他的都相当于是 reduce 的语法糖
    gzyguy
        12
    gzyguy  
       46 天前 via iPhone
    7 楼正解。
    Envov
        13
    Envov  
       46 天前
    7 楼正解,这里有一个比较晦涩的 reduce ,很短,但是实现了 composeM
    lmshl
        15
    lmshl  
       46 天前
    foreach
    我想把所有元素都过一遍(比如,控制台打印所有元素)
    map
    我想把所有元素都改成另一个样(比如,给所有字符串末尾加一个逗号)
    find
    我想从数组中找符合我要求的第一个元素(比如,从用户数组中找第一个符合条件的用户)
    filter
    我想剔除部分元素,仅保留我需要的元素(比如,从用户数组中过滤掉非管理员用户)
    reduce
    我想把所有元素合并成一个元素(比如,对整数数组求和)
    Danswerme
        16
    Danswerme  
       46 天前
    @Envov 谢谢🙏,成功烧死了一吨脑细胞,看了十分钟之后终于绕明白了。
    Mutoo
        17
    Mutoo  
       46 天前
    推荐一篇 FP 相关的文章,介绍了 transducer 和 reducer 相关的知识

    https://medium.com/@thi.ng/of-umbrellas-transducers-reactive-streams-mushrooms-pt-2-9c540beb0023
    AhECbt
        18
    AhECbt  
       9 天前
    简单理解:

    遍历自己,遍历成别人,查找,过滤,运算
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2541 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 00:41 · PVG 08:41 · LAX 17:41 · JFK 20:41
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.