深入浅析JS的数组遍历方法(推荐)


Posted in Javascript onJune 15, 2016

用过Underscore的朋友都知道,它对数组(集合)的遍历有着非常完善的API可以调用的,_.each()就是其中一个。下面就是一个简单的例子:

var arr = [1, 2, 3, 4, 5];
_.each(arr, function(el) {
console.log(el);
});

上面的代码会依次输出1, 2, 3, 4, 5,是不是很有意思,遍历一个数组连for循环都不用自己写了。_.each()方法遍历数组非常好用,但是它的内部实现一点都不难。下面就一起来看看到底是如何实现_.each()的。在这之前,我们先来看看_.each()的API。_.each()的一般是如下调用的:

_.each(arr, fn, context);

它接收3个参数,

第一个是需要遍历的数组(其实是对象也是可以的,这个后面我们再一起来讨论);

第二个是它的回调函数(这个回调函数可以传入3个参数,如:function(el, i, arr),分别是当前元素、当前索引和原数组);

第三个是回调函数需要绑定到的上下文,即指定回调函数fn的this值。

好啦,需求已经非常明确了,开始干活啦!

我们先来实现一个最简单的_.each(),它不能够修改上下文this的,接收两个参数,代码如下:

var _ = {}; // 假设这就是underscore哈
// 一个最简单的_.each方法的实现
_.each = function(arr, fn) {
for(var i = 0; i < arr.length; i++) {


fn(arr[i], i, arr);

}

return arr; // 把原数组返回
}

怎么样?是不是很简单呢?只是用一个for循环,不停的调用回调函数即可,短短几行代码就搞定了,相信没有朋友看不懂的哈!下面我们来测试一下看能不能正常工作:

var arr = [1, 2, 3, 4, 5];
_.each(arr, function(el, i, arr) {
console.log(el);
});

在浏览器打开,然后控制台就会看到有正确的输出了。

这么简单的代码一点意思也没有,接下来看一个比较有点挑战性的例子哈。比如,数组arr有个sum属性,我们需要把数组所有的元素求和之后存放到sum里面,如下:

var arr = [1, 2, 3, 4, 5];
arr.sum = 0; // sum属性用来存放数组元素之和
_.each(arr, function(el, i, arr) {
this.sum += el;
});

这时候,回调函数里面用到了this,如果不绑定的话,this默认就是window,这不是我们想要的,我们希望它绑定到数组arr上面。call或者apply可以实现这个功能,代码如下:

var _ = {}; // 假设这就是underscore哈
// bind,接收两个参数fn和context
// 把fn绑定到context上面
var bind = function(fn, context) {
context = context || null;

return function(el, i, arr) {


fn.call(context, el, i, arr);

}
}
// _.each
_.each = function(arr, fn, context) {

// 调用bind方法,把fn绑定到context上面

fn = bind(fn, context);

for(var i = 0; i < arr.length; i++) {


fn(arr[i], i, arr);

}

return arr;
}
// 测试用例:
var arr = [1, 2, 3, 4, 5];
arr.sum = 0; // sum属性用来存放数组元素之和
_.each(arr, function(el, i, arr) {

this.sum += el;
}, arr);
console.log(arr.sum); // 15

好啦,这个_.each()已经足够强大了,可以正常遍历数组,还可以任意指定this值改变回调函数的上下文。但是,我们前面有提到过,Underscore的_.each()还可以遍历对象的 ,这个实现也不难,只要判断一下传入的第一个参数是对象还是数组,如果是数组就像我们一样遍历,否则如果是对象,使用对象的for...in循环遍历就行了。有兴趣的可以自己试试,或者看看underscore的源码。

注意:自从ES5标准以来,原生数组就已经具有了Array.prototype.forEach、Array.prototype.Map等遍历方法了,在项目中可以使用原生的。

以上所述是小编给大家介绍的深入浅析JS的数组遍历方法(推荐)的全部叙述,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript new 需不需要继续使用
Jul 02 Javascript
没有document.getElementByName方法
Aug 19 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
Dec 04 Javascript
document.forms[].submit()使用介绍
Feb 19 Javascript
jquery五角星评分插件示例分享
Feb 21 Javascript
js去字符串前后空格的实现方法
Feb 26 Javascript
JSONP跨域请求实例详解
Jul 04 Javascript
JS给swf传参数的实现方法
Sep 13 Javascript
JavaScript学习笔记整理_setTimeout的应用
Sep 19 Javascript
如何防止INPUT按回车自动提交表单FORM
Dec 06 Javascript
vue中添加mp3音频文件的方法
Mar 02 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
JavaScript对象数组排序实例方法浅析
Jun 15 #Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
Jun 15 #Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
Jun 15 #Javascript
jQuery动态加载css文件实现方法
Jun 15 #Javascript
异步加载JS、CSS代码(推荐)
Jun 15 #Javascript
全面解析Javascript无限添加QQ好友原理
Jun 15 #Javascript
漫谈JS引擎的运行机制 你应该知道什么
Jun 15 #Javascript
You might like
简单的移动设备检测PHP脚本代码
2011/02/19 PHP
PHP 文本文章分页代码 按标记或长度(不涉及数据库)
2012/06/07 PHP
解析php根据ip查询所在地区(非常有用,赶集网就用到)
2013/07/01 PHP
ThinkPHP的I方法使用详解
2014/06/18 PHP
php函数实现判断是否移动端访问
2015/03/03 PHP
学习YUI.Ext 第四天--对话框Dialog的使用
2007/03/10 Javascript
JS 分号引起的一段调试问题
2009/06/18 Javascript
javascript Window及document对象详细整理
2011/01/12 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
2013/07/31 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
2013/12/26 Javascript
javascript中加号(+)操作符的一些神奇作用
2014/06/06 Javascript
js实现缓冲运动效果的方法
2015/04/10 Javascript
基于JS2Image实现圣诞树代码
2015/12/24 Javascript
JavaScript基本类型值-Number类型
2017/02/24 Javascript
微信小程序开发animation心跳动画效果
2017/08/16 Javascript
详解vue中axios的封装
2018/07/18 Javascript
JavaScript实现图片轮播特效
2019/10/23 Javascript
JS实现简易留言板增删功能
2020/02/08 Javascript
原生JS封装拖动验证滑块的实现代码示例
2020/06/01 Javascript
Vue之封装公用变量以及实现方式
2020/07/31 Javascript
Vue router安装及使用方法解析
2020/12/02 Vue.js
Python 元组(Tuple)操作详解
2014/03/11 Python
编写同时兼容Python2.x与Python3.x版本的代码的几个示例
2015/03/30 Python
Python使用plotly绘制数据图表的方法
2017/07/18 Python
python给微信好友定时推送消息的示例
2019/02/20 Python
如何解决django-celery启动后迅速关闭
2019/10/16 Python
python利用faker库批量生成测试数据
2020/10/15 Python
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
2018/03/02 HTML / CSS
HTML5触摸事件(touchstart、touchmove和touchend)的实现
2020/05/08 HTML / CSS
KIKO MILANO英国官网:意大利知名化妆品和护肤品品牌
2017/09/25 全球购物
保护环境建议书400字
2014/05/13 职场文书
中层干部竞聘演讲稿
2014/05/15 职场文书
羽毛球比赛策划方案
2014/06/13 职场文书
软件测试专业推荐信
2014/09/18 职场文书
MySQL中distinct与group by之间的性能进行比较
2021/05/26 MySQL
Sleuth+logback 设置traceid 及自定义信息方式
2021/07/26 Java/Android