JS Iterator(迭代器)

对象的成员可以遍历,是因为该对象实现了Iterator 接口。比如数组对象:

for (let i of [1,2]) {
	console.log(i);
}

任何数据结构只要部署 Iterator 接口,就可以完成遍历操作,即依次处理该数据结构的所有成员。

迭代器本质

迭代器对象本质上,就是一个指针对象。通过指针对象的next(),用来移动指针。

【迭代器协议】对象必须提供一个next(),执行该方法要么返回迭代中的下一项,要么就引起一个Stopiteration异常,以终止迭代。

next()返回一个对象,表示当前数据成员的信息。这个对象具有valuedone两个属性,value属性返回当前位置的成员,done属性是一个布尔值,表示遍历是否结束,即是否还有必要再一次调用next()。对于遍历器对象来说,done: falsevalue: undefined属性都是可以省略的。

ES6 规定,默认的 Iterator 接口部署在数据结构的Symbol.iterator属性上。

实现Iterator接口的原生对象

原生具备 Iterator 接口的数据结构如下。

  • Array
  • Map
  • Set
  • String
  • TypedArray
  • 函数的 arguments 对象
  • NodeList 对象

可以看到Array原型对象实现了Iterator 接口。
在这里插入图片描述
那么数组的实例对象也具备这个Symbol.iterator属性。调用试试看:

const arrayIterator=[1,2][Symbol.iterator]();
console.log(arrayIterator);
console.log(arrayIterator.next());
console.log(arrayIterator.next());
console.log(arrayIterator.next());

在这里插入图片描述

Symbol.iterator

Symbol.iterator属性与Iterator接口大致关系:
对象内定义了一个Symbol类型且描述符为Symbol.iterator的属性名,指向Iterator函数。

模拟实现(形似)

🌰模拟实现

const sym=Symbol('Symbol.iterator');
function iterator(){
	//以下伪代码
	// return {
	// 	next:function(){
	// 		return {
	// 			value:any,
	// 			done:boolean
	// 		}
	// 	}
	// }
}

let obj={
	[sym]:iterator
}

在这里插入图片描述

模拟实现简单的Iterator 接口
function myIterator(arr) {
	let index = 0;
	return {
		next() {
			return index < arr.length ? {
				value: arr[index++],
				done: false//可以省略
			} : {
				value: undefined,//可以省略
				done: true
			}
		}
	}
}
const it = myIterator([1, 2])
console.log(it.next());// {value: 1, done: false}
console.log(it.next());// {value: 2, done: false}
console.log(it.next());// {value: undefined, done: true}

常见的调用了Iterator接口的场合

对实现了Iterator接口的数据解构赋值
let set=new Set().add(1).add(1).add(2).add(3);//set 不能出现重复值
let [x,y]=set;
console.log({x,y})//{x: 1, y: 2}

let [first,...rest]=set
console.log({first,rest})//{first: 1, rest: [2,3]}

解构需要遍历各个成员。

对实现了Iterator接口的数据使用扩展运算符
console.log(...'hello');//h e l l o
其他
  • for…of
  • Array.from()
  • Map(), Set(), WeakMap(), WeakSet()(比如new Map([[‘a’,1],[‘b’,2]]))
  • Promise.all()
  • Promise.race()
  • yield *

拓展:Iterator接口和Generator函数

Symbol.iterator()方法的最简单实现,还是使用 Generator 函数。直接用 yield 命令给出每一步的返回值即可。

let myIterable = {
  [Symbol.iterator]: function* () {
    yield 1;
    yield 2;
    yield 3;
  }
};
[...myIterable] // [1, 2, 3]

参看文档:
Iterator 和 for…of 循环

  • 17
    点赞
  • 46
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值