目 录CONTENT

文章目录

一文掌握JS数组中的reduce和reduceAll方法

萧瑟
2023-05-24 / 0 评论 / 2 点赞 / 288 阅读 / 2,263 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2023-07-03,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

image-1684919730228

JavaScript中有很多数组方法,可以帮助我们处理数组数据,提高编码效率。本文将介绍两个常用的数组方法:reducereduceRight,它们可以对数组中的每个元素执行一个函数,然后返回一个累计的结果。我们将看到这两个方法的用法和区别,以及一些实际的应用场景。

reduce

reduce方法接收一个回调函数和一个初始值作为参数,回调函数又接收四个参数:累计值、当前元素、当前索引和原数组。reduce方法会从数组的第一个元素开始,依次执行回调函数,每次将回调函数的返回值作为下一次的累计值,直到遍历完整个数组,最后返回最终的累计值。

例如,我们可以用reduce方法来计算一个数组中所有元素的和:

let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce((acc, cur) => acc + cur, 0);
console.log(sum); // 15

在这个例子中,我们将初始值设为0,然后每次将累计值和当前元素相加,最后得到数组的总和。

我们也可以用reduce方法来实现一些其他的功能,比如:

  • 求一个数组中的最大值或最小值:
let arr = [1, 2, 3, 4, 5];
let max = arr.reduce((acc, cur) => Math.max(acc, cur), -Infinity);
let min = arr.reduce((acc, cur) => Math.min(acc, cur), Infinity);
console.log(max); // 5
console.log(min); // 1
  • 将一个二维数组转化为一维数组:
let arr = [[1, 2], [3, 4], [5, 6]];
let flat = arr.reduce((acc, cur) => acc.concat(cur), []);
console.log(flat); // [1, 2, 3, 4, 5, 6]
  • 统计一个数组中每个元素出现的次数:
let arr = ["a", "b", "c", "a", "b", "c", "a", "b"];
let count = arr.reduce((acc, cur) => {
acc[cur] = (acc[cur] || 0) + 1;
return acc;
}, {});
console.log(count); // {a: 3, b: 3, c: 2}

reduceRight

reduceRight方法和reduce方法非常类似,唯一的区别是它是从数组的最后一个元素开始遍历,而不是从第一个元素开始。因此,如果回调函数的操作不是可交换的(即顺序有关),那么使用reduceRight方法和使用reduce方法会得到不同的结果。

例如,我们可以用reduceRight方法来实现一个简单的字符串反转:

let str = "Hello";
let reverse = str.split("").reduceRight((acc, cur) => acc + cur, "");
console.log(reverse); // olleH

在这个例子中,我们先将字符串分割成字符数组,然后用reduceRight方法从右往左拼接每个字符,最后得到反转后的字符串。

我们也可以用reduceRight方法来实现一些其他的功能,比如:

  • 实现一个简单的函数组合:
// 定义三个函数
let addOne = x => x + 1;
let double = x => x * 2;
let square = x => x * x;

// 定义一个组合函数
let compose = (...fns) => x =>
fns.reduceRight((acc, cur) => cur(acc), x);

// 使用组合函数
let f = compose(square, double, addOne);
console.log(f(2)); // (2 + 1) * 2 * (2 + 1) * 2 = 144
  • 实现一个简单的模板引擎:
// 定义一个模板字符串
let template = "Hello {{name}}, welcome to {{place}}!";

// 定义一个数据对象
let data = {
name: "Alice",
place: "Wonderland"
};

// 定义一个替换函数
let replace = (str, data) =>
Object.keys(data).reduceRight(
(acc, cur) => acc.replace(`{{${cur}}}`, data[cur]),
str
);

// 使用替换函数
let result = replace(template, data);
console.log(result); // Hello Alice, welcome to Wonderland!

本文介绍了两个常用的数组方法:reduce和reduceRight,它们可以对数组中的每个元素执行一个函数,然后返回一个累计的结果。我们看到了这两个方法的用法和区别,以及一些实际的应用场景。通过掌握这两个方法,我们可以玩转js数组数据,成为前端大佬!

往期精彩:

1、win10更新翻车,SSD硬盘寿命受损,微软已发布修复补丁

2、不带手机也能付款!微信正式发布刷掌支付

3、部分UP主在B站开启视频付费功能 用户每月支付30元/月才能观看视频


weixin

2

评论区