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

2021-07-21 10:22:32 +08:00
 dfkjgklfdjg

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

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

参数

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

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

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

forEach - MDN

2046 次点击
所在节点    程序员
17 条回复
learningman
2021-07-21 10:24:02 +08:00
你可以直接用原型链上的函数原型啊
VDimos
2021-07-21 10:25:00 +08:00
因为 js 最开始设计是函数式编程的,属于历史遗留了
banricho
2021-07-21 10:27:20 +08:00
如果你的 callback 本身是暴露给外部使用的呢?
拿到整个数组,可以方便你获得 length / next item 之类的数据。
dfkjgklfdjg
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
2021-07-21 10:41:12 +08:00
因为有些情况是:
const cb = (ele, index, array) => do something...;

arr1.forEach(cb)
arr2.forEach(cb)
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
2021-07-21 10:48:04 +08:00
@dfkjgklfdjg

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

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

@hengshenyu #9,emmmm……了解了。
hengshenyu
2021-07-21 12:29:12 +08:00
流式处理和函数式总是在一起考虑,参数中增加 arrayData 可以减少对中间值得依赖。使数据流动一气呵成。至于 forEach 为什么也要这样设计,大概是为了写法统一?这个就不知道了
iOCZ
2021-07-21 12:49:09 +08:00
如果数组是临时数组,没有变量指向呢。。。。🤔
ericls
2021-07-21 13:03:18 +08:00
Caller 能拿到的东西, callback 不一定拿得到
Biwood
2021-07-21 13:23:25 +08:00
9 楼正解,很有用的。函数式编程就是可以让你做到逻辑完全分离,也就是说 callback 函数也可以完全分离。想象一下你有可能把 callback 封装在 A 文件里,而 .forEach() 和 .map() 操作在 B 文件里面,这时候他的意义就体现出来了。
dfkjgklfdjg
2021-07-21 13:27:55 +08:00
@Biwood #14,链式调用的时候会很方便,(如果不是没办法获得返回的临时数组,其实也可以继续手动传参来处理。
qyc666
2021-07-21 23:06:52 +08:00
可能还有个优点是 array 变成一个 local variable 查找起来也更快
dfkjgklfdjg
2021-07-22 13:51:32 +08:00
@qyc666 #16,勉强算是一个优势吧。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/790771

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX