JavaScript學習筆記之陣列求和方法

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;
}

同樣以前面的陣列為例:


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迴圈:sum = "   sum); // 使用reduce迴圈:sum = 45

前面測試,reduce()方法所費時間最短,本篇在測試似乎所費時間最長,不知道在哪出錯了,還望有大神能指導迷津。
reduceRight()方法和reduce()方法一樣,只是他從陣列的右邊向左邊累加。

總結

一個一個操作下來,陣列的求和基本上通過陣列遍歷來實現,那麼掌握了陣列中各種遍歷的方法,就能輕鬆的實現陣列的求和。雖然這些遍歷的方法能讓實現陣列的求和,但是不同的方法對效能有所不同。文章中的示例可能無法完全闡述他們效能方面的對比,如果您有更好的建議歡迎分享。

以上內容是針對JavaScript學習筆記之陣列求和方法的全部介紹,希望對大家有所幫助!

您可能感興趣的文章:

JavaScript常用字串與陣列擴充套件函式小結javascript Array陣列物件的擴充套件函式程式碼js實現prototype擴充套件的方法(字串,日期,陣列擴充套件)javascript框架設計讀書筆記之陣列的擴充套件與修復js陣列方法擴充套件實現陣列統計函式編寫js擴充套件方法判斷一個陣列中是否包含某個元素擴充套件js物件陣列的OrderByAsc和OrderByDesc方法實現思路JS的陣列的擴充套件例項程式碼javascript陣列的擴充套件實現程式碼集合求js陣列的最大值和最小值的四種方法分享JS陣列求和與求最大值的方法JS實現求陣列起始項到終止項之和的方法【基於陣列擴充套件函式】