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

目录

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

1.1、基本语法

1.1.1、参数

1.1.2、提供参数与行为       

1.2、返回值

1.3、使用技巧

1.3.1、数据汇总 

1.3.2、条件筛选和映射

1.3.3、对象属性的扁平化

1.3.4、转换数据格式

1.3.5、聚合统计

1.3.6、处理树结构数据

1.3.7、性能优化

二、总结

一、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、数据汇总 

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

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

1.3.2、条件筛选和映射

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

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

1.3.3、对象属性的扁平化

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

  1.  
  2. // 将嵌套的对象结构扁平化，便于后续处理。
  3.  
  4. const data = {
  5.   a: { x: 5, y: 6 },
  6.   b: { x: 7, y: 8 }
  7. };
  8.  
  9. // 方案1、使用reduce嵌套forEach（感谢yzxerha朋友提出的建议）
  10. const flattenedData = Object.keys(data).reduce((acc, key) => {
  11.   Object.keys(data[key]).forEach((subKey) => {
  12.     acc[key + "." + subKey] = data[key][subKey];
  13.   });
  14.   return acc;
  15. }, {});
  16.  
  17.  
  18. // 方案2、使用双层reduce嵌套，为了规避双层对象嵌套，将内层的累加起始值设置为外层累加器
  19. // 就能实现内层键值对均累加到外层累加器中，实现双层reduce嵌套结果为单层对象的效果
  20. const flattenedData = Object.keys(data).reduce((acc, key) => {
  21.   return Object.keys(data[key]).reduce((a, k) => {
  22.     a[key + "." + k] = data[key][k];
  23.     return a;
  24.   }, acc);
  25. }, {});
  26.  
  27. /**
  28. * flattenedData ={
  29. *  'a.x': 5,
  30. *  'a.y': 6,
  31. *  'b.x': 7,
  32. *  'b.y': 8
  33. * }
  34. //

1.3.4、转换数据格式

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

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

1.3.5、聚合统计

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

  1. // 在处理日志数据或其他需要聚合统计的场景中，reduce() 可以用于计算不同分类下的统计数据。
  2.  
  3. const salesData = [
  4.   { date: '2021-01-01', product: 'Apple', amount: 10 },
  5.   { date: '2021-01-02', product: 'Apple', amount: 5 },
  6.   { date: '2021-01-01', product: 'Banana', amount: 20 },
  7.   { date: '2021-01-01', product: 'Apple', amount: 20 },
  8.   // ... 更多数据
  9. ];
  10.  
  11. const salesSummary = salesData.reduce((acc, sale) => {
  12.   const key = sale.date + '-' + sale.product;
  13.   if (!acc[key]) {
  14.     acc[key] = { ...sale, total: 0 };
  15.   }
  16.   acc[key].total += sale.amount;
  17.   return acc;
  18. }, {});
  19.  
  20.  
  21. // 以该数据为例，结果就会是
  22.  
  23. /**
  24. * {
  25. *   "2021-01-01-Apple": { date: '2021-01-01', product: 'Apple', amount: 20, total: 30 },
  26. *   "2021-01-02-Apple": { date: '2021-01-02', product: 'Apple', amount: 5, total: 5 },
  27. *   "2021-01-01-Banana": { date: '2021-01-01', product: 'Banana', amount: 20, total: 20 }
  28. *   // ... 更多数据，如果有的话
  29. * }
  30. */

1.3.6、处理树结构数据

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

  1. // 在处理树状结构的数据时，reduce() 可以用来递归地构建一个树形结构。
  2.  
  3. const treeData = [
  4.   { id: 1, parent: null },
  5.   { id: 2, parent: 1 },
  6.   { id: 3, parent: 1 },
  7.   { id: 4, parent: 3 },
  8.   { id: 5, parent: 3 },
  9.   { id: 6, parent: null }, // 另一个根节点
  10.   { id: 7, parent: 6 },
  11.   { id: 8, parent: 2 },
  12.   { id: 9, parent: 2 },
  13.   { id: 10, parent: 8 }
  14. ];
  15.  
  16. const buildTree = (data) => {
  17.   const tree = data.reduce((acc, item) => {
  18.     acc[item.id] = item;
  19.     // 判断是否存在parent节点
  20.     if (item.parent) {
  21.       // 如果acc[item.parent].children属性不存在，就添加一个[]值
  22.       acc[item.parent].children = acc[item.parent].children || [];
  23.       // 将子节点添加到父节点中
  24.       acc[item.parent].children.push(acc[item.id]);
  25.     }
  26.     return acc;
  27.   }, {});
  28.  
  29.   return Object.values(tree).filter((node) => node.parent === null);
  30. };
  31.  
  32.  
  33. const tree = buildTree(treeData);
  34.  
  35. // 执行完之后，tree的值为：
  36. const tree = 
  37. [
  38.   {
  39.     id: 1,
  40.     parent: null,
  41.     children: [
  42.       { id: 2, parent: 1, children: [{ id: 8, parent: 2, children: [] }, { id: 9, parent: 2, children: [] }] },
  43.       { id: 3, parent: 1, children: [{ id: 4, parent: 3, children: [] }, { id: 5, parent: 3, children: [] }] }
  44.     ]
  45.   },
  46.   {
  47.     id: 6,
  48.     parent: null,
  49.     children: [{ id: 7, parent: 6, children: [] }]
  50.   }
  51. ]

1.3.7、性能优化

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

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

二、总结

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

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

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

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

文章知识点与官方知识档案匹配，可进一步学习相关知识
算法技能树首页概览62645 人正在系统学习中
注：本文转载自blog.csdn.net的Watermelo617的文章"https://blog.csdn.net/RenGJ010617/article/details/138353608"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
复制链接
相关推荐
发表评论

评论记录：

未查询到任何数据！