用数组建立一个简单的循环

pkhope 发布于2019-08-20 10:12 / 2658人阅读

摘要：有时我们需要不停的循环数组的元素，就像一组旋转的图片，或者音乐的播放列表。这里告诉你如何使一个数组拥有循环的能力返回当前的元素第一次检查更新第二次检查更新返回元素增加然后返回新的当前元素减少然后返回新的当前元素使用取模操作符更优雅。

有时我们需要不停的循环数组的元素，就像一组旋转的图片，或者音乐的播放列表。这里告诉你如何使一个数组拥有循环的能力：

var aList = ["A","B","C","D","E"];

function make_looper( arr ){

    arr.loop_idx = 0;

    // 返回当前的元素
    arr.current = function(){

      if( this.loop_idx < 0 ){// 第一次检查
        this.loop_idx = this.length - 1;// 更新 loop_idx
      }

      if( this.loop_idx >= this.length ){// 第二次检查
        this.loop_idx = 0;// 更新 loop_idx
      }

      return arr[ this.loop_idx ];//返回元素
    };
    
    // 增加 loop_idx 然后返回新的当前元素
    arr.next = function(){
      this.loop_idx++;
      return this.current();
    };
    // 减少 loop_idx 然后返回新的当前元素
    arr.prev = function(){
      this.loop_idx--;
      return this.current();
    };
}

make_looper( aList);

aList.current();// -> A
aList.next();// -> B
aList.next();// -> C
aList.next();// -> D
aList.next();// -> E
aList.next();// -> A
aList.pop() ;// -> E
aList.prev();// -> D
aList.prev();// -> C
aList.prev();// -> B
aList.prev();// -> A
aList.prev();// -> D

使用 % ( 取模 ) 操作符更优雅。取模返回除法的余数 ( 2 % 5 = 1 and 5 % 5 = 0)：

var aList = ["A","B","C","D","E"];


function make_looper( arr ){

    arr.loop_idx = 0;

    // return current item
    arr.current = function(){
      this.loop_idx = ( this.loop_idx ) % this.length;// 无需检查 !!
      return arr[ this.loop_idx ];
    };

    // 增加 loop_idx 然后返回新的当前元素
    arr.next = function(){
      this.loop_idx++;
      return this.current();
    };
    
    // 减少 loop_idx 然后返回新的当前元素
    arr.prev = function(){
      this.loop_idx += this.length - 1;
      return this.current();
    };
}

make_looper( aList);

aList.current();// -> A
aList.next();// -> B
aList.next();// -> C
aList.next();// -> D
aList.next();// -> E
aList.next();// -> A
aList.pop() ;// -> E
aList.prev();// -> D
aList.prev();// -> C
aList.prev();// -> B
aList.prev();// -> A
aList.prev();// -> D

转载自：http://www.jstips.co

GPU云服务器云服务器 php一个数组的长度一个ASP中的数组 js 把一个数组的值简单的小程序开发用什么

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80038.html

JS数组关联查找的性能优化

摘要：传统个数组的嵌套查询一般通过两个循环体嵌套实现，时间复杂度为而通过建立索引对象的形式的时间复杂度为这种牺牲内存来达到复杂度降幂的的方法能提高多少性能呢下面是以数组长度为数组为的乱序数组进行测试的测试结果。传统2个数组的嵌套查询一般通过两个循环体嵌套实现，时间复杂度为:n^2; 而通过建立索引对象的形式的时间复杂度为：n;这种牺牲内存来达到复杂度降幂的的方法能提高多少性能呢？下面是以...

Stardustsky 2019-08-23 12:11 评论0 收藏0
PHP的优化Tips

摘要：是个巨大的资源库，很多开发者都知道使用能自动打印一份很好格式化的页面源代码的副本使用函数来预防潜在的敏感信息显示给用户。理想的错误报告应该被完全禁用在文件里。优化语句，尽量少进行。 Celebrate what youve accomplished, but raise the bar a little higher each time you succeed. 如果一个方法能被静...

赵春朋 2019-06-27 12:03 评论0 收藏0
微信小程序入门教程--列表渲染多层嵌套循环及wx:key的使用

摘要：前言入门教程之列表渲染多层嵌套循环，目前官方的文档里，主要是一维数组列表渲染的案例，还是比较简单单一，给刚入门的童鞋还是无从入手的感觉。我们也会不定期发布一些微信小程序的学习教程。需要入群的小伙伴，请加我的个人微信。前言入门教程之列表渲染多层嵌套循环，目前官方的文档里，主要是一维数组列表渲染的案例，还是比较简单单一，给刚入门的童鞋还是无从入手的感觉。 {{index}}: {...

tracy 2019-08-02 15:56 评论0 收藏0
微信小程序入门教程--列表渲染多层嵌套循环及wx:key的使用

摘要：前言入门教程之列表渲染多层嵌套循环，目前官方的文档里，主要是一维数组列表渲染的案例，还是比较简单单一，给刚入门的童鞋还是无从入手的感觉。我们也会不定期发布一些微信小程序的学习教程。需要入群的小伙伴，请加我的个人微信。前言入门教程之列表渲染多层嵌套循环，目前官方的文档里，主要是一维数组列表渲染的案例，还是比较简单单一，给刚入门的童鞋还是无从入手的感觉。 {{index}}: {...

Luosunce 2019-08-20 12:35 评论0 收藏0