ES6 Iterator迭代器 与 Generator生成器 如何用js封装一个遍历所有可迭代数据结构的方法
ES6 Iterator迭代器 与 Generator生成器
1.1 为什么要有 Iterator
在ES6语法中,有序数据结构已有许多
如Array、Set、Map、String、类数组(如arguments)等
当我们不确定数据是何种类型但又要对它进行遍历时,我们只能去做针对性的判断处理
因此,一个统一的接口来遍历所有数据类型是很有必要的,而Iterator扮演了这一角色
1.2 什么是Iterator
- 具有[Symbol.iterator]属性,且属性值是function类型
- 执行此function返回一个迭代器对象,此对象有next方法可顺序迭代子元素
- forof可遍历此迭代器
在js中,实现了Iterator接口的数据结构都是可迭代的
具体表现为数据结构的[Symbol.iterator]属性值是function类型
const isIterable = target => typeof target?.[Symbol.iterator] === 'function'
当迭代器顺序执行完毕之后,后续执行返回的done为true,作为迭代结束的标志
function arrLike(){
const it = arguments[Symbol.iterator]()
console.log(it) // Object [Array Iterator] {}
console.log(it.next()) // { value: 1, done: false }
console.log(it.next()) // { value: 2, done: false }
console.log(it.next()) // { value: 3, done: false }
console.log(it.next()) // { value: undefined, done: true }
}
arrLike(1,2,3)
封装一个迭代函数,用于遍历js中所有可迭代的数据结构
// 判断是否可迭代
const isIterable = target => typeof target?.[Symbol.iterator] === 'function'
function each(target,callback){
if(!isIterable(target)){
throw 'the first parameter must be iterable(need a [Symbol.iterator] property)'
}
typeof callback !== 'function' && (callback = console.log)
const iterator = target[Symbol.iterator]()
// 或者用forof
// for (const item of iterator) {
// callback(item)
// }
let item = {done:false}
while(!item.done){
item = iterator.next()
!item.done && callback(item.value)
}
}
each([2,3,4],console.log)
each('abc',console.log)
2 Generator生成器与迭代器
一个生成器函数必定返回一个生成器对象,并且这个对象符合迭代器协议
因此这个生成器对象可以被forof遍历,同样的具有next方法
function* testGen(){}
console.log(testGen()) // Object [Generator] {}
function* helloWorldGenerator(){
yield 'hello'
yield 'world'
yield 'generator'
return 'end'
}
const genIterator = helloWorldGenerator()
console.log(genIterator.next()) // { value: 'hello', done: false }
each(genIterator,console.log)
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 零经验选手,Compose 一天开发一款小游戏!
· 因为Apifox不支持离线,我果断选择了Apipost!
· 通过 API 将Deepseek响应流式内容输出到前端
2019-04-11 LoopQueue