数组求和
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
循环
首先想到的就是这两种循环方法,这在上一节也尝试过了。再次啰嗦一下:
1 // 求和:for循环遍历数组arr 2 (function() { 3 var sum = 0; 4 function getSum(array){ 5 for (var i = 0; i < array.length; i++){ 6 sum += parseInt(array[i]); 7 } 8 return sum; 9 } 10 console.time("getSum"); 11 for (var i = 0; i < 1000000; i++){ 12 sum = 0; 13 getSum(arr); 14 } 15 console.timeEnd("getSum"); // 7877.155ms 16 console.log("使用for循环:sum = " + sum); // 45 17 })();
再来换个while
看看:
1 (function () { 2 var sum = 0; 3 function getSum(array) { 4 var i = array.length; 5 while (i--) { 6 sum += parseInt(array[i]); 7 } 8 return sum; 9 } 10 console.time("getSum"); 11 for (var i = 0; i < 1000000; i++) { 12 var sum = 0; 13 getSum(arr); 14 } 15 console.timeEnd("getSum"); // getSum: 7690.056ms 16 console.log("使用while循环:sum=" + sum); // 使用while循环:sum=45 17 })();
除了古老的for
和while
循环之外,在ES5中还新增加了其他的数组迭代方法,比如forEach()
、every()
、some()
、filter()
和map()
等。而且这些方法都可以让数组中的每一个元素执行一次回调函数。如果一来,只需要对这个回调函数做一个数组项的累加功能:
1 function getSum (item, index, array){ 2 sum += item; 3 }
forEach()
方法
forEach()
方法让数组每一项执行给定的回调函数callbackfn
。这样,我们可以在回调函数getSum
做一个累加计算。
1 (function (){ 2 var sum = 0; 3 4 function getSum (item, index, array){ 5 sum += item; 6 } 7 8 console.time("getSum"); 9 for (var i = 0; i < 1000000; i++){ 10 var sum = 0; 11 arr.forEach(getSum); 12 } 13 console.timeEnd("getSum"); // getSum: 1348.212ms 14 console.log("使用forEach循环:sum=" + sum); // 使用forEach循环:sum=45 15 })()
some()
方法
1 (function (){ 2 var sum = 0; 3 4 function getSum (item, index, array){ 5 sum += item; 6 } 7 8 console.time("getSum"); 9 for (var i = 0; i < 1000000; i++){ 10 var sum = 0; 11 arr.some(getSum); 12 } 13 console.timeEnd("getSum"); // getSum: 1038.737ms 14 console.log("使用some循环:sum=" + sum); // 使用some循环:sum=45 15 })()
map()
方法
1 (function (){ 2 var sum = 0; 3 4 function getSum (item, index, array){ 5 sum += item; 6 } 7 8 console.time("getSum"); 9 for (var i = 0; i < 1000000; i++){ 10 var sum = 0; 11 arr.map(getSum); 12 } 13 console.timeEnd("getSum"); // getSum: 4568.558ms 14 console.log("使用map循环:sum=" + sum); // 使用map循环:sum=45 15 })()
filter()
方法
1 (function (){ 2 var sum = 0; 3 4 function getSum (item, index, array){ 5 sum += item; 6 } 7 8 console.time("getSum"); 9 for (var i = 0; i < 1000000; i++){ 10 var sum = 0; 11 arr.filter(getSum); 12 } 13 console.timeEnd("getSum"); // getSum: 1117.039ms 14 console.log("使用filter循环:sum=" + sum); // 使用filter循环:sum=45 15 })()
every()
方法
every()
方法和前面几种方法略有不同,因为every()
方法只有数组中每一项执行回调函数结果合部为true
才会返回,不然就会返回false
。因为在前面的回调函数中,需要增加return true;
1 (function() { 2 var sum = 0; 3 4 function getSum(item, index, array) { 5 sum += item; 6 return true;//由于every方法是会在遇到回调函数返回的第一个false时停止遍历所以需要始终返回true 7 }; 8 console.time("getSum"); 9 for (var i = 0; i < 1000000; i++){ 10 sum = 0; 11 arr.every(getSum); 12 } 13 console.timeEnd("getSum"); // 1028.892ms 14 console.log("使用every循环:sum = " + sum); // 使用every循环:sum = 45 15 })();
reduce()
和reduceRight()
方法
reduce()
和reduceRight()
方法可以接受一个回调函数callbackfn
作为累加器(accumulator),数组中的每个值(从左到右)开始合并,最终为一个值。这样也能让数组每个元素累加起来,达到数组求和的功能。
先创建一个累加器的回调函数:
1 function getSum(preValue,curValue,index,array) { 2 return preValue += curValue; 3 }
同样以前面的数组为例:
1 function getSum(preValue,curValue,index, array) { 2 return preValue + curValue; 3 } 4 5 console.time("getSum"); 6 for (var i = 0; i < 1000000; i++){ 7 sum = arr.reduce(getSum, 0) 8 } 9 console.timeEnd("getSum"); // 3257.201ms 10 console.log("使用reduce循环:sum = " + sum); // 使用reduce循环:sum = 45
reduceRight()
方法和reduce()
方法一样,只是他从数组的右边向左边累加。