V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
dfkjgklfdjg
V2EX  ›  程序员

有一个疑问,在 JS 中 Array.forEach()与 Array.map()这些方法的第三个可选参数 array 的作用

  •  
  •   dfkjgklfdjg ·
    yogwang · 2021-07-21 10:22:32 +08:00 · 1817 次点击
    这是一个创建于 981 天前的主题,其中的信息可能已经有所发展或是发生改变。

    Rt. 一直有一个疑问,就是forEachmapfilter之类的操作数组的方法,都有一个 array 的可选参数,返回的是当前操作的数组。

    但每次使用都需要 arrayData.forEach(... 来执行,所以为什么不直接在回调函数内使用一开始的 arrayData 来用呢?和第三个可选参数 array 的区别是什么?

    参数

    callback 为数组中每个元素执行的函数,该函数接收一至三个参数:

    • currentValue 数组中正在处理的当前元素。
    • index [可选] 数组中正在处理的当前元素的索引。
    • array [可选] forEach() 方法正在操作的数组。

    thisArg 可选 可选参数。当执行回调函数 callback 时,用作 this 的值。

    forEach - MDN

    17 条回复    2021-07-22 13:51:32 +08:00
    learningman
        1
    learningman  
       2021-07-21 10:24:02 +08:00
    你可以直接用原型链上的函数原型啊
    VDimos
        2
    VDimos  
       2021-07-21 10:25:00 +08:00 via Android
    因为 js 最开始设计是函数式编程的,属于历史遗留了
    banricho
        3
    banricho  
       2021-07-21 10:27:20 +08:00
    如果你的 callback 本身是暴露给外部使用的呢?
    拿到整个数组,可以方便你获得 length / next item 之类的数据。
    dfkjgklfdjg
        4
    dfkjgklfdjg  
    OP
       2021-07-21 10:37:44 +08:00
    @banricho #3,可以这样写啊
    `arrayData.forEach((item,index)=>callback(item,index,arrayData))` 这样写啊。
    和 `arrayData.forEach((item,index,array)=>callback(item,index,array))` 的区别是啥?
    auroraccc
        5
    auroraccc  
       2021-07-21 10:41:12 +08:00
    因为有些情况是:
    const cb = (ele, index, array) => do something...;

    arr1.forEach(cb)
    arr2.forEach(cb)
    banricho
        6
    banricho  
       2021-07-21 10:46:11 +08:00
    @dfkjgklfdjg

    a.js:

    export const cb = (item, index, arr) => {}

    ---

    b.js:

    import { cb } from './a.js'
    arrayData.forEach(cb)
    banricho
        7
    banricho  
       2021-07-21 10:48:04 +08:00
    @dfkjgklfdjg

    你不要太纠结这个事情,API 设计有冗余是很正常的,可以保证你灵活的使用。。。
    你可以这样写,也可以那样写,真的不要太纠结这个事情 = =
    shakukansp
        8
    shakukansp  
       2021-07-21 11:57:55 +08:00
    @dfkjgklfdjg 如 5 楼所说

    如果你要抽取一个公共的逻辑而不是直接写匿名回调
    hengshenyu
        9
    hengshenyu  
       2021-07-21 12:24:36 +08:00   ❤️ 1
    arrayData.filter(filterFn).map(mapFn), 当需要在 mapFn 中获取实际的 arrayData 时,你的写法就不行了。
    dfkjgklfdjg
        10
    dfkjgklfdjg  
    OP
       2021-07-21 12:28:12 +08:00
    @banricho #7,就是给别人 debug 的时候突然想到,兴起来问问。

    @hengshenyu #9,emmmm……了解了。
    hengshenyu
        11
    hengshenyu  
       2021-07-21 12:29:12 +08:00
    流式处理和函数式总是在一起考虑,参数中增加 arrayData 可以减少对中间值得依赖。使数据流动一气呵成。至于 forEach 为什么也要这样设计,大概是为了写法统一?这个就不知道了
    iOCZ
        12
    iOCZ  
       2021-07-21 12:49:09 +08:00
    如果数组是临时数组,没有变量指向呢。。。。🤔
    ericls
        13
    ericls  
       2021-07-21 13:03:18 +08:00 via iPhone
    Caller 能拿到的东西, callback 不一定拿得到
    Biwood
        14
    Biwood  
       2021-07-21 13:23:25 +08:00
    9 楼正解,很有用的。函数式编程就是可以让你做到逻辑完全分离,也就是说 callback 函数也可以完全分离。想象一下你有可能把 callback 封装在 A 文件里,而 .forEach() 和 .map() 操作在 B 文件里面,这时候他的意义就体现出来了。
    dfkjgklfdjg
        15
    dfkjgklfdjg  
    OP
       2021-07-21 13:27:55 +08:00
    @Biwood #14,链式调用的时候会很方便,(如果不是没办法获得返回的临时数组,其实也可以继续手动传参来处理。
    qyc666
        16
    qyc666  
       2021-07-21 23:06:52 +08:00
    可能还有个优点是 array 变成一个 local variable 查找起来也更快
    dfkjgklfdjg
        17
    dfkjgklfdjg  
    OP
       2021-07-22 13:51:32 +08:00
    @qyc666 #16,勉强算是一个优势吧。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1532 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 17:06 · PVG 01:06 · LAX 10:06 · JFK 13:06
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.