深入浅析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 交通频道 作文范文 青年节鼓励人的祝福短信 好书伴我成长征文600字 主题演讲稿:怎样帮助后进生 教育系统分析评议阶段总结和转段动员讲话 夜半秋落知多少作文700字 与网瘾说再见 动人音乐 我渴望家庭和睦 在全省工商系统统计人员培训班上的讲话 关于新年心愿作文:心爱的东西 小女孩变王妃的故事(童话一) 读《左手倒影,右手年华》有感作文900字 退休赠言大全 《红岩》读后感500字 晚安作文150字 寻找晶石的旅程(3)作文900字 京都人的教养 对你的爱,比酒浓 绿叶的叙说作文800字 安阳粉浆饭作文600字 去祖国的大地走一走 基层锻炼心得体会 初中初一作文750字:自己的事情自己干 新的起? 会电蚊子、苍蝇-----的路灯 闷气,生不得,沟通才是最重要的。 克服公务员面试的不正当心态 西藏高考满分作文范文(3篇) 小p孩的幼稚爱(五)作文1200字 2017经典一句话爱情经典语录 在将来我会记起你,但现在不会作文200字 个人现实表现证明_证明书 工商联年度工作总结范文 一件有趣的事——画脸 祖国在我心中国旗下演讲稿 环境监测站土壤采样工作总结 寒风追星携日月,白雪踏致望春头! 关于端午节的小学作文 冬季长跑运动倡议书 成长的烦恼作文600字初一 魔之历史作文3000字 小学四年级作文350字:我们的“军事基地” 我市召开经管工作会议 《春水》 2015年国庆节作文300字:让人陶醉的周庄 小学雏鹰争章活动总结 我市道路交通管理亟需法规支撑的若干问题初探 法制办领导班子履行职责和廉洁从政情况汇报材料 小学六年级作文1000字:《弟子规》伴我成长 亲历三十年前的一次高考

Copyright © 2016 phpStudy |