假设我们有一个数组,每个元素是一个人。你面前站了一排人。

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 的例子是和代码有些出入的(原来的盒子里的钱包减少了),但为了形象说明,大家理解就好。

如何形象地解释 JavaScript 中 map、foreach、reduce 间的区别?的更多相关文章

  1. 数组的常用方法concat,join,slice和splice的区别,map,foreach,reduce

    1.concat()和join() concat()是连对两个或两个数组的方法,直接可以将数组以参数的形式放入 join()是将数组中的所有元素放入一个字符串中,通俗点讲就是可以将数组转换成字符串 2 ...

  2. hadoop中map和reduce的数量设置

    hadoop中map和reduce的数量设置,有以下几种方式来设置 一.mapred-default.xml 这个文件包含主要的你的站点定制的Hadoop.尽管文件名以mapred开头,通过它可以控制 ...

  3. JavaScript中const、var和let区别浅析

    在JavaScript中有三种声明变量的方式:var.let.const.下文给大家介绍js中三种定义变量的方式const, var, let的区别. 1.const定义的变量不可以修改,而且必须初始 ...

  4. 【转】Python 中map、reduce、filter函数

    转自:http://www.blogjava.net/vagasnail/articles/301140.html?opt=admin 介绍下Python 中 map,reduce,和filter 内 ...

  5. JavaScript中值类型和引用类型的区别

    JavaScript的数据类型分为两类:原始类型和对象类型.其中,原始类型包括:数字.字符串和布尔值.此外,JavaScript中还有两个特殊的原始值:null和undefined,它们既不是数字也不 ...

  6. JavaScript中=、==、===以及!=、!==的区别与联系

    JavaScript中=.==.===以及!=.!==的区别与联系   在JavaScript中,“=”代表赋值操作:“==”先转换类型再比较,“===”先判断类型,如果不是同一类型直接为false. ...

  7. Python函数式编程中map()、reduce()和filter()函数的用法

    Python中map().reduce()和filter()三个函数均是应用于序列的内置函数,分别对序列进行遍历.递归计算以及过滤操作.这三个内置函数在实际使用过程中常常和“行内函数”lambda函数 ...

  8. JavaScript中object和Object有什么区别

    JavaScript中object和Object有什么区别,为什么用typeof检测对象,返回object,而用instanceof 必须要接Object呢 ————————————————————— ...

  9. JavaScript中Map和ForEach的区别

    译者按: 惯用Haskell的我更爱map. 原文: JavaScript — Map vs. ForEach - What’s the difference between Map and ForE ...

  10. [翻译]解释JavaScript中的类型转换

    原文地址:JavaScript type coercion explained 类型转换是将值从一种类型转换为另一种类型的过程(比如字符串转换为数值,对象转换为布尔值,等等).任何类型,无论是原始类型 ...

随机推荐

  1. 经典webshell流量特征

    开门见山,不说废话 判断条件 是否符合通信的特征 请求加密的数据和响应包加密的类型一致 是否一直向同一个url路径发送大量符合特征的请求,并且具有同样加密的响应包 一 .蚁剑 特征为带有以下的特殊字段 ...

  2. 基于预生成 QA 对的 RAG 知识库解决方案

    核心价值 QA 预生成技术 采用创新的问答对生成方法,相比传统文本切片技术,能够更精准的构建知识库,显著提升检索与问答效果. 企业级场景验证 已在真实业务场景中落地应用,实现从传统搜索到智能搜索的无缝 ...

  3. 初探CAP定理及其不可兼得性

    一.对CAP定理的理解 CAP定理是分布式系统设计的核心理论.由Eric Brewer在2000年提出,后由Gilbert和Lynch在2002年严格证明.分别是指Consistency一致性,Aav ...

  4. ESP32S3内网实现 WebSocket

    ESP32S3内网实现 WebSocket WebSocket 是一种网络通信协议,它提供了在单个 TCP 连接上进行全双工.双向通信的通道.它是为了在 Web 浏览器和服务器之间实现实时.高效的数据 ...

  5. helmfile调试

    说明 我们在调试helmfile编排的chart时,对于helm chart正常的情况下,我们编排的helmfile渲染模版的值出了问题,可能会存在以下的报错: helmfile template E ...

  6. Hack 说明

    在今天的模拟赛中,部分同学由于对出现某个数在模 \(1000000007\) 意义下为 \(0\) 的情况不规范被 Hack. Hack 原理:开始时有 \(2\) 个 \(1\),先都加到 \(10 ...

  7. 开源DeepWiki 企业老项目救星:自动生成文档+AI问答,告别遗留代码维护噩梦

    企业痛点一击即中 你是否还在为这些问题头疼: 核心业务系统缺乏文档,新人上手困难 老员工离职带走关键代码知识 系统升级维护成本居高不下 业务逻辑复杂,代码理解困难 OpenDeepWiki最新版本专为 ...

  8. laravel-casbin-admin

    基于 vue-element-admin laraveljwtcasbin 整合的前后端分离的rbac权限管理系统 功能和介绍 github地址 系统采用前后端分离架构,是一个企业后台解决方案. 前端 ...

  9. Labubu的风过了?无用的产品才是艺术

    正如标题所说,在风头过去之后,我们来理性客观地聊聊Labubu. "所有的消费行为都是在解决两件事情:一个是满足感,一个是存在感.满足感,就是人的物质需求和基本精神需求得到了满足.存在感,就 ...

  10. Cursor 网页版来了,这下拉屎时也能工作了

    大家好,我是程序员鱼皮.几天前,Cursor 官方宣布推出了网页版 AI 代理,手机上也能用,可以让 AI 帮忙回答问题.编写代码.好家伙,这下我们程序员真的可以随时随地工作了??? 虽然网上吹得天花 ...