【前端知识之JS】reduce()方法与使用

饭啊饭°

已于 2022-07-18 09:43:43 修改

阅读量2.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：计算机小知识文章标签： javascript

于 2022-04-14 19:40:50 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44337386/article/details/124179422

计算机小知识专栏收录该内容

5 篇文章

订阅专栏

本文介绍了JavaScript中的reduce()方法，包括其定义、参数解析和一个实际例子。reduce()方法作为forEach()的进阶操作，常用于数组元素的累加或其他操作，将处理后的结果整合成新的值。举例说明了如何使用reduce()进行数组元素的相加。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、reduce是什么？

定义：reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
语法：array.reduce(function(total,currentValue,currentIndex,arr),initialValue)
参数：
total:必须，初始值，或者是计算结束后的返回值；
currentValue:必须，当前元素；
currentIndex:可选，当前元素的索引；
arr:可选，当前元素所属的数组对象，
initialValue：可选，传递给函数的初始值。
进一步解释：就是对于array中的数字，都传递到function函数中，其中function函数的第一项就是初始值，也是要进行操作的结果，第二项是当前array中的数字。

二、举例子

// 计算数组元素的相加和
var numbers = [65, 44, 12, 4];
 
function getSum(total, num) {
    return total + num;
}
function myFunction(item) {
    document.getElementById("demo").innerHTML = numbers.reduce(getSum);
}

总结

其实，reduce()也是forEach()的进阶操作，为遍历以后的数字提供了一个做操作的空间，最长遇到的操作就是相加，其实也可以作为数组的添加，就是把一个数组中的元素，做一些操作后，再放到一个新的数组中。
举例：

newarr = oldarr.reduce((prev,item)=>{
  if(item.id){                   //如果item中有id这个属性
    const [attrId,valueId] = item.id.split(":")  // 就提取id中有用的数据
    prev.push({attrId,valueId})          // 重新组合，存到prev中
  }
  return prev           //返回的prev被newarr接收
},[])                   //prev的初始值是空数组