通过array.reduce()实现数据汇总、条件筛选和映射、对象属性的扁平化、转换数据格式、聚合统计、处理树结构数据和性能优化,reduce()的使用详解(附实际应用代码)

简介: array.reduce()可以用来数据汇总、条件筛选和映射、对象属性的扁平化、转换数据格式、聚合统计、处理树结构数据、性能优化等,使用难度相对高一些,但是能大大减少代码量。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时


image.gif 编辑

一、array.reduce()的使用与技巧

1.1、基本语法

array.reduce(callback(accumulator, currentValue, currentIndex, array), initialValue)

1.1.1、参数

       其中callback回调函数用于处理每个数组元素,最后返回一个累加值。

  • accumulator:累加器,累加回调的返回值(或提供的初始值)。
  • currentValue:当前元素。
  • currentIndex(可选):当前元素的索引。
  • array(可选):调用 reduce 的数组。

       initialValue(可选):作为累加器的起始值。如果没有提供,array 的第一个元素将用作累加器的初始值,currentValue 将从 array 的第二个元素开始。

1.1.2、提供参数与行为      

  1. 如果提供了 initialValue,累加器将被设置为这个值,currentValue 将被设置为数组的第一个元素。
  2. 如果没有提供 initialValue,reduce 将从索引 1 开始遍历数组,并且数组的第一个元素将作为累加器的初始值,currentValue 将从数组的第二个元素开始。
  3. callback 函数被依次应用到每个数组元素上,直到所有元素都被处理完毕。
  4. reduce 方法最后返回累加器的最终值。

1.2、返回值

       一个累加值,准确来说是一个累加器,因为不一定是返回一个数值,也可以是数组等其他数据结构,这个结构主要由initialValue决定,比如initialValue是[],那么最后的累加器就是一个数组,根据回调函数决定往数组里添加什么内容。

1.3、使用技巧

       array.reduce()是用于将数组元素归纳(或“缩减”)为单个值的函数。

       应用场景:数据汇总、条件筛选和映射、对象属性的扁平化、转换数据格式、聚合统计、处理树结构数据、性能优化等。

1.3.1、数据汇总

       在处理数据集时,经常需要对数据进行汇总,比如求和、求平均值、求最大/最小值等。

// 在处理数据集时,经常需要对数据进行汇总,比如求和、求平均值、求最大/最小值等。
const numbers = [1, 2, 3, 4, 5];
const total = numbers.reduce((acc, val) => acc + val, 0); // 求和
const average = numbers.reduce((acc, val) => acc + val, 0) / numbers.length; // 求平均值

image.gif

1.3.2、条件筛选和映射

       array.reduce()是可以结合条件判断,用于创建一个新数组,其中只包含满足特定条件的元素。

// reduce() 可以结合条件判断,用于创建一个新数组,其中只包含满足特定条件的元素。
const users = [
  { name: 'Alice', age: 21 },
  { name: 'Bob', age: 25 },
  { name: 'Charlie', age: 20 }
];
const adults = users.reduce((acc, user) => {
  if (user.age >= 18) acc.push(user);
  return acc;
}, []);

image.gif

1.3.3、对象属性的扁平化

       将嵌套的对象结构扁平化,便于后续处理。

