扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JS数组方法reduce的妙用分享
  • 751

0
分享到

JS数组方法reduce的妙用分享

JS 数组方法reduceJS reduce使用JS reduce 2023-02-01 12:02:35 751人浏览 安东尼
摘要

目录1. 基本用法2. 使用技巧（1）数组求和（2）扁平数组（3）数组分组（4）使用 reduce() 代替 filter().map()（5）统计数组元素出现次数（6）串行执行异步

1. 基本用法

reduce() 是 javascript 中一个很有用的数组方法，MDN 对其解释如下：

reduce() 方法对数组中的每个元素按序执行一个 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。

reduce() 方法的语法如下：

array.reduce(reducer, initialValue)

其中有两个参数：（1）reducer 函数，包含四个参数：

  • previousValue：上一次调用 callbackFn 时的返回值。在第一次调用时，若指定了初始值 initialValue，其值则为 initialValue，否则为数组索引为 0 的元素 array[0]。
  • currentValue：数组中正在处理的元素。在第一次调用时，若指定了初始值 initialValue，其值则为数组索引为 0 的元素 array[0]，否则为 array[1]。
  • currentIndex：数组中正在处理的元素的索引。若指定了初始值 initialValue，则起始索引号为 0，否则从索引 1 起始。
  • array：用于遍历的数组。

（2）initialValue 可选 作为第一次调用 callback 函数时参数 previousValue 的值。若指定了初始值 initialValue，则 currentValue 则将使用数组第一个元素；否则 previousValue 将使用数组第一个元素，而 currentValue 将使用数组第二个元素。

下面是一个使用reduce() 求数组元素之和的例子：

const arr = [0, 1, 2, 3, 4];

const calculateSum = (previousValue, currentValue) => {
    console.log('previousValue: ', previousValue);
    console.log('currentValue:', currentValue);
    return previousValue + currentValue;
};

arr.reduce(calculateSum)

reducer 会逐个遍历数组元素，每一步都将当前元素的值与上一步的计算结果相加（上一步的计算结果是当前元素之前所有元素的总和），直到没有更多的元素被相加。

这段代码的输出如下：

其执行过程如下：

当我们给reduce()方法一个初始值12时：

arr.reduce(calculateSum, 12);

其执行过程如下：

如果数组为空且未提供初始值，reduce() 方法就会抛出 TypeError：

const reducer = (accumulator, currentValue) => accumulator + currentValue;

const result = [].reduce(reducer)

console.log(result)

输出结果如下：

2. 使用技巧

（1）数组求和

reduce()方法最直接的用法就是对数组元素求和：

const total = [34, 12, 143, 13, 76].reduce(
  (previousValue, currentValue) => previousValue + currentValue,
  0
);
console.log(total);

其输出结果如下：

278

（2）扁平数组

reduce()方法还可以用来扁平化数组：

const array = [[0, 1], [2, 3], [4, 5], [5, 6]];

const flattenedArray = array.reduce(
  (previousValue, currentValue) => previousValue.concat(currentValue),
  []
);
console.log(flattenedArray);

输出结果如下：

[0, 1, 2, 3, 4, 5, 5, 6]

如果数组有不止一层嵌套数组，可以递归调用 reduce 函数来扁平化，然后将它们与最终的数组连接起来即可。

const nestedArray = [[1, [2, 3]], [4, 5], [[6, 7], [8, 9]]];

function flattenArray(nestedArray) {
  return nestedArray.reduce(
    (accumulator, currentValue) => 
      accumulator.concat(
        Array.isArray(currentValue) ? flattenArray(currentValue) : currentValue
      ),
    []);
}

const flattenedArray = flattenArray(nestedArray);
console.log(flattenedArray)

输出结果如下：

[1, 2, 3, 4, 5, 6, 7, 8, 9]

（3）数组分组

假设有一个国家对象数组，根据国家所在洲对数组中的每个国家进行分组。可以使用 reduce 方法来完成：

cosnt countries = [
    {name: "Germany", continent: "Europe"},
    {name: "Brazil", continent: "South America"},
    {name: "India", continent: "Asia"},
    {name: "France", continent: "Europe"},
    {name: "South Korea", continent: "Asia"},
]

const groupedCountries = countries.reduce(
  (groupedCountries, country) => {
    if (!groupedCountries[country.continent]){
      groupedCountries[country.continent] = []
    }
    groupedCountries[country.continent].push(country)
    return groupedCountries
  },
  {}
);
console.log(groupedCountries)

输出结果如下：

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

