JavaScript学习笔记之数组求和方法


Posted in Javascript onMarch 23, 2016

推荐阅读: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循环

首先想到的就是这两种循环方法,这在上一节也尝试过了。再次??乱幌拢?/p>

// 求和: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 建设银行登陆键盘
Jun 10 Javascript
JQUBAR1.1 jQuery 柱状图插件发布
Nov 28 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
Jul 29 Javascript
node.js中的fs.createReadStream方法使用说明
Dec 17 Javascript
jquery mobile开发常见问题分析
Jan 21 Javascript
详解Vue组件之间的数据通信实例
Jun 17 Javascript
JS简单实现滑动加载数据的方法示例
Oct 18 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
Jan 26 Javascript
JS的函数调用栈stack size的计算方法
Jun 24 Javascript
JavaScript引用类型Array实例分析
Jul 24 Javascript
JS document对象简单用法完整示例
Jan 14 Javascript
微信小程序实现多选框功能的实例代码
Jun 24 Javascript
JavaScript学习笔记之数组的增、删、改、查
Mar 23 #Javascript
高效利用Angular中内置服务$http、$location等
Mar 22 #Javascript
BootStrap实用代码片段之一
Mar 22 #Javascript
Javascript中的几种继承方式对比分析
Mar 22 #Javascript
JS函数定义方式的区别介绍
Mar 22 #Javascript
基于javascript制作经典传统的拼图游戏
Mar 22 #Javascript
javascript函数命名的三种方式及区别介绍
Mar 22 #Javascript
You might like
Zend studio for eclipse中使php可以调用mysql相关函数的设置方法
2008/10/13 PHP
解析PHP可变函数的经典用法
2013/06/20 PHP
PHP类继承 extends使用介绍
2014/01/14 PHP
PHP实现JS中escape与unescape的方法
2016/07/11 PHP
PHPMailer使用QQ邮箱实现邮件发送功能
2017/08/18 PHP
在Laravel中使用DataTables插件的方法
2018/05/29 PHP
PHP中Static(静态)关键字功能与用法实例分析
2019/04/05 PHP
国外Lightbox v2.03.3 最新版 下载
2007/10/17 Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
2011/09/21 Javascript
js 取时间差去掉周六周日实现代码
2012/12/25 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
2014/11/23 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
2015/12/30 Javascript
JS调用某段SQL语句的方法
2016/10/20 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
2017/02/19 Javascript
微信小程序 合法域名校验出错详解及解决办法
2017/03/09 Javascript
vue项目持久化存储数据的实现代码
2018/10/01 Javascript
微信小程序整合使用富文本编辑器的方法详解
2019/04/25 Javascript
vue实现随机验证码功能(完整代码)
2019/12/10 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
解决vue字符串换行问题(绝对管用)
2020/08/06 Javascript
JavaScript实现网页计算器功能
2020/10/29 Javascript
关于javascript中的promise的用法和注意事项(推荐)
2021/01/15 Javascript
netbeans7安装python插件的方法图解
2013/12/24 Python
用Python给文本创立向量空间模型的教程
2015/04/23 Python
详解Django中的过滤器
2015/07/16 Python
Python中将字典转换为列表的方法
2016/09/21 Python
python设定并获取socket超时时间的方法
2019/01/12 Python
使用python3调用wxpy模块监控linux日志并定时发送消息给群组或好友
2019/06/05 Python
Python字节单位转换实例
2019/12/05 Python
基于Python和PyYAML读取yaml配置文件数据
2020/01/13 Python
浅谈python元素如何去重,去重后如何保持原来元素的顺序不变
2020/02/28 Python
Python Process创建进程的2种方法详解
2021/01/25 Python
几个解决兼容IE6\7\8不支持html5标签的几个方法
2013/01/07 HTML / CSS
银行竞聘演讲稿范文
2014/04/23 职场文书
精神文明建设汇报材料
2014/12/24 职场文书
MySQL 使用事件(Events)完成计划任务
2021/05/24 MySQL