JS逆序遍历实现代码

作者:mdxy-dxy 时间:2023-10-11 07:31:49 

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

标签:逆序遍历
0
投稿

猜你喜欢

  • 详解Python字符串切片

    2021-09-10 05:10:43
  • 利用Python正则表达式过滤敏感词的方法

    2023-05-07 05:05:18
  • python 画二维、三维点之间的线段实现方法

    2022-07-26 15:22:25
  • Perl字符串处理函数大全

    2023-11-25 17:33:35
  • 全民学编程之 Hello World

    2023-03-13 20:48:37
  • Python的Django框架下管理站点的基本方法

    2022-02-14 12:37:19
  • Python实现敏感词过滤的4种方法

    2021-10-01 06:21:08
  • 对DJango视图(views)和模版(templates)的使用详解

    2021-05-30 00:37:51
  • JavaScript 中的 this 绑定规则详解

    2024-04-30 08:53:15
  • Vue组件全局注册实现警告框的实例详解

    2024-05-02 16:53:05
  • 基于DataFrame筛选数据与loc的用法详解

    2021-09-13 04:37:32
  • 一些实用性较高的js方法

    2024-04-29 13:37:40
  • Python模拟键盘输入自动登录TGP

    2021-11-04 11:27:22
  • Python编写单元测试代码实例

    2022-11-02 12:27:09
  • Response.Flush的用法

    2010-04-08 12:54:00
  • 浅谈vue单一组件下动态修改数据时的全部重渲染

    2024-04-27 15:51:55
  • 基于ExtJs框架的B/S高级查询界面

    2008-10-07 18:05:00
  • Python面向对象程序设计之私有变量,私有方法原理与用法分析

    2022-04-17 01:37:50
  • Django使用模板后无法找到静态资源文件问题解决

    2021-09-01 09:49:25
  • python 文本单词提取和词频统计的实例

    2022-10-25 04:53:03
  • asp之家 网络编程 m.aspxhome.com