在 Javascript 中，数组的 filter 方法可以通过回调过滤数组中的元素，map 方法可以通过回调内部传递的逻辑使用旧数组创建一个新数组。有时我们必须同时使用这两种方法，对某些条件过滤的结果创建一个新数组。

可以使用 reduce 方法来完成相同的工作，这样就只需要遍历数组一次。例如，要创建一个大于 30 的数字的平方根数组，使用 filter().map() 可能会这么写：

const numbers = [3, 21, 34, 121, 553, 12, 53, 5, 42, 11];

const newArray = numbers.filter(number => number > 30).map(number => Math.sqrt(number));

使用 reduce 实现：

const numbers = [3, 21, 34, 121, 553, 12, 53, 5, 42, 11];

const newArray = numbers.reduce((previousValue, currentValue) => {
  if (currentValue > 30) {
    previousValue.push(Math.sqrt(currentValue))
  }
  return previousValue
}, []);

console.log(newArray);

输出结果如下：

[5.830951894845301, 11, 23.515952032609693, 7.280109889280518, 6.48074069840786]

（5）统计数组元素出现次数

可以使用reduce来统计数组中每个元素出现的次数：

const colors = ['green', 'red', 'red', 'yellow', 'red', 'yellow', 'green', 'green'];

const colORMap = colors.reduce((previousValue, currentValue) => {
    previousValue[currentValue] >= 1 ? previousValue[currentValue]++ : previousValue[currentValue] = 1;
    return previousValue;
  }, 
  {}
);

console.log(colorMap);

输出结果如下：

{green: 3, red: 3, yellow: 2}

（6）串行执行异步函数

有一组需要串行执行的异步函数，可以使用reduce()来调用执行：

const functions = [
  async function() { return 1; },
  async function() { return 2; },
  async function() { return 3; }
];

const res = await functions.reduce((promise, fn) => promise.then(fn), Promise.resolve());

console.log(res);  // 输出结果：3

这里的 res 就相当于执行了：

Promise.resolve().then(fn1).then(fn2).then(fn3);

（7）创建管道

假设有一组简单的数学函数，这些函数允许我们增加、减少、加倍和减半：

function increment(input) { return input + 1;}

function decrement(input) { return input — 1; }

function double(input) { return input * 2; }

function halve(input) { return input / 2; }

如果想对一个值进行多次上述操作，就可以使用reduce()。管道是用于将某些初始值转换为最终值的函数列表的术语。我们只需将执行过程中每一步用到函数写在管道数组中即可。

const pipeline = [increment, double, decrement];

const result = pipeline.reduce((total, func) => {
  return func(total);
}, 5);

console.log(result) // 输出结果：11

（8）反转字符串

可以使用reduce()实现字符串的反转：

const str = 'hello world';

[...str].reduce((a,v) => v + a);  // 输出结果：'dlrow olleh'

（9）数组去重

有一个包含重复项的数组，可以使用 reduce() 来对数组进行去重：

const arr = ["?", "?", "?", "?"];


const dedupe = (acc, currentValue) => {
  if (!acc.includes(currentValue)) {
    acc.push(currentValue);
  }
  return acc;
};

const dedupedArr = arr.reduce(dedupe, []); 

console.log(dedupedArr);  // ["?", "?"];

其执行过程如下：

当 reduce 方法遍历数组时，回调函数将应用于数组中的每一项。它会检查累加器中是否缺少当前值，如果是，则将当前值 push 到累加器中。

注：此示例仅用于说明 reduce 方法的工作原理，在实践中，通常会选择使用 Set 对数组进行去重，这是一种性能更高的方法：

dedupedArr = [...new Set(array)];

到此这篇关于js数组方法reduce的妙用分享的文章就介绍到这了,更多相关JS reduce内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

--结束END--

本文标题: JS数组方法reduce的妙用分享

