JavaScript學習筆記之數(shù)組求和方法
推薦閱讀：JavaScript學習筆記之數(shù)組的增、刪、改、查
通過最近學習，越來越感覺JavaScript的強大與魅力之處，僅數(shù)組一個知識點就讓我這樣的初學者折騰了很久。折騰是折騰，但還是很有效果的，這幾天的學習到的一些基本知識，就在自己的業(yè)務就用到了。頓感自信心爆棚，我也有一天能學會JavaScript。
別的不多說了，咱們今天一起來玩數(shù)組的求和，看看有哪些方法可以實現(xiàn)數(shù)組的求和。
數(shù)組方法
JavaScript中數(shù)組有很多種方法，下圖能更好的向你闡述JavaScript有多少種方法，作用是啥：
簡單點回顧一下前面學習的知識：
push():向數(shù)組末尾添加一個或多個元素
unshift(): 向數(shù)組的開頭添加一個或多個元素
pop(): 刪除數(shù)組最后一個元素
shift(): 刪除數(shù)組第一個元素
sort(): 給數(shù)組排序
reverse(): 顛倒數(shù)組項在數(shù)組中的位置
concat(): 合并數(shù)組
slice(): 指定的位置開始刪除指定的數(shù)組項，并且將刪除的數(shù)組項構建成一個新數(shù)組
splice(): 對一個數(shù)組做刪除、插入和替換
indexOf(): 從前向后查找元素在數(shù)組中位置
lastIndexOf(): 從后向前查找元素在數(shù)組中位置
forEach()、every()、some()、filter()和map()：數(shù)組迭代
reduce(): 數(shù)組中的每個值（從左到右）開始合并，最終為一個值
reduceRight(): 數(shù)組中的每個值（從右到左）開始合并，最終為一個值
數(shù)組求和
今天的用例，假設我們有一個這樣的數(shù)組:
var arr = [0,1,2,3,4,5,6,7,8,9];
需要將數(shù)組中的項值加起來0+1+2+3+4+5+6+7+8+9。我們應該怎么做，或者有哪些方法可以實現(xiàn)。簡單的講，就是想辦法讓數(shù)組項一個一個加起來。那是不是就要用到數(shù)組的迭代呢？是不是也可以借助這些方法實現(xiàn)數(shù)組的求和呢？
for循環(huán)和while循環(huán)
首先想到的就是這兩種循環(huán)方法，這在上一節(jié)也嘗試過了。再次啰嗦一下：
// 求和：for循環(huán)遍歷數(shù)組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循環(huán):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循環(huán)：sum=" + sum); // 使用while循環(huán)：sum=45
})();
除了古老的for和while循環(huán)之外，在ES5中還新增加了其他的數(shù)組迭代方法，比如forEach()、every()、some()、filter()和map()等。而且這些方法都可以讓數(shù)組中的每一個元素執(zhí)行一次回調函數(shù)。如果一來，只需要對這個回調函數(shù)做一個數(shù)組項的累加功能：
function getSum (item, index, array){
sum += item;
}
forEach()方法
forEach()方法讓數(shù)組每一項執(zhí)行給定的回調函數(shù)callbackfn。這樣，我們可以在回調函數(shù)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循環(huán)：sum=" + sum); // 使用forEach循環(huán)：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循環(huán)：sum=" + sum); // 使用some循環(huán)：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循環(huán)：sum=" + sum); // 使用map循環(huán)：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循環(huán)：sum=" + sum); // 使用filter循環(huán)：sum=45
})()
every()方法
every()方法和前面幾種方法略有不同，因為every()方法只有數(shù)組中每一項執(zhí)行回調函數(shù)結果合部為true才會返回，不然就會返回false。因為在前面的回調函數(shù)中，需要增加return true;
(function() {
var sum = 0;
function getSum(item, index, array) {
sum += item;
return true;//由于every方法是會在遇到回調函數(shù)返回的第一個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循環(huán):sum = " + sum); // 使用every循環(huán):sum = 45
})();
reduce()和reduceRight()方法
reduce()和reduceRight()方法可以接受一個回調函數(shù)callbackfn作為累加器（accumulator），數(shù)組中的每個值（從左到右）開始合并，最終為一個值。這樣也能讓數(shù)組每個元素累加起來，達到數(shù)組求和的功能。
先創(chuàng)建一個累加器的回調函數(shù):
function getSum(preValue,curValue,index,array) {
return preValue += curValue;
}
同樣以前面的數(shù)組為例:
function getSum(preValue,curValue,index, array) {
return preValue + curValue;
}
console.time("getSum");
for (var i = 0; i < 1000000; i++){
sum = arr.reduce(getSum, 0)
}
console.timeEnd("getSum"); // 3257.201ms
console.log("使用reduce循環(huán):sum = " + sum); // 使用reduce循環(huán):sum = 45
前面測試，reduce()方法所費時間最短,本篇在測試似乎所費時間最長，不知道在哪出錯了，還望有大神能指導迷津。
reduceRight()方法和reduce()方法一樣，只是他從數(shù)組的右邊向左邊累加。
總結
一個一個操作下來，數(shù)組的求和基本上通過數(shù)組遍歷來實現(xiàn)，那么掌握了數(shù)組中各種遍歷的方法，就能輕松的實現(xiàn)數(shù)組的求和。雖然這些遍歷的方法能讓實現(xiàn)數(shù)組的求和，但是不同的方法對性能有所不同。文章中的示例可能無法完全闡述他們性能方面的對比，如果您有更好的建議歡迎分享。
以上內容是針對JavaScript學習筆記之數(shù)組求和方法的全部介紹，希望對大家有所幫助！
相關文章
內存泄露是指一塊被分配的內存既不能使用，又不能回收，直到瀏覽器進程結束，由于瀏覽器垃圾回收方法有bug，會產生內存泄露，下面與大家詳細探討下內存泄露的幾種情況2013-05-05
javascript 從定義到執(zhí)行，你應該知道的那些事，本文為大家一一列舉，希望對大家的學習有所幫助2016-06-06
bootstrap與pagehelper實現(xiàn)分頁效果
這篇文章主要為大家詳細介紹了bootstrap與pagehelper實現(xiàn)分頁效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章主要介紹了JS 實現(xiàn)緩存算法的示例（FIFO/LRU）,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
可折疊的樹形菜單想必大家并不陌生吧，實現(xiàn)方法有多種，在本文將為大家介紹下js是如何實現(xiàn)的，希望對大家有所幫助2013-09-09
這篇文章主要為大家介紹了Javascript實現(xiàn)動態(tài)時鐘效果，非常詳細的注釋代碼，文具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
JavaScript中自帶的 reduce()方法使用示例詳解
下文小編給大家?guī)砹薺s中自帶的reduce()方法使用示例詳解，非常不錯，具有參考借鑒價值，感興趣的朋友一起學習吧2016-08-08
js 禁止選擇功能實現(xiàn)代碼(兼容IE/Firefox)
有時候出于某種需要，不希望用戶可以選擇某個區(qū)域，進行下面的操作，這里給出簡單的代碼。2010-04-04
最近看了一下developer.mozilla.org里的東西，發(fā)現(xiàn)它為Array對象添加了不少generic method，趕得上Prototype的熱心程度。2009-10-10
這篇文章主要為大家詳細介紹了微信小程序日歷組件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12