在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. Scrapy学习篇（五）之Spiders

    Spiders Spider类定义了如何爬取某个网站.包括了爬取的动作(例如:是否跟进链接)以及如何从网页的内容中提取结构化数据(爬取item).简而言之,Spider就是你定义爬取的动作及分析某个网 ...

  2. 类实例化对象可以访问静态(static)方法，但是不能访问静态属性。

    类-> 访问->静态方法(类的方法)->可以 类 ->访问->普通方法(对象的方法)->不可以(虽然方法里不用$this关键字时,可以!但不支持这种写法) 类-&g ...

  3. STM32 f407 温湿度采集报警

    软件 keil5 实现 1.使用stm32f407中的DS18B20传感器采集空气温度 2.使用stm32f407中的DHT11传感器采集空气的温度和湿度 3.显示到stm32f407的LCD液晶显示 ...

  4. Linux查看DNS服务器及设置DNS服务器

    DNS(Domain Name System,域名系统),因特网上作为域名和IP地址相互映射的一个分布式数据库,能够使用户更方便的访问互联网,而不用去记住能够被机器直接读取的IP数串. 一台主机的dn ...

  5. crm 任务 状态

    ActivityPointer 取消状态:statecode = 2 statuscode = 6 已完成状态:statecode = 1 statuscode = 5

  6. (转)利用WPF的ListView进行大数据量异步加载

    原文:http://www.cnblogs.com/scy251147/archive/2012/01/08/2305319.html 由于之前利用Winform的ListView进行大数据量加载的时 ...

  7. 把一串数字表示成千位分隔形式——JS正则表达式的应用

    梳理思路 要先明白的是,我们将要转换成的数字格式是这样:从个位往左数起,每三位前插入一个千位分隔符,,即可以想象成我们要把每三位数字前面的那个空""匹配出来,并替换成千位分隔符,. ...

  8. Solr Date类型的哪些你不得不了解的细节

    我们先来看看Solr日期类型的一些内幕,然后讨论一下Solr日期类型存在的一些问题,最后我们看看怎么解决现存的问题.概述 DateField 在Solr4.x之前,我们只有DateField,这类型现 ...

  9. Python: json模块实例详解

    ref:https://www.jianshu.com/p/e29611244810 https://www.cnblogs.com/qq78292959/p/3467937.html https:/ ...

  10. linux中使用pip命令遇到的一些问题

    一 安装readline包之后python3.6导入模块异常退出 Type "help", "copyright", "credits" o ...