迭代器Iterator

84 阅读 0 评论 56 点赞

我是靠谱客的博主霸气流沙，这篇文章主要介绍迭代器Iterator，现在分享给大家，希望可以做个参考。

迭代器Iterator是一种接口，为各种不同的数据解构提供统一的访问机制。任何数据结构只要部署 iterator 接口，就可以完成遍历操作。
1）ES6 创造了一种新的遍历命令 for…of循环。iterator接口主要供 for…of消费
2）原生具备iterator接口的数据（可以用 for…of遍历）
a》Array
b》Arguments
c》nodelist
d》string
e》set
f》map
3)工作原理
a》创建一个指针对象，指向当前数据解构的起始位置
b》第一次调用对象的next方法，指针自动指向数据结构的对一个成员
c》接下来不断调用next 方法，指针一直往后移动，知道指向最后一个成员
d》没调用next方法返回一个包含value和done属性的对象

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//声明一个数组
const xiyou = ["唐僧","孙悟空","猪八戒","沙僧"];
//使用for...of遍历数组(输出键值)
for(let v of xiyou)
{
	console.log(v)//依次输出唐僧、孙悟空、猪八戒、沙僧
}
//对比for...in遍历数组(输出键名)
for(let v in xiyou)
{
	console.log(v)//依次输出0,1,2,3
}
//1、获取指针对象
let iterator = xiyou[Symbol.iterator]();
//2、调用next() 方法
console.log(iterator.next())//｛value:"唐僧",done:false｝
console.log(iterator.next())//｛value:"孙悟空",done:false｝
console.log(iterator.next())//｛value:"猪八戒",done:false｝
console.log(iterator.next())//｛value:"沙僧",done:false｝
console.log(iterator.next())//｛value:undefined,done:true｝

二、自定义遍历数组

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//声明一个对象
const banji = {
	name:"终极一班",
	stus:[
		"xiaoming",
		"xiaotian",
		"xiaoning",
		"knight"
	],
	[Symbol.iterator](){
		let index = 0;
		let _this=this;
		return{
			next:function(){
				if(index<_this.stus.length){
					const result = {value:_this.stus[index],done:false};
					index++
					return result;
				}else{
					return {value:undfined,done:false}
				}
			}
		}
	}
};

for(let v of banji){
	console.log(v)//依次输出 xiaoming,xiaotian,xiaoning,knight
}