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


用过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的数组遍历方法(推荐)的全部叙述,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对phpstudy网站的支持!



相关阅读:
ThinkPHP视图查询详解
HTML5 canvas基本绘图之绘制线段
VC基于ADO技术访问数据库的方法
Android编程之内存溢出解决方案(OOM)实例总结
Android图片处理实例介绍(图)
android预置默认的语音信箱号码具体实现
Java编程中字节流与字符流IO操作示例
VC创建DLL动态链接库的方法
jQuery插件制作之参数用法实例分析
JS文字球状放大效果代码分享
Ubuntu15.04桌面操作系统怎么安装?
使用ajax操作 JavaScript 对象
windows下安装、卸载mysql服务的方法(mysql 5.6 zip解压版安装教程)
MySQL中出现乱码问题的终极解决宝典
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 端午节的一天作文300字 XX中学“南湖之春”广场演出讲话稿 2015开场白 国土局2016年贯彻落实春节期间工作纪律情况汇报 婚后生活感悟 描写月亮的好句子 欢乐的国庆作文500字 人生如游戏作文700字 抵制日货作文1000字 你在乎吗作文900字 描写夏天的唯美句子 青春网事 暖暖作文400字 我也有烦恼作文200字 党员反腐倡廉承诺书 宋丹丹经典语录 『文字控』 △《如果真的深爱,当初怎么会舍得分开。》 爱情里流过的眼泪 茶的烦恼作文700字 对空调好奇 工人入党转正申请书优秀范文 拆房 小学二年级作文600字:泡泡梦 小学二年级作文550字:鸡蛋、鸡蛋变娃娃 我寄端阳小情愫 优秀散文:爱国者何在 小孩的春天 家乡水库作文500字 小学生必背古诗词鉴赏——悯农(春种一粒粟) 因为你不喜欢我.所以你不明白【推荐@ 喜欢唯美 文字 日志 请加我好友】(来自 腾讯微博) 以文学结缘 《声声慢》 文/晓阳 给教师的国庆节祝福语 小学四年级作文400字:国歌,最强劲的旋律 《冰雪奇缘》观后感作文300字 春天是友情流行的季节 世博作文600字 九九重阳节活动总结 【村官感悟】向生命问一声好 论辩获胜的反击战术 囧翻家长爆笑熊孩子 小熊的苹果树 美德少年申请表自我评价 冬夜的雨 家里的“神偷”作文900字 残酷的现实战胜了爱情 《弟子规》读后感1200字 分手伤感话 学雷锋,做好事 我爱我的妹妹200字

Copyright © 2016 phpStudy |