推薦閱讀：JavaScript學(xué)習(xí)筆記之?dāng)?shù)組的增、刪、改、查

通過(guò)最近學(xué)習(xí)，越來(lái)越感覺(jué)JavaScript的強(qiáng)大與魅力之處，僅數(shù)組一個(gè)知識(shí)點(diǎn)就讓我這樣的初學(xué)者折騰了很久。折騰是折騰，但還是很有效果的，這幾天的學(xué)習(xí)到的一些基本知識(shí)，就在自己的業(yè)務(wù)就用到了。頓感自信心爆棚，我也有一天能學(xué)會(huì)JavaScript。

別的不多說(shuō)了，咱們今天一起來(lái)玩數(shù)組的求和，看看有哪些方法可以實(shí)現(xiàn)數(shù)組的求和。

數(shù)組方法

JavaScript中數(shù)組有很多種方法，下圖能更好的向你闡述JavaScript有多少種方法，作用是啥：

簡(jiǎn)單點(diǎn)回顧一下前面學(xué)習(xí)的知識(shí)：

push():向數(shù)組末尾添加一個(gè)或多個(gè)元素

unshift(): 向數(shù)組的開(kāi)頭添加一個(gè)或多個(gè)元素

pop(): 刪除數(shù)組最后一個(gè)元素

shift(): 刪除數(shù)組第一個(gè)元素

sort(): 給數(shù)組排序

reverse(): 顛倒數(shù)組項(xiàng)在數(shù)組中的位置

concat(): 合并數(shù)組

slice(): 指定的位置開(kāi)始刪除指定的數(shù)組項(xiàng)，并且將刪除的數(shù)組項(xiàng)構(gòu)建成一個(gè)新數(shù)組

splice(): 對(duì)一個(gè)數(shù)組做刪除、插入和替換

indexOf(): 從前向后查找元素在數(shù)組中位置

lastIndexOf(): 從后向前查找元素在數(shù)組中位置

forEach()、every()、some()、filter()和map()：數(shù)組迭代

reduce(): 數(shù)組中的每個(gè)值（從左到右）開(kāi)始合并，最終為一個(gè)值

reduceRight(): 數(shù)組中的每個(gè)值（從右到左）開(kāi)始合并，最終為一個(gè)值

數(shù)組求和

今天的用例，假設(shè)我們有一個(gè)這樣的數(shù)組:

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

需要將數(shù)組中的項(xiàng)值加起來(lái)0+1+2+3+4+5+6+7+8+9。我們應(yīng)該怎么做，或者有哪些方法可以實(shí)現(xiàn)。簡(jiǎn)單的講，就是想辦法讓數(shù)組項(xiàng)一個(gè)一個(gè)加起來(lái)。那是不是就要用到數(shù)組的迭代呢？是不是也可以借助這些方法實(shí)現(xiàn)數(shù)組的求和呢？

for循環(huán)和while循環(huán)

首先想到的就是這兩種循環(huán)方法，這在上一節(jié)也嘗試過(guò)了。再次啰嗦一下：

// 求和：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
})();

再來(lái)?yè)Q個(gè)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ù)組中的每一個(gè)元素執(zhí)行一次回調(diào)函數(shù)。如果一來(lái)，只需要對(duì)這個(gè)回調(diào)函數(shù)做一個(gè)數(shù)組項(xiàng)的累加功能：

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

forEach()方法

forEach()方法讓數(shù)組每一項(xiàng)執(zhí)行給定的回調(diào)函數(shù)callbackfn。這樣，我們可以在回調(diào)函數(shù)getSum做一個(gè)累加計(jì)算。

(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()方法和前面幾種方法略有不同，因?yàn)閑very()方法只有數(shù)組中每一項(xiàng)執(zhí)行回調(diào)函數(shù)結(jié)果合部為true才會(huì)返回，不然就會(huì)返回false。因?yàn)樵谇懊娴幕卣{(diào)函數(shù)中，需要增加return true;

(function() {
var sum = 0;
function getSum(item, index, array) {
sum += item;
return true;//由于every方法是會(huì)在遇到回調(diào)函數(shù)返回的第一個(gè)false時(shí)停止遍歷所以需要始終返回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()方法可以接受一個(gè)回調(diào)函數(shù)callbackfn作為累加器（accumulator），數(shù)組中的每個(gè)值（從左到右）開(kāi)始合并，最終為一個(gè)值。這樣也能讓數(shù)組每個(gè)元素累加起來(lái)，達(dá)到數(shù)組求和的功能。

先創(chuàng)建一個(gè)累加器的回調(diào)函數(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

前面測(cè)試，reduce()方法所費(fèi)時(shí)間最短,本篇在測(cè)試似乎所費(fèi)時(shí)間最長(zhǎng)，不知道在哪出錯(cuò)了，還望有大神能指導(dǎo)迷津。
reduceRight()方法和reduce()方法一樣，只是他從數(shù)組的右邊向左邊累加。

總結(jié)

一個(gè)一個(gè)操作下來(lái)，數(shù)組的求和基本上通過(guò)數(shù)組遍歷來(lái)實(shí)現(xiàn)，那么掌握了數(shù)組中各種遍歷的方法，就能輕松的實(shí)現(xiàn)數(shù)組的求和。雖然這些遍歷的方法能讓實(shí)現(xiàn)數(shù)組的求和，但是不同的方法對(duì)性能有所不同。文章中的示例可能無(wú)法完全闡述他們性能方面的對(duì)比，如果您有更好的建議歡迎分享。

以上內(nèi)容是針對(duì)JavaScript學(xué)習(xí)筆記之?dāng)?shù)組求和方法的全部介紹，希望對(duì)大家有所幫助！

最新評(píng)論