在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. css中背景的应用

    浏览器默认的字体大小是 font-size:16px; 谷歌最小的是10px 其他浏览器是12px 通配符选择器 *   “*”的意思是代表所有的标签 回到正题 background   背景 他的几 ...

  2. [UE4]HitResult中各项数值的含义

    对于“LineTraceByChannel”来说: Blocking Hit:是否击中了物体 Initial Overlap: Time: Distance: Location(击中的位置)等于Imp ...

  3. Socket拆包和解包

    对于基于TCP开发的通讯程序,有个很重要的问题需要解决,就是封包和拆包.下面就针对这个问题谈谈我的想法,抛砖引玉.若有不对,不妥之处,恳求大家指正.在此先谢过大家了. 一.为什么基于TCP的通讯程序需 ...

  4. android studio AIDL 编译时 错误：找不到符号

    原贴路径:http://blog.csdn.net/baidu_30164869/article/details/51036405 PS:在android studio中 当将java文件放到aidl ...

  5. MySQL 之 MyTop实时监控MySQL

    CentOS下使用MyTop实时监控MySQL MyTop的项目页面为:http://jeremy.zawodny.com/mysql/mytop/ MyTop安装 安装依赖包  yum instal ...

  6. 第11章 拾遗4：IPv6（2）_给计算机配置IPv6地址

    4. 给计算机配置IPv6地址 4.1 无状态自动配置IPv6地址 (1)网络拓扑 ①无状态地址自动配置是指不需要DHCP服务器进行管理,由客户端向路由器发送前缀请求(RS)询问其所在网段.路由器收到 ...

  7. Java 6- Java 运算符

    计算机的最基本用途之一就是执行数学运算,作为一门计算机语言,Java也提供了一套丰富的运算符来操纵变量.我们可以把运算符分成以下几组: 算术运算符 关系运算符 位运算符 逻辑运算符 赋值运算符 其他运 ...

  8. FastDFS+Nginx+fastdfs-nginx-module集群搭建

    一.实验环境说明 操作系统: Centos 6.6 x64 FastDFS 相关版本: fastdfs-5.05 fastdfs-nginx-module-v1.16 libfastcommon-v1 ...

  9. 微信小程序：block的隐藏

    <block/> 并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性. 所以 hidden.display等通用隐藏元素的方法对block是无效的 想要隐藏blo ...

  10. 自媒体运营排版利器----Markdown here

    Markdown Here ​ 下载chrome插件直接下载 使用:打开网页文章编辑器,比如cnblog 用markdown语法写文章,之后点击编译 可以设置好css语法,以后每次可以套用同样的模板 ...