深入浅析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 相关文章推荐
js 调整select 位置的函数
Feb 21 Javascript
Tab页界面,用jQuery及Ajax技术实现
Sep 21 Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
Apr 27 Javascript
JQuery设置和去除disabled属性的5种方法总结
May 16 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
Aug 19 Javascript
JS数字抽奖游戏实现方法
May 04 Javascript
JS中作用域和变量提升(hoisting)的深入理解
Oct 31 Javascript
微信小程序实现滑动删除效果
May 19 Javascript
关于Angular2 + node接口调试的解决方案
May 28 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
Oct 26 Javascript
vue、react等单页面项目应该这样子部署到服务器
Jan 03 Javascript
使用原生JS实现滚轮翻页效果的示例代码
May 31 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
山进SANGEAN ATS-909X电路分析
2021/03/02 无线电
PHP函数超时处理方法
2016/02/14 PHP
PHP单态模式简单用法示例
2016/11/16 PHP
PHP中实现中文字串截取无乱码的解决方法
2018/05/29 PHP
EasyUi datagrid 实现表格分页
2015/02/10 Javascript
javascript数组排序汇总
2015/07/07 Javascript
AngularJS使用angular-formly进行表单验证
2015/12/27 Javascript
js获取上传文件的绝对路径实现方法
2016/08/02 Javascript
javascript 中的try catch应用总结
2017/04/01 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
2017/07/02 Javascript
详解如何使用webpack在vue项目中写jsx语法
2017/11/08 Javascript
axios post提交formdata的实例
2018/03/16 Javascript
使用JavaScript中的lodash编写双色球效果
2018/06/24 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
2019/05/10 Javascript
js实现适配移动端的拖动效果
2020/01/13 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
2020/12/24 Javascript
详解实现vue的数据响应式原理
2021/01/20 Vue.js
[31:00]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS iG
2014/05/25 DOTA
pymongo实现控制mongodb中数字字段做加法的方法
2015/03/26 Python
Flask的图形化管理界面搭建框架Flask-Admin的使用教程
2016/06/13 Python
python验证码识别的实例详解
2016/09/09 Python
Python使用requests提交HTTP表单的方法
2018/12/26 Python
在PyCharm导航区中打开多个Project的关闭方法
2019/01/17 Python
基于wxPython的GUI实现输入对话框(1)
2019/02/27 Python
解决在keras中使用model.save()函数保存模型失败的问题
2020/05/21 Python
Python环境搭建过程从安装到Hello World
2021/02/05 Python
基于CSS3实现图片模糊过滤效果
2015/11/19 HTML / CSS
Boston Proper官网:美国女装品牌
2017/10/30 全球购物
英国最大线上综合鞋类商城:Office
2017/12/08 全球购物
美国最大婚纱连锁店运营商:David’s Bridal
2019/03/12 全球购物
Java面试题:请问一下代码输出是什么
2015/05/27 面试题
入党积极分子自我鉴定
2014/02/18 职场文书
校园安全广播稿范文
2014/09/25 职场文书
2014年药房工作总结
2014/11/22 职场文书
欢迎词范文
2015/01/27 职场文书
详解Nginx 被动检查服务器的存活状态
2021/10/16 Servers