在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. oracle em管理平台

      检查em有没有打开     https://172.30.2.120:1158/em/console/logon/logon   输入你配置的账号密码       界面如下图所示  

  2. [UE4]运行模式

    Selected Viewport和Simulate都可以在游戏模式和漫游模式之间切换. Selected Viewport:默认是游戏模式. Simulate:默认是漫游模式. 按Ctrl+F1后, ...

  3. [UE4]射击产生弹孔：Spawn Decal At Location、Spawn Decal Attached

    Spawn Decal At Location.Spawn Decal Attached 在指定的位置生成一个材质贴上去 产生随意旋转角度

  4. [UE4]结构体

    只有数据变量属性,没有函数和事件

  5. win10家庭版怎么开启Administrator超级管理员帐户

    一.win10家庭版开启administrator方法: 1.通过Cortana搜索cmd,匹配出“命令提示符”,右键以管理员身份运行:   2.在打开的命令提示符窗口输入net user admin ...

  6. opencv 基础数据结构

    头文件:cxcore/include/cxtypes.h CvPoint: CvPoint:(构造cvPoint) CvPoint2D32f: CvPoint3D32f: CvSize: CvSize ...

  7. 自动化工具gulp搭建环境(详解）

    src:读取文件和文件夹       dest:生成文件(写文件)       watch:监控文件       task:定制任务         pipe:以流的方式处理文件 bower的安装和使 ...

  8. 【Linux】使用ZStack私有云创建本地Linux服务器

    1.运维配置了一台Linux的主机,然后安装了ZStack,前面这部分操作运维处理了. 2.首先打开Zstack的网址地址,一般是一个IP地址(此时不写) 3.然后进入页面后,默认进入首页,此时可以按 ...

  9. 【Eclipse】eclipse中格式化代码配置方法

    1.找到"Source",点击,在弹出的下拉框内,找到"Format",然后点击,或者快捷键ctrl+shift+F, 如果对单单一行的行首进行自动对齐,将鼠标 ...

  10. django之前-----web应用与框架

    一web应用 web应用程序是一种可以通过Web访问的应用程序,程序的最大好处是用户很容易访问应用程序,用户只需要有浏览器即可,不需要再安装其他软件.应用程序有两种模式C/S.B/S. 下面来看一个简 ...