脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS reduce

JavaScript reduce方法使用方法介绍

 更新时间：2022年10月17日 11:04:36   作者：爱思考的猪  
Reduce是个纯函数，即只要传入相同的参数，每次都应返回相同的结果。不要把和处理数据无关的代码放在Reduce里，让Reduce保持纯净，只是单纯地执行计算，这篇文章主要介绍了Redux拆分reduce函数流程

1. reduce方法的使用

Array.prototype.reduce(callBack(previousValue, currentValue, currentIndex), initialValue)

reduce是数组的一个高阶方法,用来实现对数组的累加计算

var arr = ['a', 'b', 'c'];
var str = arr.reduce(function (previousValue, currentValue, currentIndex) {
  return previousValue + currentValue;
  });
console.log(str); //abc
var str = arr.reduce(function (previousValue, currentValue, currentIndex) {
  return previousValue + currentValue;
}, 's');
console.log(str); //sabc

reduce的回调函数中一共有4个参数:

  • previous 表示计算的前一个值
  • currentValue 是正在被计算的值
  • currentIndex 是正在计算的索引
  • initialValue 设置累加的初始值

在数组遍历的时候,回调函数的返回值会累加给previousValue,一直到数组遍历完毕返回这个累加值。

在没有传递initialValue的情况下,首次累加的时候previousValue为数组的第1项,currentValue为数组的第2项,当传递了initialValue的时候previousValue初始值为initialValue,currentValue初始值为数组的第一项

2. reduce数组的使用场景

2.1 扁平化数组

使用reduce实现Array.prototype.flat的功能

const arr = [[1, 2, 3], [4, 5, 6, 7, 8], [9]];
const flat = arr.reduce((previousValue, currentValue) => {
   return previousValue.concat(currentValue);
});
console.log(flat); //[1, 2, 3, 4, 5, 6, 7, 8, 9]

2.2 数组去重

const arr = [1, 2, 5, 2, 5, 5];
const deduplication = arr.reduce((previousValue, currentValue) => {
  return previousValue.includes(currentValue) ? previousValue : previousValue.concat([currentValue]);
}, []);
console.log(deduplication);

2.3 计算数组最大/最小值

const arr = [2, 5, 1, 88, 12, -21, 33, 10, 75];
const maxVal = arr.reduce((previousValue, currentValue) => Math.max(previousValue, currentValue));
console.log(maxVal); //8

2.4 数组求和

const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce((previousValue, currentValue) => previousValue + currentValue);
console.log(sum); //15

2.5 计算数组中元素的出现次数

const arr = ['a', 'c', 'b', 'a', 'c', 'e'];
const countedCharacter = arr.reduce((previousValue, currentValue) => {
if (currentValue in previousValue) {
  return { ...previousValue, [currentValue]: previousValue[currentValue] + 1 };
} else {
    return { ...previousValue, [currentValue]: 1 };
  };
}, {});
console.log(countedCharacter); //{a: 2, c: 2, b: 1, e: 1};

3. 操作对象

累加对象数组里面的值

const arr = [{ x: 1 }, { x: 2 }, { x: 3 }];
const sum = arr.reduce((previousValue, currentValue) =>
 previousValue + currentValue.x, 0);
console.log(sum); //6

4. 使用reduce代替.filter().map()

使用reduce可以同时完成过滤合映射,不需要遍历两次数组

const arr = [81, 92, 67, 100, 79];
const scoreArr = arr.filter(s => s > 80).map(val => ({ score: val }));
const scoreArr1 = arr.reduce((previousValue, currentValue) => {
  if (currentValue > 80) { return previousValue.concat([{ score: currentValue }]) } else {
    return previousValue;
  }
}, []);
console.log(scoreArr); //[{score: 81}, {score: 92}, {score: 100}]
console.log(scoreArr1); //[{score: 81}, {score: 92}, {score: 100}]

5. 按顺序执行promise

function p1(num) {
  return new Promise((rs, rj) => {
    setTimeout(() => {
      rs(num + 5);
    }, 100);
  });
 };
