JSON

JavaScript学习笔记之数组求和方法

字号+ 作者:H5之家 来源:H5之家 2017-10-11 09:05 我要评论( )

这篇文章主要介绍了JavaScript学习笔记之数组求和方法的相关资料,需要的朋友可以参考下

推荐阅读:JavaScript学习笔记之数组的增、删、改、查

通过最近学习,越来越感觉JavaScript的强大与魅力之处,仅数组一个知识点就让我这样的初学者折腾了很久。折腾是折腾,但还是很有效果的,这几天的学习到的一些基本知识,就在自己的业务就用到了。顿感自信心爆棚,我也有一天能学会JavaScript。

别的不多说了,咱们今天一起来玩数组的求和,看看有哪些方法可以实现数组的求和。

数组方法

JavaScript中数组有很多种方法,下图能更好的向你阐述JavaScript有多少种方法,作用是啥:

简单点回顾一下前面学习的知识:

push():向数组末尾添加一个或多个元素

unshift(): 向数组的开头添加一个或多个元素

pop(): 删除数组最后一个元素

shift(): 删除数组第一个元素

sort(): 给数组排序

reverse(): 颠倒数组项在数组中的位置

concat(): 合并数组

slice(): 指定的位置开始删除指定的数组项,并且将删除的数组项构建成一个新数组

splice(): 对一个数组做删除、插入和替换

indexOf(): 从前向后查找元素在数组中位置

lastIndexOf(): 从后向前查找元素在数组中位置

forEach()、every()、some()、filter()和map():数组迭代

reduce(): 数组中的每个值(从左到右)开始合并,最终为一个值

reduceRight(): 数组中的每个值(从右到左)开始合并,最终为一个值

数组求和

今天的用例,假设我们有一个这样的数组:

var arr = [0,1,2,3,4,5,6,7,8,9];

需要将数组中的项值加起来0+1+2+3+4+5+6+7+8+9。我们应该怎么做,或者有哪些方法可以实现。简单的讲,就是想办法让数组项一个一个加起来。那是不是就要用到数组的迭代呢?是不是也可以借助这些方法实现数组的求和呢?

for循环和while循环

首先想到的就是这两种循环方法,这在上一节也尝试过了。再次啰嗦一下:

// 求和:for循环遍历数组arr (function() { var sum = 0; function getSum(array){ for (var i = 0; i < array.length; i++){ sum += parseInt(array[i]); } return sum; } console.time("getSum"); for (var i = 0; i < 1000000; i++){ sum = 0; getSum(arr); } console.timeEnd("getSum"); // 7877.155ms console.log("使用for循环:sum = " + sum); // 45 })();

再来换个while看看:

(function () { var sum = 0; function getSum(array) { var i = array.length; while (i--) { sum += parseInt(array[i]); } return sum; } console.time("getSum"); for (var i = 0; i < 1000000; i++) { var sum = 0; getSum(arr); } console.timeEnd("getSum"); // getSum: 7690.056ms console.log("使用while循环:sum=" + sum); // 使用while循环:sum=45 })();

除了古老的for和while循环之外,在ES5中还新增加了其他的数组迭代方法,比如forEach()、every()、some()、filter()和map()等。而且这些方法都可以让数组中的每一个元素执行一次回调函数。如果一来,只需要对这个回调函数做一个数组项的累加功能:

function getSum (item, index, array){ sum += item; }

forEach()方法

forEach()方法让数组每一项执行给定的回调函数callbackfn。这样,我们可以在回调函数getSum做一个累加计算。

(function (){ var sum = 0; function getSum (item, index, array){ sum += item; } console.time("getSum"); for (var i = 0; i < 1000000; i++){ var sum = 0; arr.forEach(getSum); } console.timeEnd("getSum"); // getSum: 1348.212ms console.log("使用forEach循环:sum=" + sum); // 使用forEach循环:sum=45 })()

some()方法

(function (){ var sum = 0; function getSum (item, index, array){ sum += item; } console.time("getSum"); for (var i = 0; i < 1000000; i++){ var sum = 0; arr.some(getSum); } console.timeEnd("getSum"); // getSum: 1038.737ms console.log("使用some循环:sum=" + sum); // 使用some循环:sum=45 })()

map()方法

(function (){ var sum = 0; function getSum (item, index, array){ sum += item; } console.time("getSum"); for (var i = 0; i < 1000000; i++){ var sum = 0; arr.map(getSum); } console.timeEnd("getSum"); // getSum: 4568.558ms console.log("使用map循环:sum=" + sum); // 使用map循环:sum=45 })()

filter()方法

(function (){ var sum = 0; function getSum (item, index, array){ sum += item; } console.time("getSum"); for (var i = 0; i < 1000000; i++){ var sum = 0; arr.filter(getSum); } console.timeEnd("getSum"); // getSum: 1117.039ms console.log("使用filter循环:sum=" + sum); // 使用filter循环:sum=45 })()

every()方法

every()方法和前面几种方法略有不同,因为every()方法只有数组中每一项执行回调函数结果合部为true才会返回,不然就会返回false。因为在前面的回调函数中,需要增加return true;

(function() { var sum = 0; function getSum(item, index, array) { sum += item; return true;//由于every方法是会在遇到回调函数返回的第一个false时停止遍历所以需要始终返回true }; console.time("getSum"); for (var i = 0; i < 1000000; i++){ sum = 0; arr.every(getSum); } console.timeEnd("getSum"); // 1028.892ms console.log("使用every循环:sum = " + sum); // 使用every循环:sum = 45 })();

reduce()和reduceRight()方法

reduce()和reduceRight()方法可以接受一个回调函数callbackfn作为累加器(accumulator),数组中的每个值(从左到右)开始合并,最终为一个值。这样也能让数组每个元素累加起来,达到数组求和的功能。

先创建一个累加器的回调函数:

function getSum(preValue,curValue,index,array) { return preValue += curValue; }

同样以前面的数组为例:

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • JavaScript学习笔记-第二章

    JavaScript学习笔记-第二章

    2017-01-29 10:01

  • Javascript学习笔记之 对象篇(四) : for in 循环

    Javascript学习笔记之 对象篇(四) : for in 循环

    2016-08-07 15:00

网友点评