JS逆序遍历实现代码
更新时间：2014年12月02日 23:12:41 投稿：mdxy-dxy
遍历是程序中最常用的语法之一。在JS里，小到数据处理，大到列表渲染，配合ajax对json数据的支持，遍历的使用场景也越来越多
最常用的遍历方式为for语句（也有递归、while方式）。当我们遍历一个数组的时候，我们一般会这么做：
复制代码 代码如下:
var arr = [1,2,3,4,5,6,7,8,9,10];
for(var i=0,total=arr.length;i<total;i++){
console.log(i,arr[i]);
}
这就是最常用的遍历方式：正序遍历。它从数组的第一项依次走到最后一项。
那为什么今天小剧还会提到逆序遍历呢？
这里不得不提下小剧写的组件里最常用的一个模块：events。用于创建自定义事件模型，处理事件的监听及触发，最简单的发布订阅（pub/sub）模式。因为最近发现存在内存溢出的隐患，需要在原有的基础上增加一个解除绑定的方法。
因为同一事件名的回调函数是放在同一数组中，解除绑定也只需要从数组中找到对应的回调函数（同一回调函数可能绑定多次），并且移除即可。
很简单的需求，于是很自然地写出类似下面的代码：
复制代码 代码如下:
//移除数组中的2
var arr = [1,2,2,2,2,1,1,2,2];
for(var i=0,total=arr.length;i<total;i++){
if(arr[i] == 2){
//符合条件，移除
arr.splice(i,1);
}
}
console.log(arr);
很正常的代码有木有，可最终输出结果却是：[1, 2, 2, 1, 1, 2],显然执行结果不符合预期。
问题出在哪儿呢？
仔细分析了一下，发现问题出在了每次匹配成功，执行移除操作之后，都会跳过下一个待检查项，因为数组中之后的每一项都向前上升一位。
找到了问题所在，改了下代码，在执行移除操作之后，调整序列索引index（i）。
复制代码 代码如下:
//移除数组中的2
var arr = [1,2,2,2,2,1,1,2,2];
for(var i=0,total=arr.length;i<total;i++){
if(arr[i] == 2){
//符合条件，移除
arr.splice(i,1);
//调整序列索引
i = i-1;
}
}
console.log(arr);
问题解决了，但总感觉修改序列索引是件调戏for循环的事。于是灵光一闪，啪啪啪，敲出下面的代码：
复制代码 代码如下:
//移除数组中的2
var arr = [1,2,2,2,2,1,1,2,2];
for(var i = arr.length-1;i!=-1;i--){
if(arr[i] == 2){
//符合条件，移除
arr.splice(i,1);
}
}
console.log(arr);
遍历的过程不变，唯一变化的是遍历的顺序变了，对了，还少了一个变量total。
好吧，我承认今天写的东西很屌丝，但通过这个例子，给以后写代码的时候提了个醒，在遍历过程中，如果涉及到修改数组本身（增删），逆序遍历是个比较保险的遍历方式。
coding笔记，留给以后嘲笑自己！
转载请注明来源：http://bh-lay.com/blog/148c07761fa
相关文章
这篇文章主要介绍了JS非行间样式获取函数的实现代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-06-06
这篇文章主要介绍了JavaScript常见继承模式,结合实例形式总结分析了javascript原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承等相关实现技巧与操作注意事项,需要的朋友可以参考下2019-01-01
这篇文章主要介绍了js实现jquery的offset()方法,实例分析了jquery的offset()方法原理与采用javascript实现的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-01-01
easyui form validate总是返回false的原因及解决方法
下面小编就为大家带来一篇easyui form validate总是返回false的原因及解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
一些不错的JS 自定义函数 ，不少网站都在用，都是一些比较不错的函数，可以拿来直接使用。建议学习。2009-08-08
这篇文章主要介绍了关于gulp-changed插件的相关资料,文中介绍的还是相对详细的，需要的朋友可以参考借鉴，下面来一起看看吧。2017-02-02
这篇文章主要介绍了微信小程序订阅消息功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-10-10
通常在开发测试环节，一些资源图片会出现防盗链的错误提示，本文就通过前端基础技术，实现基本的图片跨站显示效果，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-09-09
这篇文章主要介绍了javascript 数组(list)添加/删除，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
本文给大家整理汇总了一些做前端经常需要用的到JavaScript代码片段，非常的全面，有需要的小伙伴可以参考下2016-09-09
最新评论