面试遇到一个问题:JS数组求和函数。我第一想到的就是数组循环。然而我觉得面试官问这个问题一定不是想考这个人人皆知的方法。当时机智的我竟然想到了递归函数不断加和数组的项,然而折腾了好久都没调好方法,事实证明这并不是最优解。最后面试官问我有没有见过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方法,可以写一个数组求和的sum方法。
reduce()方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终为一个值。
reduce的语法:
array.reduce(callback[,
initialValue])
callback函数接受4个参数: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()方法的执行时间更短。
JS数组求和函数,并求出数组中的最大值
实例代码
<!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="http://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有所帮助哦,如果有疑问的话欢迎留言讨论,小编会及时回复大家的。
<script type="text/javascript">function maxNum()
{
//获取两个文本框的值
var x = document.getElementById("num1").value
var y = document.getElementById("num2").value
//强制转换为数值型
x = parseFloat(x)
y = parseFloat(y)
if(x<y)
{
alert("最大数是:"+y)
}
else
{
alert("最大数是:"+x)
}
}
</script>
第一个数是:<input type="text" id="num1"/><br/>
第二个数是:<input type="text" id="num2"/><br/>
<input type="button" onclick="maxNum()" value="计算"/>
</body>
分析:
这一个程序非常简单,但是包含的信息量不少。
document.getElementById()类似于CSS中的id选择器,而document.getElementById("num1").value表示选取id为num1的元素并获取它的值。这个方法经常用到,大家要记一下。我们在后续课程会给大家详细讲解。
这里用到了函数调用的其中一个方式“在事件中调用函数”。<input type="button" onclick="maxNum()"/>表示在按钮点击的时候执行函数maxNum()。
此外,还有一点要注意的是:有些同学呀,在定义这个函数的时候定义的函数名是max,然后发现出错了!oh~,其实那是你忽略了很基础的一点,那就是自己定义的函数名是不能与JavaScript内部定义的函数名相同。
我写了一个便于理解的算法,只要进行一次循环,不用排序。请参考:
var arr = [1,3,5,7,9,2,4,6,8,10] //定义一个数组alert(func(arr)) //调用函数
function func(arr){
var odd = null, //odd是存放最大奇数的变量
even = null //even是存放最小偶数的变量
//下面对数组元素进行循环判断
for(var n = 0 n < arr.length n++){
//如果元素模2为0,则是偶数
if(arr[n] % 2 == 0){
//如果odd变量是null,或者当前元素大于odd
//则给odd变量值替换为当前元素
if(odd == null || arr[n] > odd){
odd = arr[n]
}
}
//同理,
//如果元素模2不为0,则是奇数
if(arr[n] % 2 != 0){
//如果even变量是null,或者当前元素小于even
//则给even变量值替换为当前元素
if(even == null || arr[n] < even){
even = arr[n]
}
}
}
//最后返回结果
if(odd != null && even != null){
return odd + even
}else{
return null
}
}