JavaScript study notes: Array summation method_javascript skills

Recommended reading: JavaScript study notes: Adding, deleting, modifying and checking arrays

Through recent studies, I have become more and more aware of the power and charm of JavaScript. Just one knowledge point about arrays has made a beginner like me struggle for a long time. It was a struggle, but it was still very effective. Some of the basic knowledge I learned in the past few days was used in my own business. I feel so confident that one day I can learn JavaScript.

Not much else to say, let’s play with the sum of arrays today and see what methods can be used to implement the sum of arrays.

Array method

There are many methods for arrays in JavaScript. The following figure can better explain to you how many methods there are in JavaScript and what their functions are:

A brief review of the knowledge learned previously:

push(): Add one or more elements to the end of the array

unshift(): Add one or more elements to the beginning of the array

pop(): delete the last element of the array

shift(): delete the first element of the array

sort(): Sort the array

reverse(): Reverse the position of array items in the array

concat(): merge arrays

slice(): Start deleting the specified array item at the specified position, and construct the deleted array item into a new array

splice(): delete, insert and replace an array

indexOf(): Find the position of the element in the array from front to back

lastIndexOf(): Find the position of the element in the array from back to front

forEach(), every(), some(), filter() and map(): array iteration

reduce(): Each value in the array (from left to right) starts to be merged and finally becomes one value

reduceRight(): Each value in the array (from right to left) starts to be merged and finally becomes one value

Array sum

Today’s use case, suppose we have an array like this:

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

Need to add up the item values ​​in the array to 0+1+2+3+4+5+6+7+8+9. What should we do, or what methods can be achieved. To put it simply, it is to find a way to add the array items one by one. Does that mean we need to use array iteration? Can we also use these methods to implement the sum of arrays?

for loop and while loop

The first thing that comes to mind is these two loop methods, which were also tried in the previous section. Say it again:

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

Let’s try another 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
})();

In addition to the ancient for and while loops, other array iteration methods have been added in ES5, such as forEach(), every(), some(), filter() and map(), etc. And these methods can make each element in the array execute a callback function. If so, you only need to perform an accumulation function of array items on this callback function:

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

forEach() method

The forEach() method allows each item in the array to execute the given callback function callbackfn. In this way, we can do a cumulative calculation in the callback function 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() method

(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() method

(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() method

(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() method

The every() method is slightly different from the previous methods, because the every() method will return only if the sum of the callback function results of each item in the array is true, otherwise it will return false. Because in the previous callback function, return true;

needs to be added

(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() and reduceRight() methods

The reduce() and reduceRight() methods can accept a callback function callbackfn as an accumulator (accumulator). Each value in the array (from left to right) starts to be merged and finally becomes one value. This also allows each element of the array to be accumulated to achieve the function of array summation.

First create a callback function for the accumulator:

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

Similarly take the previous array as an example:

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() メソッドと同じです。

概要

配列の合計は、1つずつ操作することで基本的に配列の走査で実装できます。配列のさまざまな走査方法をマスターすれば、簡単に配列の合計を実装できます。これらの走査メソッドでは配列の合計が可能ですが、メソッドが異なればパフォーマンスへの影響も異なります。記事内の例はパフォーマンスの比較を完全に示していない可能性があります。より良い提案がある場合は、共有してください。

以上の内容はJavaScriptの学習メモの配列加算方法を完全紹介したものですので、皆様のお役に立てれば幸いです。