function p2(num) {
  return new Promise((rs, rj) => {
    setTimeout(() => {
      rs(num * 2);
    }, 300);
  });
 };
function p3(num) {
  return new Promise((rs, rj) => {
    rs(num - 3);
  })
 };
//链式调用
Promise.resolve(10)
  .then(p1)
  .then(p2)
  .then(p3)
  .then(res => console.log(res)) ;  //27
//使用reduce执行promise
var arr = [p1, p2, p3];
var lastPromise = arr.reduce((previousPromise, currentPromise) => previousPromise.then(currentPromise), Promise.resolve(10));
lastPromise.then(res => console.log(res)); //27

6. 使用compose函数组合实现管道

管道(Pipe)是指输入一个值,依次经过管道(有序的函数运算)后输出这个值,是函数编程的核心思想

function add10(num) {
  return num + 10;
};
function multipl2(num) {
  return num * 2;
};
function divide3(num) {
  return num / 3;
};
const compose = (fns) => (initialValue) => fns.reduce((previous, current) => current(previous), initialValue);
const calculate1 = compose([add10, divide3]);
const calculate2 = compose([divide3, add10, multipl2]);
console.log(calculate1(20)); //10
console.log(calculate2(9)); //26

到此这篇关于JavaScript reduce方法使用方法介绍的文章就介绍到这了,更多相关JS reduce内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • JS定时检测任务任务完成后执行下一步的解决办法

    JS定时检测任务任务完成后执行下一步的解决办法

    这篇文章主要介绍了JS定时检测任务任务完成后执行下一步的解决办法,需要的朋友可以参考下
    2016-12-12
  • JavaScript几种弹窗事件的使用

    JavaScript几种弹窗事件的使用

    这篇文章主要介绍了JavaScript几种弹窗事件的使用,弹窗事件就是在我们执行某操作的时候,弹出信息框给出提示。或收集数据的时候,弹出窗口收集信息,不想收集可以取消隐藏,下文介绍需要的朋友可以参考一下
    2022-02-02
  • JavaScript利用canvas实现鼠标跟随特效

    JavaScript利用canvas实现鼠标跟随特效

    canvas是一个很神奇的玩意儿，比如画表格、画海报图都要用canvas去做。本文就来利用canvas制作个简单的鼠标跟随特效，快跟随小编一起学习一下吧
    2022-10-10
  • 微信小程序使用第三方库Immutable.js实例详解

    微信小程序使用第三方库Immutable.js实例详解

    Immutable 是 Facebook 开发的不可变数据集合。不可变数据一旦创建就不能被修改，是的应用开发更简单，允许使用函数式编程技术，比如惰性评估。微信小程序无法直接使用Immutable.js，下面就来说说微信小程序如何使用第三方库Immutable.js。
    2016-09-09
  • JavaScript添加随滚动条滚动窗体的方法

    JavaScript添加随滚动条滚动窗体的方法

    这篇文章主要介绍了JavaScript添加随滚动条滚动窗体的方法,涉及JavaScript事件响应及页面元素动态操作相关技巧,需要的朋友可以参考下
    2016-02-02
  • javascript中href和replace的比较(详解)

    javascript中href和replace的比较(详解)

    下面小编就为大家带来一篇javascript中href和replace的比较(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • JavaScript 继承 封装 多态实现及原理详解

    JavaScript 继承 封装 多态实现及原理详解

    这篇文章主要介绍了JavaScript 继承 封装 多态实现及原理详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07
  • createElement和onclick

    createElement和onclick

    createElement和onclick...
    2006-11-11
  • 怎样使用 JavaScript 转义字符串中的引号

    怎样使用 JavaScript 转义字符串中的引号

    要转义字符串中的单引号或双引号,需要在字符串内容中的每个单引号或双引号之前使用反斜杠 \ 字符,例如 ‘that’s it’,这篇文章主要介绍了如何使用 JavaScript 转义字符串中的引号,需要的朋友可以参考下
    2023-11-11
  • JavaScript使用prototype定义对象类型(转)[

    JavaScript使用prototype定义对象类型(转)[

    JavaScript使用prototype定义对象类型(转)[...
    2006-12-12

最新评论