在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. php给app写接口进行接口的加密

    <?php/**inc解析接口客户端接口传输规则:1.用cmd参数(base64)来动态调用不同的接口,接口地址统一为 http://a.lovexpp.com2.将要传过来的参数组成一个数组, ...

  2. Android 使用自定义字体

    整个项目要使用第三方字体首先将字体文件放到assets文件夹下 因为整个项目要用第三方字体这里我重写了 TextView Button EditText 三个控件 以TextView 为例代码如下   ...

  3. Fibonacci数列的两种实现方式

    斐波那契数列的形式为:1,1,2,3,5,8,13,21......从第三项开始,后面的每一项都是前面两项的和. 实现的方式有一下 两种: 一:递归方式实现 def fib(n): if n < ...

  4. IIS 反向代理设置

    http://blog.csdn.net/yuanguozhengjust/article/details/23576033

  5. Java基础知识_毕向东_Java基础视频教程笔记(22-25 GUI 网络编程 正则)

    22天-01-GUIGUI:Graphical User Interface 图形用户接口 Java为GUI提供的对象都存在java.Awt和javax.Swing两个包中CLI:Common lin ...

  6. jms和activemq简介

    一.JMS简介 JMS即Java消息服务(Java Message Service)应用程序接口,是一个Java平台中关于面向消息中间件(MOM)的API,用于在两个应用程序之间,或分布式系统中发送消 ...

  7. Delphi TstringList Stringlist的特殊用法

    procedure TForm1.btn1Click(Sender : TObject); var   m      : Integer;   s       : string;   strlst   ...

  8. 通过表达式树把datareader和datatable转换为实体

    续上两篇文章,使用emit构造dynamic method,把 datareader转换为实体,以避免直接使用反射来实现带来的性能损失.代码看似没有纰漏,但是实际上我在framwork4下运行时,调用 ...

  9. 在windows server 2012/2016上，任务管理器性能页面增加磁盘监控的办法

    从windows server 2012开始,微软修改了任务管理器的显示方式,图像化看起来更直观了,但是可惜的是,默认情况下,2012和2016均只显示CPU/内存/网络三个资源监视,没有重要的磁盘, ...

  10. WPF 交替行背景属性

    交替行背景色:RowBackground奇数行,AlternatingRowBackground偶数行 <!--#region 表格--> <DataGrid x:Name=&quo ...