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 相关文章推荐
jQuery 学习 几种常用方法
Jun 11 Javascript
Jquery Ajax的Get方式时需要注意URL地方
Apr 07 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
Jul 15 Javascript
JS和Jquery获取和修改label的值的示例代码
Jan 15 Javascript
jquery统计用户选中的复选框的个数
Jun 06 Javascript
JS实现窗口加载时模拟鼠标移动的方法
Jun 03 Javascript
深入学习AngularJS中数据的双向绑定机制
Mar 04 Javascript
Node.js中npm常用命令大全
Jun 09 Javascript
bootstrap table 多选框分页保留示例代码
Mar 08 Javascript
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
Vue简单封装axios之解决post请求后端接收不到参数问题
Feb 16 Javascript
关于vue-router-link选择样式设置
Apr 30 Vue.js
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
PHP中变量引用与变量销毁机制分析
2014/11/15 PHP
php将字符串转换成16进制的方法
2015/03/17 PHP
php中array_unshift()修改数组key注意事项分析
2016/05/16 PHP
简单PHP会话(session)说明介绍
2016/08/21 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
网页图片延时加载的js代码
2010/04/22 Javascript
jquery命令汇总,方便使用jquery的朋友
2012/06/26 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
2013/09/29 Javascript
JavaScript?Apple设备检测示例代码
2013/11/15 Javascript
深入理解Javascript中this的作用域
2014/08/12 Javascript
node.js中的console.warn方法使用说明
2014/12/09 Javascript
JavaScript学习笔记之定时器
2015/01/22 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
2015/03/02 Javascript
jQuery实现简易的天天爱消除小游戏
2015/10/16 Javascript
详解nodejs微信公众号开发——2.自动回复
2017/04/10 NodeJs
Vue-Router模式和钩子的用法
2018/02/28 Javascript
Python设计模式中单例模式的实现及在Tornado中的应用
2016/03/02 Python
Python、PyCharm安装及使用方法(Mac版)详解
2017/04/28 Python
用Python设计一个经典小游戏
2017/05/15 Python
Python排序搜索基本算法之希尔排序实例分析
2017/12/09 Python
python3.6使用urllib完成下载的实例
2018/12/19 Python
Pyqt5如何让QMessageBox按钮显示中文示例代码
2019/04/11 Python
pytorch GAN生成对抗网络实例
2020/01/10 Python
Python之字典对象的几种创建方法
2020/09/30 Python
简单介绍HTML5中audio标签的使用
2015/09/24 HTML / CSS
设计师家具购买和委托在线市场:Viyet
2016/11/16 全球购物
查找廉价航班和发现新目的地:Kiwi.com
2019/02/25 全球购物
趣天网日本站:Qoo10 JP
2019/09/18 全球购物
财务会计专业毕业生自荐信
2013/10/02 职场文书
化学实验员岗位职责
2013/12/28 职场文书
大学生职业生涯规划书模板
2014/01/03 职场文书
建筑个人求职信范文
2014/01/25 职场文书
公司财务会计主管应聘求职信
2014/09/26 职场文书
go结构体嵌套的切片数组操作
2021/04/28 Golang
聊聊JS ES6中的解构
2021/04/29 Javascript
MySQL的InnoDB存储引擎的数据页结构详解
2022/03/03 MySQL