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

2022-05-12 14:59:22 +08:00
 yuan321

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

2406 次点击
所在节点    JavaScript
18 条回复
libook
2022-05-12 15:06:25 +08:00
可以看 Reference 文档对比一下
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array

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

比如你要把一个数组里的每一个元素加工后再生成另一个数组,你用 forEach 也可以实现,甚至用 for 循环,但都需要自己额外写一些代码,不如直接用 map 方便。
Pastsong
2022-05-12 15:10:33 +08:00
English 啊 English
molvqingtai
2022-05-12 15:41:16 +08:00
可以分为两类,一种有副作用,一种是无副作用
molvqingtai
2022-05-12 15:42:27 +08:00
foreach 没有返回值,用于改变原数组或做一些其操作
molvqingtai
2022-05-12 15:43:40 +08:00
其他都是纯函数
murmur
2022-05-12 16:01:09 +08:00
reduce 没用过,其余的都挺常用,数据处理,过滤下接口转个格式啥的
DOLLOR
2022-05-12 16:07:00 +08:00
// 单纯地遍历
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
2022-05-12 16:13:16 +08:00
Reduce 的一共场景: https://v2ex.com/t/852210#reply6
duduaba
2022-05-12 16:19:47 +08:00
语法糖,for 循环变种,理解为 lodash 工具集封装就行
Building
2022-05-12 16:31:20 +08:00
……我无语了,这么直白的英语,这么直白的函数,再不济一个个跑一遍也搞懂了吧
luob
2022-05-12 17:04:47 +08:00
会用 reduce 就行了,其他的都相当于是 reduce 的语法糖
gzyguy
2022-05-12 18:23:46 +08:00
7 楼正解。
Envov
2022-05-12 18:54:28 +08:00
7 楼正解,这里有一个比较晦涩的 reduce ,很短,但是实现了 composeM
Envov
2022-05-12 18:54:35 +08:00
lmshl
2022-05-12 19:24:45 +08:00
foreach
我想把所有元素都过一遍(比如,控制台打印所有元素)
map
我想把所有元素都改成另一个样(比如,给所有字符串末尾加一个逗号)
find
我想从数组中找符合我要求的第一个元素(比如,从用户数组中找第一个符合条件的用户)
filter
我想剔除部分元素,仅保留我需要的元素(比如,从用户数组中过滤掉非管理员用户)
reduce
我想把所有元素合并成一个元素(比如,对整数数组求和)
Danswerme
2022-05-12 19:28:48 +08:00
@Envov 谢谢🙏,成功烧死了一吨脑细胞,看了十分钟之后终于绕明白了。
Mutoo
2022-05-13 07:45:25 +08:00
推荐一篇 FP 相关的文章,介绍了 transducer 和 reducer 相关的知识

https://medium.com/@thi.ng/of-umbrellas-transducers-reactive-streams-mushrooms-pt-2-9c540beb0023
AhECbt
2022-06-18 18:23:18 +08:00
简单理解:

遍历自己,遍历成别人,查找,过滤,运算

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

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

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

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

© 2021 V2EX