博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js高阶函数map和reduce
阅读量:6856 次
发布时间:2019-06-26

本文共 4535 字,大约阅读时间需要 15 分钟。

map

举例说明,比如我们有一个函数f(x)=x2,要把这个函数作用在一个数组[1, 2, 3, 4, 5, 6, 7, 8, 9]上,就可以用map实现如下:

map

由于map()方法定义在JavaScript的Array中,我们调用Arraymap()方法,传入我们自己的函数,就得到了一个新的Array作为结果:

function pow(x) {    return x * x; } var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; arr.map(pow); // [1, 4, 9, 16, 25, 36, 49, 64, 81]

map()传入的参数是pow,即函数对象本身。

你可能会想,不需要map(),写一个循环,也可以计算出结果:

var f = function (x) {    return x * x; }; var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; var result = []; for (var i=0; i

的确可以,但是,从上面的循环代码,我们无法一眼看明白“把f(x)作用在Array的每一个元素并把结果生成一个新的Array”。

所以,map()作为高阶函数,事实上它把运算规则抽象了,因此,我们不但可以计算简单的f(x)=x2,还可以计算任意复杂的函数,比如,把Array的所有数字转为字符串:

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; arr.map(String); // ['1', '2', '3', '4', '5', '6', '7', '8', '9']

只需要一行代码。

reduce

基本概念

reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值。

reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce 的数组。

语法:

arr.reduce(callback,[initialValue])
  • callback (执行数组中每个值的函数,包含四个参数)

    • previousValue (上一次调用回调返回的值,或者是提供的初始值(initialValue))
    • currentValue (数组中当前被处理的元素)
    • index (当前元素在数组中的索引)
    • array (调用 reduce 的数组)
  • initialValue (作为第一次调用 callback 的第一个参数。)

简单应用

例1:

var items = [10, 120, 1000]; // our reducer function var reducer = function add(sumSoFar, item) { return sumSoFar + item; }; // do the job var total = items.reduce(reducer, 0); console.log(total); // 1130

可以看出,reduce函数根据初始值0,不断的进行叠加,完成最简单的总和的实现。

reduce函数的返回结果类型和传入的初始值相同,上个实例中初始值为number类型,同理,初始值也可为object类型。

例2:

var items = [10, 120, 1000];// our reducer functionvar reducer = function add(sumSoFar, item) {  sumSoFar.sum = sumSoFar.sum + item; return sumSoFar; }; // do the job var total = items.reduce(reducer, { sum: 0}); console.log(total); // {sum:1130}

进阶应用

使用reduce方法可以完成多维度的数据叠加。如上例中的初始值{sum: 0},这仅仅是一个维度的操作,如果涉及到了多个属性的叠加,如{sum: 0,totalInEuros: 0,totalInYen: 0},则需要相应的逻辑进行处理。

在下面的方法中,采用分而治之的方法,即将reduce函数第一个参数callback封装为一个数组,由数组中的每一个函数单独进行叠加并完成reduce操作。所有的一切通过一个manager函数来管理流程和传递初始参数。

var manageReducers = function(reducers) {  return function(state, item) {    return Object.keys(reducers).reduce(      function(nextState, key) {        reducers[key](state, item);        return state;      },      {}    );  }};

上面就是manager函数的实现,它需要reducers对象作为参数,并返回一个callback类型的函数,作为reduce的第一个参数。在该函数内部,则执行多维的叠加工作(Object.keys())。

通过这种分治的思想,可以完成目标对象多个属性的同时叠加,完整代码如下:

var reducers = {    totalInEuros : function(state, item) {    return state.euros += item.price * 0.897424392;  },  totalInYen : function(state, item) {    return state.yens += item.price * 113.852;  }};var manageReducers = function(reducers) {  return function(state, item) {    return Object.keys(reducers).reduce(      function(nextState, key) {        reducers[key](state, item);        return state;      },      {}    );  }};var bigTotalPriceReducer = manageReducers(reducers);var initialState = {euros:0, yens: 0};var items = [{price: 10}, {price: 120}, {price: 1000}];var totals = items.reduce(bigTotalPriceReducer, initialState);console.log(totals);

在来一个例子:

某同学的期末成绩如下表示

var result = [    {        subject: 'math',        score: 88    },    {        subject: 'chinese',        score: 95 }, { subject: 'english', score: 80 } ];

如何求该同学的总成绩?

var sum = result.reduce(function(prev, cur) {    return cur.score + prev; }, 0);

假设该同学因为违纪被处罚在总成绩总扣10分,只需要将初始值设置为-10即可。

var sum = result.reduce(function(prev, cur) {    return cur.score + prev; }, -10);

我们来给这个例子增加一点难度。假如该同学的总成绩中,各科所占的比重不同,分别为50%,30%,20%,我们应该如何求出最终的权重结果呢?

解决方案如下:

var dis = {    math: 0.5,    chinese: 0.3, english: 0.2 } var sum = result.reduce(function(prev, cur) { return cur.score + prev; }, -10); var qsum = result.reduce(function(prev, cur) { return cur.score * dis[cur.subject] + pre; }, 0) console.log(sum, qsum);

再看一个例子,如何知道一串字符串中每个字母出现的次数?

var arrString = 'abcdaabc';arrString.split('').reduce(function(res, cur) { res[cur] ? res[cur] ++ : res[cur] = 1 return res; }, {})

由于可以通过第二参数设置叠加结果的类型初始值,因此这个时候reduce就不再仅仅只是做一个加法了,我们可以灵活的运用它来进行各种各样的类型转换,比如将数组按照一定规则转换为对象,也可以将一种形式的数组转换为另一种形式的数组,大家可以动手去尝试一样。

[1, 2].reduce(function(res, cur) { res.push(cur + 1); return res; }, [])

koa的源码中,有一个only模块,整个模块就一个简单的返回reduce方法操作的对象:

var only = function(obj, keys){ obj = obj || {}; if ('string' == typeof keys) keys = keys.split(/ +/); return keys.reduce(function(ret, key){ if (null == obj[key]) return ret; ret[key] = obj[key]; return ret; }, {}); };

通过对reduce概念的理解,这个模块主要是想新建并返回一个obj对象中存在的keys的object对象。

 
var a = {    env : 'development',    proxy : false,    subdomainOffset : 2}only(a,['env','proxy']) // {env:'development',proxy : false}

转载于:https://www.cnblogs.com/raind/p/8557120.html

你可能感兴趣的文章
java中i++和++i的区别。
查看>>
python3编写网络爬虫17-验证码识别
查看>>
防XSS攻击
查看>>
形形色色的下拉菜单(特效菜单)
查看>>
C++ OpenSSL 之一:编译和使用
查看>>
Class.forName()的原理机制
查看>>
无网络联机打单机游戏---博客园老牛大讲堂
查看>>
#iOS问题记录#动态Html加载本地CSS和JS文件
查看>>
jquery事件之select选中事件
查看>>
IIS负载均衡之介绍篇:Application Request Route详解
查看>>
-webkit-overflow-scrolling
查看>>
钉钉开发系列(十一)钉钉网页扫码登录
查看>>
什么是ERP
查看>>
linux ./configure 的参数详解
查看>>
Github 上 Star 最多的个人 Spring Boot 开源学习项目
查看>>
企业级大数据平台构建
查看>>
0302作业.
查看>>
关于:target与定位动画的奇怪现象
查看>>
linq
查看>>
css设置height 100%
查看>>