本文链接: https://lsjlt.com/news/193824.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JS数组方法reduce的妙用分享
    目录1. 基本用法2. 使用技巧（1）数组求和（2）扁平数组（3）数组分组（4）使用 reduce() 代替 filter().map()（5）统计数组元素出现次数（6）串行执行异步...
    99+
    2023-02-01
    JS 数组方法reduce JS reduce使用 JS reduce
  • js数组方法reduce怎么用
    这篇文章给大家分享的是有关js数组方法reduce怎么用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。javascript数组那么多方法，为什么我要单挑reduce方法，一个原因...
    99+
    2024-04-02
  • JS中数组reduce()的用法
    本篇内容介绍了“JS中数组reduce()的用法”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！ ...
    99+
    2024-04-02
  • 分享JS的一些优雅写法（reduce/map）
    本篇文章给大家带来了关于JS的相关知识，其中主要给大家介绍了JS的一些优雅写法，感兴趣的朋友下面一起来看一下吧，希望对大家有帮助。JS的一些优雅写法reduce1、可以使用 reduce 方法来实现对象数组中根据某一key值求和例如，假设有...
    99+
    2023-05-14
    前端 JavaScript
  • js中如何使用reduce()方法数组去重
    小编给大家分享一下js中如何使用reduce()方法数组去重，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！JavaScript的特点1.JavaScript主要用来向HTML页面添加交互行为。2.JavaScript可以直...
    99+
    2023-06-14
  • JS实现数组扁平化的方法分享
    目录过程什么是扁平化方法一：flat方法二：递归前言 当我们遇到一个 树形结构的数据，或者 多层嵌套 的数组，如果想拿到数组项的 某一个 字段值，操作起来将会很麻烦，这个时候就需要我...
    99+
    2023-05-16
    JS实现数组扁平化 JS数组扁平化 JS数组
  • JavaScript数组reduce()方法
    将某个值减去数组中的每个元素： var items = [5, 10, 15]; var reducer = function minus(minusSum, item) {    ...
    99+
    2024-04-02
  • JavaScript数组对象高阶函数reduce的妙用详解
    目录reduce 是 JavaScript 数组对象上的一个高阶函数计算数组的平均数求数组的最大值求数组的最小值数组去重计算数组中每个元素出现的次数实现数组分组计算数组中连续递增数字...
    99+
    2023-05-16
    JavaScript数组对象reduce JavaScript高阶函数reduce
  • Javascript数组方法reduce怎么用
    这篇文章主要为大家展示了“Javascript数组方法reduce怎么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Javascript数组方法reduce怎...
    99+
    2024-04-02
  • JavaScript数组reduce()方法怎么用
    本篇内容主要讲解“JavaScript数组reduce()方法怎么用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“JavaScript数组reduce()方法怎么用”吧!将某个值减去数组中的每个...
    99+
    2023-06-26
  • JS数组实用技巧分享
    本篇内容介绍了“JS数组实用技巧分享”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！1. 删除数组的重复项2...
    99+
    2024-04-02
  • JavaScript数组reduce()方法的语法和应用
    本篇内容主要讲解“JavaScript数组reduce()方法的语法和应用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“JavaScript数组reduce()方法的语法和应用”吧!前言redu...
    99+
    2023-06-20
  • JS中的reduce()方法使用小结
    目录一、语法二、实例三、其他相关方法过去有很长一段时间，我一直很难理解 reduce() 这个方法的具体用法，平时也很少用到它。事实上，如果你能真正了解它的话，其实在很多地方我们都可...
    99+
    2024-04-02
  • JavaScript数组reduce()方法怎么使用
    这篇文章主要介绍了JavaScript数组reduce()方法怎么使用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇JavaScript数组reduce()方法怎么使用文章都会...
    99+
    2024-04-02
  • JavaScript数组reduce方法如何使用
    今天小编给大家分享一下JavaScript数组reduce方法如何使用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。redu...
    99+
    2023-07-05
  • JavaScript 数组方法filter与reduce
    目录前言filterreduce数组求和筛选首字母是否是含有b字母结语前言 在ES6新增的数组方法中，包含了多个遍历方法，其中包含了用于筛选的filter和reduce filter...
    99+
    2024-04-02
  • javascript数组中的reduce方法和pop方法
    目录一、reduce方法1直接vs打开2代码部分3运行结果二、pop方1直接vs打开2代码部分3运行结果前言： 在我们的日常开发中 不免会有很多需要处理数据的方法 本节主要说一说fo...
    99+
    2024-04-02
  • javascript数组includes、reduce的基本使用方法
    这篇文章主要讲解了“javascript数组includes、reduce的基本使用方法”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“javascript数组includes、reduce的...
    99+
    2023-06-20
  • JavaScript中数组reduce()方法使用详情
    语法： reduce()对数组中的每个元素进行累加，返回一个新的值，可以传入初始值简单的讲就是返回数组中所有元素的和数  不会改变原始组的值  不会对空数组执行回...
    99+
    2024-04-02
  • javascript数组中reduce方法和pop方法怎么用
    这篇文章给大家分享的是有关javascript数组中reduce方法和pop方法怎么用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。一、reduce方法1直接vs打开2代码部分var geyao=[1,...
    99+
    2023-06-29
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作