JavaScript数组求和与最大值获取:循环与reduce方法详解
本文介绍JavaScript中数组求和与获取最大值的两种实现方式。首先通过for循环遍历累加,其次利用ES5新增的reduce方法进行函数式编程。文章详细解析了reduce方法的语法、参数含义及初始值处理,并对比了两种方法的执行效率,最后提供完整示例代码。
前言
面试背景与reduce方法引入
在面试中曾遇到一个关于JavaScript数组求和的问题。我的第一反应是使用数组循环,但直觉告诉我,面试官考察的并非这种基础且显而易见的解法。当时我尝试通过递归函数不断累加数组元素,但调试过程繁琐且最终证明并非最优方案。随后面试官提示我是否了解reduce(),这确实是我当时未曾掌握的知识。因此,我查阅相关资料后发现,Array.reduce()是ES5标准中新增的属性,与之类似的还有Array.reduceRight()。。
接下来,我们将总结数组求和的具体实现方法。
基于循环的数组求和实现
最直观的方法:通过循环获取
利用for循环逐项累加数组元素。具体代码实现如下:
Array.prototype.sum = function (){
var result = 0;
for(var i = 0; i < this.length; i++) {
result += this[i];
}
return result;
};
[1,4,7,2,10].sum(); // 24
利用reduce方法优化求和
使用reduce方法
借助reduce方法,我们可以构建一个名为sum的数组求和函数。
reduce()方法接收一个回调函数作为累加器,从数组左侧开始处理每个值,逐步缩减,最终返回单一结果。
reduce方法的语法结构如下:
array.reduce(callback[, initialValue]);
callback回调函数接收四个参数:previousValue(上一次调用回调返回的值)、currentValue(当前正在处理的元素)、index(当前元素的索引)以及callback(数组本身,仅在第一次调用时作为第一个参数传入)。
initialValue参数为可选,用于指定初始值。若指定了initialValue,则将其作为初次使用的previous值;若未指定,则默认使用数组的第一个元素作为previous初始值,此时current(当前元素)将从第二个元素开始处理。
Array.prototype.sum = function (){
return this.reduce(function (partial, value){
return partial + value;
})
};
[1,4,7,2,10].sum(); // 24
与第一种循环方法相比,使用reduce()方法的执行效率通常更高。
两种方法的性能对比可以通过在函数执行前后调用new Date()获取即时时间,进而计算时间差来实现。由于不同运行环境的差异,此处不展开具体测试,但实验结果表明reduce()方法的执行时间更短。
数组求和与最大值获取综合示例
JavaScript数组求和函数,并求出数组中的最大值
实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>本站_js数组求和和最大值方法_本站网</title>
<meta name="keywords" content="站长,网页特效,网页特效代码,js特效,js脚本,脚本,广告代码,jb51.net,www.jb51.net,本站网" />
<meta name="description" content="www.jb51.net,本站网,站长必备js特效及广告代码。大量高质量js特效,提供高质量广告代码下载,尽在本站网" />
</head>
<body>
<a href="https://www.jb51.net/">本站网</a>,站长必备的高质量网页特效和广告代码。jb51.net,站长js特效。<hr>
<script type="text/javascript">
//求和
Array.prototype.sum = function () {
for (var sum = i = 0; i < this.length; i++)sum += parseInt(this[i]);
return sum ;
};
//求最大值
Array.prototype.maxima = function () {
for (var i = 0, maxValue = Number.MIN_VALUE; i < this.length; i++)parseInt(this[i]) > maxValue && (maxValue = this[i]);
return maxValue;
};
//应用
var arr = [1,21,3,4,22,45,60,7,32];
alert(arr.join("+") + "=" + arr.sum()); alert(arr.join("|") + "中, 最大的数是:" + arr.maxima());
</script>
</body>
</html>
以上就是本文的全部内容,希望对大家使用JavaScript有所帮助。如有任何疑问,欢迎留言讨论,小编会及时回复大家。
JavaScript入门书籍避坑:这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00
JavaScript函数定义的三种方式:声明、表达式与箭头函数
2026-11-05 13:50:55
JavaScript中escape、encodeURI和encodeURIComponent对空格的处理差异
2026-11-05 12:47:23
