在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(),它会改变索引的值,从而判断有没有迭代到最后
运行结果: