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

相关文章

  • 企业微信扫码登录网页功能实现代码

    企业微信扫码登录网页功能实现代码

    这篇文章主要介绍了企业微信扫码登录网页功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-01-01
  • uniapp uni-swipe-action 滑动操作状态恢复功能实现

    uniapp uni-swipe-action 滑动操作状态恢复功能实现

    按照uni-app官方文档的写法,当前一条滑动确认之后页面列表刷新但是滑动的状态还在,我们需要在滑动确认之后 页面刷新 滑动状态恢复,下面小编给大家分享uniapp uni-swipe-action 滑动操作状态恢复功能实现,感兴趣的朋友跟随小编一起看看吧
    2024-06-06
  • JavaScript中如何对多维数组(矩阵)去重的实现

    JavaScript中如何对多维数组(矩阵)去重的实现

    这篇文章主要介绍了JavaScript中如何对多维数组(矩阵)去重的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • Echarts实现单条折线可拖拽效果

    Echarts实现单条折线可拖拽效果

    这篇文章主要为大家详细介绍了Echarts实现单条折线可拖拽,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-12-12
  • javascript的parseFloat()方法精度问题探讨

    javascript的parseFloat()方法精度问题探讨

    javascript中的parseFloat()方法,大家应该不陌生吧,下面为大家介绍下其精度问题,感兴趣的朋友不要错过
    2013-11-11
  • javascript实现移动端 HTML5 图片上传预览和压缩功能示例

    javascript实现移动端 HTML5 图片上传预览和压缩功能示例

    这篇文章主要介绍了javascript实现移动端 HTML5 图片上传预览和压缩功能,结合实例形式分析了javascript移动端 HTML5 图片上传预览和压缩功能具体实现方法与操作注意事项,需要的朋友可以参考下
    2020-05-05
  • 详解js前端代码异常监控

    详解js前端代码异常监控

    本文主要介绍了js代码异常监控的相关知识。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • 微信小程序Error:Fail to open IDE问题的解决方法

    微信小程序Error:Fail to open IDE问题的解决方法

    今天学习小程序时无法通过HBuilderX运行微信小程序,查了相关资料后解决了,下面这篇文章主要给大家介绍了关于微信小程序Error:Fail to open IDE问题的解决方法,需要的朋友可以参考下
    2023-04-04
  • p5.js码绘“跳动的小正方形”的实现代码

    p5.js码绘“跳动的小正方形”的实现代码

    这篇文章主要介绍了p5.js码绘“跳动的小正方形”,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-10-10
  • 微信小程序之几种常见的弹框提示信息实现详解

    微信小程序之几种常见的弹框提示信息实现详解

    这篇文章主要介绍了微信小程序之几种常见的弹框提示信息实现详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07

最新评论