// 将嵌套的对象结构扁平化,便于后续处理。
const data = {
  a: { x: 5, y: 6 },
  b: { x: 7, y: 8 }
};
// 方案1、使用reduce嵌套forEach(感谢yzxerha朋友提出的建议)
const flattenedData = Object.keys(data).reduce((acc, key) => {
  Object.keys(data[key]).forEach((subKey) => {
    acc[key + "." + subKey] = data[key][subKey];
  });
  return acc;
}, {});
// 方案2、使用双层reduce嵌套,为了规避双层对象嵌套,将内层的累加起始值设置为外层累加器
// 就能实现内层键值对均累加到外层累加器中,实现双层reduce嵌套结果为单层对象的效果
const flattenedData = Object.keys(data).reduce((acc, key) => {
  return Object.keys(data[key]).reduce((a, k) => {
    a[key + "." + k] = data[key][k];
    return a;
  }, acc);
}, {});
/**
* flattenedData ={
*  'a.x': 5,
*  'a.y': 6,
*  'b.x': 7,
*  'b.y': 8
* }
//

image.gif

1.3.4、转换数据格式

       将数据从一种格式转换到另一种格式,比如将数组转换为对象。

// 将数据从一种格式转换到另一种格式,比如将数组转换为对象。
const arrayOfKeyValuePairs = [['key1', 'value1'], ['key2', 'value2']];
const obj = arrayOfKeyValuePairs.reduce((acc, [key, value]) => {
  acc[key] = value;
  return acc;
}, {});

image.gif

1.3.5、聚合统计

       在处理日志数据或其他需要聚合统计的场景中,array.reduce()可以用于计算不同分类下的统计数据。

// 在处理日志数据或其他需要聚合统计的场景中,reduce() 可以用于计算不同分类下的统计数据。
const salesData = [
  { date: '2021-01-01', product: 'Apple', amount: 10 },
  { date: '2021-01-02', product: 'Apple', amount: 5 },
  { date: '2021-01-01', product: 'Banana', amount: 20 },
  { date: '2021-01-01', product: 'Apple', amount: 20 },
  // ... 更多数据
];
const salesSummary = salesData.reduce((acc, sale) => {
  const key = sale.date + '-' + sale.product;
  if (!acc[key]) {
    acc[key] = { ...sale, total: 0 };
  }
  acc[key].total += sale.amount;
  return acc;
}, {});
// 以该数据为例,结果就会是
/**
* {
*   "2021-01-01-Apple": { date: '2021-01-01', product: 'Apple', amount: 20, total: 30 },
*   "2021-01-02-Apple": { date: '2021-01-02', product: 'Apple', amount: 5, total: 5 },
*   "2021-01-01-Banana": { date: '2021-01-01', product: 'Banana', amount: 20, total: 20 }
*   // ... 更多数据,如果有的话
* }
*/

image.gif

1.3.6、处理树结构数据

       在处理树状结构的数据时,array.reduce() 可以用来递归地构建一个树形结构。

// 在处理树状结构的数据时,reduce() 可以用来递归地构建一个树形结构。
const treeData = [
  { id: 1, parent: null },
  { id: 2, parent: 1 },
  { id: 3, parent: 1 },
  { id: 4, parent: 3 },
  { id: 5, parent: 3 },
  { id: 6, parent: null }, // 另一个根节点
  { id: 7, parent: 6 },
  { id: 8, parent: 2 },
  { id: 9, parent: 2 },
  { id: 10, parent: 8 }
];
const buildTree = (data) => {
  const tree = data.reduce((acc, item) => {
    acc[item.id] = item;
    // 判断是否存在parent节点
    if (item.parent) {
      // 如果acc[item.parent].children属性不存在,就添加一个[]值
      acc[item.parent].children = acc[item.parent].children || [];
      // 将子节点添加到父节点中
      acc[item.parent].children.push(acc[item.id]);
    }
    return acc;
  }, {});
  return Object.values(tree).filter((node) => node.parent === null);
};
const tree = buildTree(treeData);
// 执行完之后,tree的值为:
const tree = 
[
  {
    id: 1,
    parent: null,
    children: [
      { id: 2, parent: 1, children: [{ id: 8, parent: 2, children: [] }, { id: 9, parent: 2, children: [] }] },
      { id: 3, parent: 1, children: [{ id: 4, parent: 3, children: [] }, { id: 5, parent: 3, children: [] }] }
    ]
  },
  {
    id: 6,
    parent: null,
    children: [{ id: 7, parent: 6, children: [] }]
  }
]

image.gif

