在js 中，有一些方法， 可以很方便的遍历出数据，不用进行for循环就可以，是怎么实现的呢？

例如：在javascript 中的forEach 方法：打印一个数组的索引和项目：

1. forEach 函数循环

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <script>

         [10, 20, 30, 40, 50, 80, 33].forEach((val, key, curarr) => {

             console.log("数组的第" + key + "项是：" + val);

         });

     </script>

 </head>

 <body>

 </body>

 </html>

运行结果：

这里相当于一个for 循环，只是不需要进行for循环的判断，而是直接输出的

2. 自己封装一个循环函数，在jquery中也有一个each 函数，这里为了区分定义名字为 each1 函数，要求：循环出每一项，并且输出索引和当前项目，如下：

 <script>

         var each1 = function(obj, fn) {

             for (var i = 0, len = obj.length; i < len; i++) {

                 // call函数的作用：在特定的作用域中调用函数，等于设置函数体内this对象的值，以扩充函数赖以运行的作用域。

                 // 此处 call 函数的作用，改变函数的this指向，把this指向obj,然后把(i,obj[i])作为函数参数，调用fn 函数

                 fn.call(obj, i, obj[i]);

             }

         };

         each1([101, 20, 30], function(key, val) {

             // 因为each1 函数中，使用call 改变了函数指向，所以此处this 指向数组[101,20,30]

             console.log(this);

             // 此处为fn 函数内部，所以key,和val 来自fn 的参数；而fn的参数来自于 fn.call(obj,i,obj[i]),是由each1 函数内部的for循环得来的

             console.log("当前项目的索引为：" + key + ",项目值为" + val);

         });

     </script>

运行结果：

3. 自己封装一个each 方法：封装成组件调用each 方法：

 <script>

         ;

         (function(window, undefined) {

             var $ = function(arr) {

                 this.elements = arr;

             }

             $.prototype.each = function(fn) {

                 for (var i = 0, len = this.elements.length; i < len; i++) {

                     fn.call(this.elements, i, this.elements[i])

                 }

             };

             window.$ = $;

         })(window, undefined);

         var obj = new $([10, 20, 30, 40, 50]);

         obj.each(function(index, val) {

             console.log(this);

             console.log("当前数组项目的索引是：" + index + ",数组的值为：" + val);

         });

     </script>

运行结果：

4. 迭代器：制作一个迭代器

    <script>

         var Iterator = function(obj) {

             var curInd = 0; // 当前索引，初始索引设定为0

             // 获取对象的当前项目的下一项的索引

             var next = function() {

                 curInd++;

             };

             // 判定是否循环到了最后一项；当循环到最后一项时，索引等于obj.length；此处返回的是一个布尔值

             // 因为执行next函数，每执行一次，curInd 就加1，所以当curInd 等于obj.length-1时，说明到了最后一项，

             // 所以当isDone返回的结果是true时，说明curInd的值已经大于obj.length了

             var isDone = function() {

                 return curInd >= obj.length;

             };

             // 返回当前项目的值，通过当前索引获取

             var current = function() {

                 return obj[curInd];

             };

             // 这里返回一个对象， 对象里包括三个函数， next, isDone, current

             return {

                 next: next,

                 isDone: isDone,

                 current: current

             };

         }

         var it1 = Iterator([10, 20, 30, 40, 50, 60]);

         while (!it1.isDone()) { //只要迭代器 没有到末尾， 我就开始是迭代

             console.log(it1.isDone(), it1.current());

             it1.next();

         }

     </script>

迭代器有没有到最后，使用在while的执行体有这个函数：it1.next()，它会改变索引的值，从而判断有没有迭代到最后

运行结果：

