js 迭代 方法
在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 迭代 方法的更多相关文章
- js 迭代方法
迭代方法 * every():对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true. * filter():对数组中的每一项运行给定函数,返回该函数会返回true 的项组成的 ...
- js数组之迭代方法
ES5为数组对象定义了5个迭代方法(即递归,简单的说就是自己可以调用自己). 每个方法接收两个参数:要在每一项上运行的函数(接收3个参数:数组项的值,该项在数组中的位置,数组对象本身)和(可选的) ...
- JS高程5.引用类型（6）Array类型的位置方法，迭代方法，归并方法
一.位置方法 ECMAScript5为数组实例添加了两个位置:indexOf()和 lastIndexOf().这两个方法接收两个参数:要查找的项和(可选的)表示查找起点位置的索引(如在数组[7,8, ...
- JS中数组的迭代方法和归并方法
昨天总结的JavaScript中的数组Array方法 数组的迭代方法 ES5中为数组定义了5个迭代方法.每个方法都要接收两个参数:要在每一项上面运行的函数和(可选的)运行该函数的作用域对象---影响t ...
- [Effective JavaScript 笔记]第50条：迭代方法优于循环
"懒"程序员才是好程序员.复制和粘贴样板代码,一但代码有错误,或代码功能修改,那么程序在修改的时候,程序员需要找到所有相同功能的代码一处处进行修改.这会使人重复发明轮子,而且在别人 ...
- 学习zepto.js(原型方法)
学习zepto.js(原型方法)[1] 转载 新的一周,新的开始,今天来学习一下zepto里边的原型方法,就是通过$.进行调用的方法,也是可以通过$.fn进行扩展的方法: $.camelCase(): ...
- JavaScript数据迭代方法差别
js有很多总接待方法,ES6之后又新增了几个: 这里主要讨论数组迭代遍历的方法所以不会细讲for...in... ES5.ES6数组迭代方法有: forEach map filter some eve ...
- js数组方法解析
js 数组有很多方法,其中有的常用,有的不常用,归纳几个常用的方法,做个总结: 1. 转换方法: 1.1 valueOf():调用这个方法会返回数组本身 <script> var arr ...
- [转]Extjs中的迭代方法
原文地址:http://www.veryhuo.com/a/view/36701.html EXTJS 有很多的迭代方法,例如,你也许已知道的Ext.each,但还有另外一些不为人知且很有用的方法.首 ...
随机推荐
- HTML代码优化中SEO要注意哪些细节
本文来源于学业无忧网,转载请保留:http://www.ixywy.com/ 这段时间,我们翻阅了一些同行撰写的书.其中,几乎每本书都存在问题.这个肯定在所难免,但是作为一名职业的SEO更应该注意一些 ...
- 事件之父View和子view的点击事件的执行过程
Android中的事件类型分为按键事件和屏幕触摸事件,Touch事件是屏幕触摸事件的基础事件,有必要对它进行深入的了解. 一个最简单的屏幕触摸动作触发了一系列Touch事件:ACTION_DOWN-& ...
- Jmeter（三十三）Stepping Thread Group
碰巧最近在做性能测试,就记一下Jmeter的第三方插件Stepping Thread Group. 具体一些插件信息,可以去:jmeter-plugins.org去进行下载. 该插件目前是已经被弃用的 ...
- CRM 2016 IFrame 子页面执行 父页面函数
CRM 中定义以下函数: windows.parent.functionname(){ //do somethion } IFrame 子页面调用 JS: windows.parent.functio ...
- c语言数据类型（二）
char 类型 1.char 变量 常量 char c; 定义一个char变量 c = ‘a’ 'a'字符常量 char 的本质就是一个整数,只有一个字节大小的整数 2.printf 输出char ...
- tips：Java的Random类和Random函数
tips:Java的Random类和Random函数! 随机数是一个很有趣的东西,在java中可以通过下面这2种方法得到: (1)Random类: Random类是java.util.Random这个 ...
- mac maven lombok报错
maven已导入lombok的jar包,注解@Data,但是用到getter,setter时依然出错.解决办法: 打开eclipse.ini文件,加上如下两句: -Xbootclaspath//Use ...
- python学习之----导航树
findAll 函数通过标签的名称和属性来查找标签 .但是如果你需要通过标签在文档中的位 置来查找标签,该怎么办?这就是导航树(Navigating Trees)的作用.在第1 章里,我们 看过用单一 ...
- BZOJ2134 luoguP1297 [国家集训队]单选错位
单选错位 [问题描述] gx和lc去参加noip初赛,其中有一种题型叫单项选择题,顾名思义,只有一个选项是正确答案.试卷上共有n道单选题,第i道单选题有ai个选项,这ai个选项编号是1,2,3,…,a ...
- Snort规则大探秘
版本联系 Snort规则可以用来检测数据包的不同部分.Snort 1.x可以分析第3层和第4层的信息,但是不能分析应用层协议.Snort v 2.x增加了对应用层头部分析的支持.所有的数据包根据类型的 ...