1.3.7、性能优化

       在某些情况下,array.reduce()可以用于优化性能,因为它允许在单一的遍历中完成复杂的操作,减少了迭代次数。

// 在某些情况下,reduce() 可以用于优化性能,因为它允许在单一的遍历中完成复杂的操作,减少了迭代次数。
// 假设有一个大型数组,需要执行一个复杂的操作
const largeArray = /* ... */;
const result = largeArray.reduce((accumulator, item) => {
  // 执行复杂操作并更新accumulator
  return accumulator;
}, initialValue);

image.gif

二、总结

       array.reduce()可以用来数据汇总、条件筛选和映射、对象属性的扁平化、转换数据格式、聚合统计、处理树结构数据、性能优化等,使用难度相对高一些,但是能大大减少代码量。

       W3school传送门(我的博客更详细):JavaScript Array reduce() 方法

       更多前端精彩分享请移步:各种前端问题的技巧和解决方案

       博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~

相关文章
|
1月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
1月前
|
移动开发 运维 供应链
通过array.some()实现权限检查、表单验证、库存管理、内容审查和数据处理;js数组元素检查的方法,some()的使用详解,array.some与array.every的区别(附实际应用代码)
array.some()可以用来权限检查、表单验证、库存管理、内容审查和数据处理等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
1月前
|
供应链 JavaScript 前端开发
通过array.every()实现数据验证、权限检查和一致性检查;js数组元素检查的方法,every()的使用详解,array.some与array.every的区别(附实际应用代码)
array.every()可以用来数据验证、权限检查、一致性检查等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
11月前
|
Python
使用array()函数创建数组
使用array()函数创建数组。
215 3
|
26天前
|
人工智能 Java
Java 中数组Array和列表List的转换
本文介绍了数组与列表之间的相互转换方法,主要包括三部分:1)使用`Collections.addAll()`方法将数组转为列表,适用于引用类型,效率较高;2)通过`new ArrayList<>()`构造器结合`Arrays.asList()`实现类似功能;3)利用JDK8的`Stream`流式计算,支持基本数据类型数组的转换。此外,还详细讲解了列表转数组的方法,如借助`Stream`实现不同类型数组间的转换,并附带代码示例与执行结果,帮助读者深入理解两种数据结构的互转技巧。
Java 中数组Array和列表List的转换
|
1月前
|
Web App开发 存储 前端开发
别再用双层遍历循环来做新旧数组对比,寻找新增元素了!使用array.includes和Set来提升代码可读性
这类问题的重点在于能不能突破基础思路,突破基础思路是从程序员入门变成中级甚至高级的第一步,如果所有需求都通过最基础的业务逻辑来做,是得不到成长的。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
1月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
4月前
|
存储 Go 索引
go语言中的数组(Array)
go语言中的数组(Array)
135 67
|
6月前
|
人工智能 前端开发 JavaScript
拿下奇怪的前端报错(一):报错信息是一个看不懂的数字数组Buffer(475) [Uint8Array],让AI大模型帮忙解析
本文介绍了前端开发中遇到的奇怪报错问题,特别是当错误信息不明确时的处理方法。作者分享了自己通过还原代码、试错等方式解决问题的经验,并以一个Vue3+TypeScript项目的构建失败为例,详细解析了如何从错误信息中定位问题,最终通过解读错误信息中的ASCII码找到了具体的错误文件。文章强调了基础知识的重要性,并鼓励读者遇到类似问题时不要慌张,耐心分析。
140 5
|
6月前
|
存储 Java
Java“(array) <X> Not Initialized” (数组未初始化)错误解决
在Java中,遇到“(array) &lt;X&gt; Not Initialized”(数组未初始化)错误时,表示数组变量已被声明但尚未初始化。解决方法是在使用数组之前,通过指定数组的大小和类型来初始化数组,例如:`int[] arr = new int[5];` 或 `String[] strArr = new String[10];`。
171 2

热门文章

最新文章