JavaScript学习笔记:数组求和方法
2017-02-16 16:51
676 查看
今天刷了一下leetcode,感觉到了自己的弱。。。
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循环之外,在ES5中还新增加了其他的数组迭代方法,比如forEach()、every()、some()、filter()和map()等。而且这些方法都可以让数组中的每一个元素执行一次回调函数。如果一来,只需要对这个回调函数做一个数组项的累加功能:
先创建一个累加器的回调函数:
同样以前面的数组为例:
前面测试,reduce()方法所费时间最短,本篇在测试似乎所费时间最长,不知道在哪出错了,还望有大神能指导迷津。
reduceRight()方法和reduce()方法一样,只是他从数组的右边向左边累加。
参数资料
【JS趣味】数组求和的方法收集
Fastest JavaScript summation
How to find the sum of an array of numbers
总结
一个一个操作下来,数组的求和基本上通过数组遍历来实现,那么掌握了数组中各种遍历的方法,就能轻松的实现数组的求和。虽然这些遍历的方法能让实现数组的求和,但是不同的方法对性能有所不同。文章中的示例可能无法完全阐述他们性能方面的对比,如果您有更好的建议欢迎分享。
著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: https://www.w3cplus.com/javascript/how-to-find-the-sum-of-an-array-of-numbers.html © w3cplus.com
数组方法
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()方法一样,只是他从数组的右边向左边累加。
参数资料
【JS趣味】数组求和的方法收集
Fastest JavaScript summation
How to find the sum of an array of numbers
总结
一个一个操作下来,数组的求和基本上通过数组遍历来实现,那么掌握了数组中各种遍历的方法,就能轻松的实现数组的求和。虽然这些遍历的方法能让实现数组的求和,但是不同的方法对性能有所不同。文章中的示例可能无法完全阐述他们性能方面的对比,如果您有更好的建议欢迎分享。
著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: https://www.w3cplus.com/javascript/how-to-find-the-sum-of-an-array-of-numbers.html © w3cplus.com
相关文章推荐
- JavaScript学习笔记之数组求和方法
- JavaScript学习笔记:数组求和方法(待续中...)
- JavaScript学习笔记之数组求和方法
- JavaScript学习笔记:检测数组方法
- JavaScript学习笔记之ES6数组方法
- JavaScript学习笔记之ES6数组方法
- JavaScript学习笔记30-数组属性和方法
- javascript 学习笔记 【数组排序方法】
- 分针网—每日分享:JavaScript学习笔记:数组的sort()和reverse()方法
- JavaScript数组相关方法学习笔记
- JavaScript学习笔记29-其他的创建数组的方法
- javascript 学习笔记 【数组迭代方法】
- JavaScript学习笔记 创建数组,数组方法使用
- 《JavaScript 语言精粹》 学习笔记 —— 第六章 数组
- 《JavaScript 语言精粹》 学习笔记 —— 第八章 方法
- JavaScript across domain 方法 学习笔记
- 《JavaScript 语言精粹》 学习笔记 —— 第八章 方法
- Java学习笔记---5.Java数组和方法
- javascript学习笔记(五) Array 数组类型介绍
- 【Javascript学习笔记】由JavaScript中call()方法引发的对面向对象继承机制call的思考