JS逆序遍历实现代码_javascript技巧

最常用的遍历方式为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

时间: 2024-10-27 07:32:54

JS逆序遍历实现代码_javascript技巧的相关文章

JS实现弹性菜单效果代码_javascript技巧

本文实例讲述了JS实现弹性菜单效果代码.分享给大家供大家参考.具体如下: 这是一款JavaScript+CSS实现弹性菜单--纯属自己写着练习,无使用第三方的类库,我觉得是值得学习前端设计的朋友参考的,有兴趣的朋友可以把弹性的菜单背景换成一个漂亮的图片,这样更漂亮了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-tx-move-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//

完美的js div拖拽实例代码_javascript技巧

本文实例为大家分享了完美的js div拖拽实例代码,供大家参考,具体内容如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head

动态加载js、css的实例代码_javascript技巧

一.原生js: /** * 加载js和css文件 * @param jsonData.path 前缀路径 * @param jsonData.url 需要加载的js路径或css路径 * @param jsonData.type 需要加载的类型 js或css */ function loadWriteFiles(jsonData) { jsonData.path = jsonData.path != undefined ? jsonData.path : ""; if(jsonData.

js判断屏幕分辨率的代码_javascript技巧

一般我们可以通过下面的代码判断分辨率 复制代码 代码如下: <script language="JavaScript">  <!-- Begin  function redirectPage() {  var wjb51=screen.width;var hjb51=screen.height;alert("经系统检测,你的屏幕分辨率为 " + wjb51+"*"+ hjb51 + "by jb51.net"

js滚动条平滑移动示例代码_javascript技巧

本文实例为大家分享了js滚动条平滑移动相关代码,供大家参考,具体内容如下 html页 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="../Scripts/JavaScrip

Js 控制表单域代码_javascript技巧

123[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] js验证为正整数 复制代码 代码如下: <script> var re = /^[1-9]d*$/; //智能验证单个字符 if (!re.test(document.getElementById('group_order').value)){ alert("组排序必须为数字!"); document.getElementById('group_order').focus(); return false; }

简单封装js的dom查询实例代码_javascript技巧

最近一直在啃犀牛书,有感,于是写了个简单的js的dom查询 $ = function (val) { switch(val.charAt(0)) { case '#' : return document.getElementById(val.substring(1)); break; case '.' : val = val.replace('.',''); if(document.getElementsByClassName) return document.getElementsByClas

JS模拟实现Select效果代码_javascript技巧

本文实例讲述了JS模拟实现Select效果代码.分享给大家供大家参考.具体如下: 这里模拟实现一个Select效果,其实这不是模拟,是自制Select,在JavaScript的配合下,运用CSS的UL/LI形成一个可下拉的列表,类似于下拉Select的效果,你可任意修改他们的颜色和内容之类的,用起来更方便了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-mn-select-style-demo-codes/ 具体代码如下: <!DOCT

使用非html5实现js板连连看游戏示例代码_javascript技巧

向大家分享一款如何实现js版连连看游戏,如下图所示: 首先看一下html的布局方式在index.html文件中: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http