概念
迭代器是一种设计模式，提供了一种顺序访问集合或容器中元素的方法，无需暴露集合的内部结构，for 循环并不是迭代器模式 ，forEach 是最简易的迭代器。
理解
- 以下函数实现了 next 方法，调用该方法返回集合中的下一个元素
- value 表示当前迭代到的元素值
- done 表示迭代是否已经结束
const makeIterator = (arr = []) => {
let nextIndex = 0
return {
next() {
if (nextIndex < arr.length) {
return { value: arr[nextIndex++], done: false }
} else {
return { value: undefined, done: true }
}
}
}
}
let it = makeIterator([10, 20])
console.log(it.next()) // {value: 10, done: false}
console.log(it.next()) // {value: 20, done: false}
console.log(it.next()) // {value: undefined, done: true}
Symbol.iterator
- 可迭代协议：它是一个内置符号，用于定义一个对象的默认迭代器，提供 next 方法用于生成序列中的值；
- 所有的 有序结构 内置
Symbol.iterator且均可使用for...of、解构、扩展操作符、Array.from等； - 常见有序结构：Array、String、元组（Tuple）、链表、集合（Set）、字典（Map）、arguments、NodeList
const arr = new Array(10, 20)
const iterator = arr[Symbol.iterator]()
console.log(iterator.next()) // {value: 10, done: false}
console.log(iterator.next()) // {value: 20, done: false}
console.log(iterator.next()) // {value: undefined, done: true}
实现原理：文章来源：https://www.toymoban.com/news/detail-601955.html
interface IteratorReturn {
value: number
done: boolean
}
class DataIterator {
private data: any[]
private index = 0 // 当前下标
constructor(container: myArray) {
this.data = container.data
}
next(): IteratorReturn | null {
if (this.hasNext()) {
return {
value: this.data[this.index++],
done: !this.hasNext()
}
}
return null
}
hasNext(): boolean {
if (this.index > this.data.length) return false
return true
}
}
class myArray {
data = [10, 20, 30] // 假设这个一个数组的构造函数
'Symbol.iterator'() {
return new DataIterator(this) // 获取迭代器
}
}
const itArr = new myArray()
const iterator = itArr['Symbol.iterator']() // 获取迭代器
console.log(iterator.next())
console.log(iterator.next())
console.log(iterator.next())
console.log(iterator.next())
不可迭代协议
非有序结构可以使用 Symbol.iterator 创建一个可迭代对象，不同结构设计不同的算法文章来源地址https://www.toymoban.com/news/detail-601955.html
let obj = {
key1: [1, 2],
key2: [5, 6],
key3: [9, 10]
}
obj[Symbol.iterator] = function () {
const self = this
let keys = Reflect.ownKeys(self)
let values = []
return {
next() {
if (!values.length) {
if (keys.length) {
values = self[keys[0]] // 从 frontend 开始获取
keys.shift() // 依此删除 key
}
}
return {
done: !values.length, // 取完后则为 true
value: values.length ? values.shift() : undefined // 返回删除的结果
}
}
}
}
let itObj = obj[Symbol.iterator]()
console.log(itObj.next())
Generator、yield
- 一种特殊的函数，它可以在迭代过程中暂停和恢复执行；
- 生成器函数使用
function* 关键字进行声明； - 生成器函数通过使用
yield关键字来定义要生成的值； - 每一次
next的执行到yield停止，并返回当前 yield 之后对应的值 - next() 可以传参，即上一个 yield 的值
function* foo() {
for (let i = 0; i < 3; i++) {
yield i
}
}
let f = foo()
console.log(f.next()) // {value: 0, done: false}
console.log(f.next()) // {value: 1, done: false}
console.log(f.next()) // {value: 2, done: false}
console.log(f.next()) // {value: undefined, done: true}
function* count(x = 1) {
while (true) {
if (x % 7 === 0) {
yield x
}
x++
}
}
let n = count()
console.log(n.next()) // {value: 7, done: false}
console.log(n.next()) // {value: 14, done: false}
yield*
- yield* 是 TS 中的一个关键字，作用是将控制权从一个生成器转移给另一个生成器或可迭代对象 ；
- yield* 之后必须是有序结构的数据，即实现了
Symbol.Iterator；
const gener = [10, 20, 30]
function* foo() {
yield* gener // 相当于 yield 10 yield 20 yield 30
}
到了这里，关于设计模式 ~ 迭代器模式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