js 迭代 方法的更多相关文章

  1. js 迭代方法

    迭代方法 * every():对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true. * filter():对数组中的每一项运行给定函数,返回该函数会返回true 的项组成的 ...

  2. js数组之迭代方法

      ES5为数组对象定义了5个迭代方法(即递归,简单的说就是自己可以调用自己). 每个方法接收两个参数:要在每一项上运行的函数(接收3个参数:数组项的值,该项在数组中的位置,数组对象本身)和(可选的) ...

  3. JS高程5.引用类型（6）Array类型的位置方法，迭代方法，归并方法

    一.位置方法 ECMAScript5为数组实例添加了两个位置:indexOf()和 lastIndexOf().这两个方法接收两个参数:要查找的项和(可选的)表示查找起点位置的索引(如在数组[7,8, ...

  4. JS中数组的迭代方法和归并方法

    昨天总结的JavaScript中的数组Array方法 数组的迭代方法 ES5中为数组定义了5个迭代方法.每个方法都要接收两个参数:要在每一项上面运行的函数和(可选的)运行该函数的作用域对象---影响t ...

  5. [Effective JavaScript 笔记]第50条：迭代方法优于循环

    "懒"程序员才是好程序员.复制和粘贴样板代码,一但代码有错误,或代码功能修改,那么程序在修改的时候,程序员需要找到所有相同功能的代码一处处进行修改.这会使人重复发明轮子,而且在别人 ...

  6. 学习zepto.js(原型方法)

    学习zepto.js(原型方法)[1] 转载 新的一周,新的开始,今天来学习一下zepto里边的原型方法,就是通过$.进行调用的方法,也是可以通过$.fn进行扩展的方法: $.camelCase(): ...

  7. JavaScript数据迭代方法差别

    js有很多总接待方法,ES6之后又新增了几个: 这里主要讨论数组迭代遍历的方法所以不会细讲for...in... ES5.ES6数组迭代方法有: forEach map filter some eve ...

  8. js数组方法解析

    js 数组有很多方法,其中有的常用,有的不常用,归纳几个常用的方法,做个总结: 1. 转换方法: 1.1 valueOf():调用这个方法会返回数组本身 <script> var arr ...

  9. [转]Extjs中的迭代方法

    原文地址:http://www.veryhuo.com/a/view/36701.html EXTJS 有很多的迭代方法,例如,你也许已知道的Ext.each,但还有另外一些不为人知且很有用的方法.首 ...

随机推荐

  1. centos7部署openvpn-2.4.6

    一.环境说明 返回主机的IP地址 # ip a | grep "scope global" | awk -F'[ /]+' '{print $3}' | head -1 [root ...

  2. 2018年1月 attribute VS prop 动画渲染

    attribute和prop和UI存在单向/双向绑定关系,参考 https://m.aliyun.com/yunqi/articles/31499 渲染流程 重绘和重排 ? requestAnimat ...

  3. jscs sublime 插件配置 .jscsrc 文件

    { "disallowEmptyBlocks": true, "disallowKeywordsOnNewLine": ["else", & ...

  4. Hadoop的RPC工作原理

    RPC远程过程调用: Hadoop的远程过程调用(Remote Procedure Call,RPC)是Hadoop中核心通信机制,RPC主要通过所有Hadoop的组件元数据交换,如MapReduce ...

  5. 学习js第一天小结

    1.JavaScript的书写方式: <script type="text/javascript">     </script> <script sr ...

  6. 锚点定位，jquery定位到页面指定位置

    jquery锚点定位 $('body,html').animate({scrollTop: $('#ter1').offset().top}, 500);#ter1是你要定位的id对象,500是0.5 ...

  7. tomcat的一次请求过程

    Tomcat处理一个HTTP请求的过程 假设来自客户的请求为: http://tomcat.com/yy/index.jsp 首先 dns 解析tomcat.com机器,一般是ng服务器ip地址 然后 ...

  8. ORA-01940:无法删除当前已链接的用户(转)

    (1)查看用户的连接状况 select username,sid,serial# from v$session ------------------------------------------ 如 ...

  9. uva10603-倒水问题-暴力枚举-隐式图搜索

    题意: 给你三个杯子,a,b,c,没有刻度,刚开始c杯是满的,倒水的要求,要么倒出水的杯子倒空,要么倒入杯子倒满. 结果: 要求某个杯子内有d水量,并且倒出的水量最少,如果倒不出d水量,那么倒出d1( ...

  10. python3封装Api接口

    注:本篇的代码和语法基于Python3.5环境,下面将用到Python 的Flask框架 封装接口主要讲静态接口(无参数传入).动态接口(有参数传入,不同参数返回的信息不同).针对动态接口有三种传参方 ...