惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

H
Hacker News: Front Page
A
About on SuperTechFans
腾讯CDC
罗磊的独立博客
博客园 - Franky
Last Week in AI
Last Week in AI
博客园_首页
酷 壳 – CoolShell
酷 壳 – CoolShell
量子位
小众软件
小众软件
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
爱范儿
爱范儿
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
The Register - Security
The Register - Security
云风的 BLOG
云风的 BLOG
L
LangChain Blog
H
Hackread – Cybersecurity News, Data Breaches, AI and More
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
D
Docker
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
Recorded Future
Recorded Future
Vercel News
Vercel News
Martin Fowler
Martin Fowler
WordPress大学
WordPress大学
J
Java Code Geeks
有赞技术团队
有赞技术团队
V
V2EX
IT之家
IT之家
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
雷峰网
雷峰网
Jina AI
Jina AI
B
Blog RSS Feed
H
Help Net Security
N
Netflix TechBlog - Medium
Latest news
Latest news
Microsoft Azure Blog
Microsoft Azure Blog
博客园 - 司徒正美
Y
Y Combinator Blog
人人都是产品经理
人人都是产品经理
Stack Overflow Blog
Stack Overflow Blog
C
Cisco Blogs
Microsoft Security Blog
Microsoft Security Blog
阮一峰的网络日志
阮一峰的网络日志
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
大猫的无限游戏
大猫的无限游戏
C
Check Point Blog
P
Proofpoint News Feed
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
N
News and Events Feed by Topic
T
Threatpost

博客园 - 春风得意之时

gif动态图制作 2025年起,cnpm使用淘宝镜像 el-table合并相同数据的行 el-upload file转blob 用于预览pdf.js和下载文件 area.js CSS 实现防止按钮重复点击 JS高级用法-清空数组 能找到相同 id 属性值的数据则进入判断--JS JS slice(0);克隆数组 JS map 三种不同的写法返回值 控制一行显示多少个Item Uview里面公用的css类 通过bat启动jar的命令 ES6语法解决现在笔记本屏幕设置为125% 150%导致页面缩放的问题 在线版冰墩墩 nginx带有Java(前后分离)和PHP环境的配置 maven打包命令 js reduce函数基本知识和应用 iframe里面获取父级页面URL参数
如何形象地解释 JavaScript 中 map、foreach、reduce 间的区别?
春风得意之时 · 2022-08-08 · via 博客园 - 春风得意之时

假设我们有一个数组,每个元素是一个人。你面前站了一排人。
foreach 就是你按顺序一个一个跟他们做点什么,具体做什么,随便:

people.forEach(function (dude) {
  dude.pickUpSoap();
});

map 就是你手里拿一个盒子(一个新的数组),一个一个叫他们把钱包扔进去。结束的时候你获得了一个新的数组,里面是大家的钱包,钱包的顺序和人的顺序一一对应。

var wallets = people.map(function (dude) {
  return dude.wallet;
});

reduce 就是你拿着钱包,一个一个数过去看里面有多少钱啊?每检查一个,你就和前面的总和加一起来。这样结束的时候你就知道大家总共有多少钱了。

var totalMoney = wallets.reduce(function (countedMoney, wallet) {
  return countedMoney + wallet.money;
}, 0);

补充一个 filter 的:
你一个个钱包数过去的时候,里面钱少于 100 块的不要(留在原来的盒子里),多于 100 块的丢到一个新的盒子里。这样结束的时候你又有了一个新的数组,里面是所有钱多于 100 块的钱包:

var fatWallets = wallets.filter(function (wallet) {
  return wallet.money > 100;
});

最后要说明一点这个类比和实际代码的一个区别,那就是 map 和 filter 都是 immutable methods,也就是说它们只会返回一个新数组,而不会改变原来的那个数组,所以这里 filter 的例子是和代码有些出入的(原来的盒子里的钱包减少了),但为了形象说明,大家理解就好。