JavaScript中reduce()的用法


Posted in Javascript onMay 11, 2022

前言

过去有很长一段时间,我一直很难理解 reduce() 这个方法的具体用法,平时也很少用到它。事实上,如果你能真正了解它的话,其实在很多地方我们都可以用得上,那么今天我们就来简单聊聊JS中 reduce() 的用法。

一、语法

arr.reduce(function(prev,cur,index,arr){
...
}, init);

其中,

  • arr 表示原数组;
  • prev 表示上一次调用回调时的返回值,或者初始值 init;
  • cur 表示当前正在处理的数组元素;
  • index 表示当前正在处理的数组元素的索引,若提供 init 值,则索引为0,否则索引为1;
  • init 表示初始值。

看上去是不是感觉很复杂?没关系,只是看起来而已,其实常用的参数只有两个:prev 和 cur。接下来我们跟着实例来看看具体用法吧~

二、实例

先提供一个原始数组:

var arr = [3,9,4,3,6,0,9];

实现以下需求的方式有很多,其中就包含使用reduce()的求解方式,也算是实现起来比较简洁的一种吧。

1. 求数组项之和

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

由于传入了初始值0,所以开始时prev的值为0,cur的值为数组第一项3,相加之后返回值为3作为下一轮回调的prev值,然后再继续与下一个数组项相加,以此类推,直至完成所有数组项的和并返回。

2. 求数组项最大值

var max = arr.reduce(function (prev, cur) {
    return Math.max(prev,cur);
});

由于未传入初始值,所以开始时prev的值为数组第一项3,cur的值为数组第二项9,取两值最大值后继续进入下一轮回调。

3. 数组去重

var newArr = arr.reduce(function (prev, cur) {
    prev.indexOf(cur) === -1 && prev.push(cur);
    return prev;
},[]);

实现的基本原理如下:

① 初始化一个空数组

② 将需要去重处理的数组中的第1项在初始化数组中查找,如果找不到(空数组中肯定找不到),就将该项添加到初始化数组中

③ 将需要去重处理的数组中的第2项在初始化数组中查找,如果找不到,就将该项继续添加到初始化数组中

④ ……

⑤ 将需要去重处理的数组中的第n项在初始化数组中查找,如果找不到,就将该项继续添加到初始化数组中

⑥ 将这个初始化数组返回

三、其他相关方法

1. reduceRight()

该方法用法与reduce()其实是相同的,只是遍历的顺序相反,它是从数组的最后一项开始,向前遍历到第一项。

2. forEach()、map()、every()、some()和filter()

详情请戳→简述forEach()、map()、every()、some()和filter()的用法

重点总结:

reduce() 是数组的归并方法,与forEach()、map()、filter()等迭代方法一样都会对数组每一项进行遍历,但是reduce() 可同时将前面数组项遍历产生的结果与当前遍历项进行运算,这一点是其他迭代方法无法企及的

先看w3c语法

array.reduce(function(total, currentValue, currentIndex, arr), initialValue);
/*
  total: 必需。初始值, 或者计算结束后的返回值。
  currentValue: 必需。当前元素。
  currentIndex: 可选。当前元素的索引;                     
  arr: 可选。当前元素所属的数组对象。
  initialValue: 可选。传递给函数的初始值,相当于total的初始值。
*/

常见用法

数组求和

const arr = [12, 34, 23];
const sum = arr.reduce((total, num) => total + num);
<!-- 设定初始值求和 -->
const arr = [12, 34, 23];
const sum = arr.reduce((total, num) => total + num, 10);  // 以10为初始值求和
<!-- 对象数组求和 -->
var result = [
  { subject: 'math', score: 88 },
  { subject: 'chinese', score: 95 },
  { subject: 'english', score: 80 }
];
const sum = result.reduce((accumulator, cur) => accumulator + cur.score, 0); 
const sum = result.reduce((accumulator, cur) => accumulator + cur.score, -10);  // 总分扣除10分

数组最大值

const a = [23,123,342,12];
const max = a.reduce(function(pre,cur,inde,arr){return pre>cur?pre:cur;}); // 342

进阶用法

数组对象中的用法

<!-- 比如生成“老大、老二和老三” -->
const objArr = [{name: '老大'}, {name: '老二'}, {name: '老三'}];
const res = objArr.reduce((pre, cur, index, arr) => {
  if (index === 0) {
    return cur.name;
  }
  else if (index === (arr.length - 1)) {
    return pre + '和' + cur.name;
  }
  else {
    return pre + '、' + cur.name;
  }
}, '');

求字符串中字母出现的次数

const str = 'sfhjasfjgfasjuwqrqadqeiqsajsdaiwqdaklldflas-cmxzmnha';
const res = str.split('').reduce((accumulator, cur) => {accumulator[cur] ? accumulator[cur]++ : accumulator[cur] = 1; return accumulator;}, {});

数组转数组

<!-- 按照一定的规则转成数组 -->
var arr1 = [2, 3, 4, 5, 6]; // 每个值的平方
var newarr = arr1.reduce((accumulator, cur) => {accumulator.push(cur * cur); return accumulator;}, []);

数组转对象

<!-- 按照id 取出stream -->
var streams = [{name: '技术', id: 1}, {name: '设计', id: 2}];
var obj = streams.reduce((accumulator, cur) => {accumulator[cur.id] = cur; return accumulator;}, {});

高级用法

多维的叠加执行操作

