深入浅析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 相关文章推荐
用jquery存取照片的具体实现方法
Jun 30 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
Sep 06 Javascript
JavaScript的arguments对象应用示例
Sep 15 Javascript
jquery实现简洁文件上传表单样式
Nov 02 Javascript
JavaScript编程中实现对象封装特性的实例讲解
Jun 24 Javascript
JavaScript 函数节流详解及方法总结
Feb 09 Javascript
knockoutjs模板实现树形结构列表
Jul 31 Javascript
JS正则表达式完美实现身份证校验功能
Oct 18 Javascript
基于vue实现移动端圆形旋钮插件效果
Nov 28 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
Dec 03 Javascript
详解为什么Vue中不要用index作为key(diff算法)
Apr 04 Javascript
Ajax实现页面无刷新留言效果
Mar 24 Javascript
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
上海牌131型七灯四波段四喇叭一级收音机
2021/03/02 无线电
PHP 编写大型网站问题集
2010/05/07 PHP
浅谈apache和nginx的rewrite的区别
2013/02/22 PHP
php输出echo、print、print_r、printf、sprintf、var_dump的区别比较
2013/06/21 PHP
ThinkPHP like模糊查询,like多匹配查询,between查询,in查询,一般查询书写方法
2018/09/26 PHP
javascript FormatNumber函数实现方法
2008/12/30 Javascript
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
2010/12/28 Javascript
JavaScript实现拼音排序的方法
2012/11/20 Javascript
对之前写的jquery分页做下升级
2014/06/19 Javascript
JavaScript实现将UPC转换成ISBN的方法
2015/05/26 Javascript
JS获取鼠标坐标位置实例分析
2016/01/20 Javascript
Jquery中巧用Ajax的beforeSend方法
2016/01/20 Javascript
JavaScript中获取纯正的undefined的方法
2016/03/06 Javascript
JS及JQuery对Html内容编码,Html转义
2017/02/17 Javascript
JavaScript中最常见的三个面试题解析
2017/03/04 Javascript
轻松理解JavaScript闭包
2017/03/14 Javascript
对vue事件的延迟执行实例讲解
2018/08/28 Javascript
Angular5中状态管理的实现
2018/09/03 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
2018/11/13 Javascript
Node.js 多进程处理CPU密集任务的实现
2019/05/26 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
为什么选择python编程语言入门黑客攻防 给你几个理由!
2018/02/02 Python
基于随机梯度下降的矩阵分解推荐算法(python)
2018/08/31 Python
基于python监控程序是否关闭
2020/01/14 Python
keras 多gpu并行运行案例
2020/06/10 Python
Python3使用tesserocr识别字母数字验证码的实现
2021/01/29 Python
CSS3对图片照片进行边缘模糊处理的实现
2018/08/08 HTML / CSS
详解css3 flex弹性盒自动铺满写法
2020/09/17 HTML / CSS
Theory美国官网:后现代都市风时装品牌
2018/05/09 全球购物
西班牙手机之家:Phone House
2018/10/18 全球购物
竞聘演讲稿范文
2014/01/12 职场文书
大学同学十年聚会感言
2014/02/21 职场文书
单位婚育证明范本
2014/11/21 职场文书
上市公司财务总监岗位职责
2015/04/03 职场文书
分家协议书范本
2016/03/22 职场文书
某药房的新员工入职告知书!
2019/07/15 职场文书