JavaScript怎么计算数组元素总和

来源:建站技术作者:IT柏拉图头衔:草根站长
导读:本期聚焦于IT柏拉图创作的《JavaScript怎么计算数组元素总和》,敬请观看详情。在JavaScript开发中,经常需要计算一个数组里所有数字加起来是多少。很多初学者会用for循环一个个加,其实现在更推荐用数组自带的reduce方法,代码更短也更清楚。除此之外,还可以用forEach或者扩展运算符配合eval来实现,不过日常写业务最稳的还是reduce。如果数组里有不是数字的内容,要先做过滤或者类型转换,不然结果会变成NaN。这篇文章会把几种常见写法都讲一遍,并说明在什么情况下用哪种方式更合适,帮你快速弄懂JavaScript计算数组元素总和的方法。

在JavaScript里,计算数组元素总和是一个非常常见的需求,比如统计订单金额、求平均分或者累加接口返回的数据。下面介绍几种实用的实现方式,从最基础的循环到更简洁的函数式写法都有覆盖。

JavaScript怎么计算数组元素总和

使用for循环求和

这是最直观的做法,适合刚接触JavaScript的朋友理解底层逻辑。

var arr = [10, 20, 30, 40];
var sum = 0;
for (var i = 0; i < arr.length; i++) {
  sum += arr[i]; // 把每个元素加到sum上
}
console.log(sum); // 输出100

使用forEach方法

forEach是数组提供的遍历方法,比for循环写起来更简洁一些。

var arr = [5, 15, 25];
var sum = 0;
arr.forEach(function(item) {
  sum += item;
});
console.log(sum); // 输出45

使用reduce方法

reduce是处理数组求和最推荐的方式,它把数组归纳为单个值,语义清晰。

var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(total, current) {
  return total + current;
}, 0);
console.log(sum); // 输出10

也可以用箭头函数让代码更短:

var arr = [1, 2, 3, 4];
var sum = arr.reduce((t, c) => t + c, 0);
console.log(sum);

处理包含非数字元素的数组

如果数组里混入了字符串或其他类型,直接加会得到NaN,需要先过滤。

var arr = [1, '2', 3, null, 4];
var sum = arr
  .filter(function(x) { return typeof x === 'number'; })
  .reduce(function(t, c) { return t + c; }, 0);
console.log(sum); // 输出8

几种方式对比

方式可读性适用场景
for循环一般教学或老旧环境
forEach较好简单遍历累加
reduce大多数业务求和

总的来说,日常开发中优先用reduce来计算数组元素总和,遇到脏数据记得先过滤再累加。

JavaScript数组求和reduce方法修改时间:2026-07-30 04:48:21

免责声明:​ 已尽一切努力确保本网站所含信息的准确性。网站内容多为原创整理与精心编撰,观点力求客观中立。本站旨在免费分享,内容仅供个人学习、研究或参考使用。若引用了第三方作品,版权归原作者所有。如内容涉及您的权益,请联系我们处理。
内容垂直聚焦
专注技术核心技术栏目,确保每篇文章深度聚焦于实用技能。从代码技巧到架构设计,为用户提供无干扰的纯技术知识沉淀,精准满足专业提升需求。
知识结构清晰
覆盖从开发到部署的全链路。AI、前端、编程、数据库、服务器、建站、系统层层递进,构建清晰学习路径,帮助用户系统化掌握开发与运维所需的核心技术。
深度技术解析
拒绝泛泛而谈,深入技术细节与实践难点。无论是数据库优化还是服务器配置,均结合真实场景与代码示例进行剖析,致力于提供可直接应用于工作的解决方案。
专业领域覆盖
精准对应开发生命周期。从前端界面到后端编程,从数据库操作到服务器运维,形成完整闭环,一站式满足全栈工程师和运维人员的技术需求。
即学即用高效
内容强调实操性,步骤清晰、代码完整。用户可根据教程直接复现和应用于自身项目,显著缩短从学习到实践的距离,快速解决开发中的具体问题。
持续更新保障
专注既定技术方向进行长期、稳定的内容输出。确保各栏目技术文章持续更新迭代,紧跟主流技术发展趋势,为用户提供经久不衰的学习价值。