<!-- 各科成绩占比重不一样, 求结果 -->
var result = [
  { subject: 'math', score: 88 },
  { subject: 'chinese', score: 95 },
  { subject: 'english', score: 80 }
];
var dis = {
    math: 0.5,
    chinese: 0.3,
    english: 0.2
};
var res = result.reduce((accumulator, cur) => dis[cur.subject] * cur.score + accumulator, 0);
var prices = [{price: 23}, {price: 45}, {price: 56}];
var rates = {
  us: '6.5',
  eu: '7.5',
};
var initialState = {usTotal:0, euTotal: 0};
var res = prices.reduce((accumulator, cur1) => Object.keys(rates).reduce((prev2, cur2) => {
  console.log(accumulator, cur1, prev2, cur2);
  accumulator[`${cur2}Total`] += cur1.price * rates[cur2];
  return accumulator;
}, {}), initialState);

var manageReducers = function() {
  return function(state, item) {
    return Object.keys(rates).reduce((nextState, key) => {
        state[`${key}Total`] += item.price * rates[key];
        return state;
      }, {});
  }
};
var res1= prices.reduce(manageReducers(), initialState);

扁平一个二维数组

var arr = [[1, 2, 8], [3, 4, 9], [5, 6, 10]];
var res = arr.reduce((x, y) => x.concat(y), []);

对象数组去重

const hash = {};
  chatlists = chatlists.reduce((obj, next: Object) => {
    const hashId = `${next.topic}_${next.stream_id}`;
    if (!hash[hashId]) {
      hash[`${next.topic}_${next.stream_id}`] = true;
      obj.push(next);
    }
    return obj;
  }, []);

compose函数

redux compose源码实现

function compose(...funs) {
    if (funs.length === 0) {
        return arg => arg;
    }
    if (funs.length === 1) {
       return funs[0];
    }
    return funs.reduce((a, b) => (...arg) => a(b(...arg)))

}

总结

到此这篇关于JavaScript中reduce()用法实例的文章就介绍到这了!


Tags in this post...

Javascript 相关文章推荐
javascript中注册和移除事件的4种方式
Mar 20 Javascript
jQuery 获取URL的GET参数值的小例子
Apr 18 Javascript
Javascript倒计时页面跳转实例小结
Sep 11 Javascript
JavaScript splice()方法详解
Sep 22 Javascript
jsonp跨域请求实现示例
Mar 13 Javascript
React Hooks的深入理解与使用
Nov 12 Javascript
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
JavaScript作用域链实例详解
Jan 21 Javascript
200行HTML+JavaScript实现年会抽奖程序
Jan 22 Javascript
vue 解决路由只变化参数页面组件不更新问题
Nov 05 Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
Apr 27 Javascript
vue实现购物车结算功能
Jun 18 Javascript
处理canvas绘制图片模糊问题
介绍一下28个JS常用数组方法
May 06 #Javascript
VUE解决跨域问题Access to XMLHttpRequest at
js判断两个数组相等的5种方法
May 06 #Javascript
vue使用watch监听属性变化
Apr 30 #Vue.js
vue-cli3.x配置全局的scss的时候报错问题及解决
vue项目如何打包之项目打包优化(让打包的js文件变小)
You might like
让你同时上传 1000 个文件 (二)
2006/10/09 PHP
PHP 数字左侧自动补0
2008/03/31 PHP
php二维数组转成字符串示例
2014/02/17 PHP
PHP join()函数用法与实例讲解
2019/03/11 PHP
拖拉表格的JS函数
2008/11/20 Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
2010/04/01 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
2013/07/10 Javascript
通过js简单实现将一个文本内容转译成加密文本
2013/10/22 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
2015/07/21 Javascript
JavaScript中的定时器之Item23的合理使用
2015/10/30 Javascript
解决jQuery使用JSONP时产生的错误
2015/12/02 Javascript
javascript原型继承工作原理和实例详解
2016/04/07 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
2016/05/09 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
2016/05/30 Javascript
javascript淘宝主图放大镜功能
2016/10/20 Javascript
原生js实现类似fullpage的单页/全屏滚动
2017/01/22 Javascript
移动端刮刮乐的实现方式(js+HTML5)
2017/03/23 Javascript
p5.js入门教程之平滑过渡(Easing)
2018/03/16 Javascript
NodeJS 将文件夹按照存放路径变成一个对应的JSON的方法
2018/10/17 NodeJs
[14:00]DOTA2国际邀请赛史上最长大战 赛后专访B神
2013/08/10 DOTA
Python实现大文件排序的方法
2015/07/10 Python
Python+django实现文件下载
2016/01/17 Python
python遍历文件夹下所有excel文件
2018/01/03 Python
pytorch中torch.max和Tensor.view函数用法详解
2020/01/03 Python
tensorflow2.0与tensorflow1.0的性能区别介绍
2020/02/07 Python
在tensorflow以及keras安装目录查询操作(windows下)
2020/06/19 Python
pyx文件 生成pyd 文件用于 cython调用的实现
2021/03/04 Python
西班牙购买隐形眼镜、眼镜和太阳镜网站:Lentiamo.es
2020/06/11 全球购物
大学生自我评价怎样写好
2013/10/23 职场文书
小学生作文评语大全
2014/04/21 职场文书
建筑工程质量通病防治方案
2014/06/08 职场文书
2014年城市管理工作总结
2014/12/02 职场文书
人工作失职检讨书
2015/05/05 职场文书
会议承办单位欢迎词
2019/07/09 职场文书
详解Java分布式事务的 6 种解决方案
2021/06/26 Java/Android
总结高并发下Nginx性能如何优化
2021/11/01 Servers