JS的迭代器是啥？精读JS迭代器
目录
前言
在ES6中引入了迭代器的概念，它是一种遍历数据集合的机制，提供了一种简单而一致的方式来访问集合中的每个元素，在集合与映射这篇文章中，我们就已经初步认识了Symbol.iterator这个概念。
概念
迭代器是通过迭代协议实现的，每一个拥有该协议的对象都可以称作是可迭代的对象，这个协议的标识就是Symbol.iterator，它是ES6中引入的一个新的Symbol值，表示一个对象是否有可迭代性。可迭代对象的Symbol.iterator属性是一个函数，我们称为迭代器对象，运行这个函数会返回一个next函数（next函数可以当成是JS的原型链或者C中链表的指针），运行next函数后又可以接收两个属性：value和done；value表示当前迭代的值；done表示遍历完全部迭代。
在JS中可迭代的对象有以下几种：
- Array（数组）
- Map（映射）
- Set（集合）
- String（字符串）
- TypedArray（类数组）
- NodeLists（Dom节点）
需要注意的是Object没有迭代能力
优点
灵活性：迭代器提供了一套灵活的遍历机制，使用相同的语法和操作方式于不同类型的数据结构
可迭代性：通过实现迭代器协议，可以让对象具有可迭代性，从而可以使用for of循环来遍历对象，增强代码可读性
惰性求值：迭代器是一种惰性求值的机制，只有在需要下一个元素时才会取值，这样可以节省内存，提高性能
可中断性：迭代器可以在任意时刻中断遍历，而不需要遍历整个数据结构，提高代码的效率
支持函数式编程：迭代器是函数式编程中常用的工具，它可以和其他函数式编程的特性一起使用，例如高阶函数、map、filter、reduce 等等
用法
简单介绍一下迭代器的用法，使用[Symbol.iterator]()运行迭代对象，获取next，运行next获取迭代值
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(arr[Symbol.iterator]().next()); // { value: 1, done: false }我们可以借助while对数组执行遍历操作
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
const iterator = arr[Symbol.iterator]()
let next
while (next = iterator.next(), !next.done) {
console.log(next.value); // 1~9
}或者通过ES6新增的for of对迭代对象进行遍历，for of和for in类似，for in是遍历索引，for of是遍历属性值
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
for (const iterator of arr) {
console.log(iterator);
}对象迭代能力
为什么对象没有迭代器
对象是一种无序的集合类型，与数组或类数组不同，它的属性名称是字符串或Symbol类型，并且不具备索引。因此对象不能像数组一样使用简单的循环结构来遍历属性值，而是需要通过一些特殊的方法来实现对象的迭代。
迭代器的实现
基于上面的用法，我们可以尝试在对象上实现迭代器
Reflect.defineProperty(Object.prototype, Symbol.iterator, {
value: function () {
const keys = Reflect.ownKeys(this).filter(it => it !== Symbol.iterator) // 过滤自身
const len = keys.length
let count = 0
return {
next: () => ({ value: this[keys[count++]], done: count > len })
}
}
})可以看到，对象像迭代对象一样也可以通过迭代的方式获取到值
const obj: any = {
name: "阿黄",
age: 10,
like: "meat"
}
const iterator = obj[Symbol.iterator]()
let next
while (next = iterator.next(), !next.done) {
console.log(next.value); // 阿黄 10 meat
}
for (const iterator of obj) {
console.log(iterator); // 阿黄 10 meat
}生成器
生成器（Generator）是 ES6 中新增的一种特殊函数，它的语法与迭代器有共同之处，可以看作是一种特殊的迭代器，它通过function*关键字来定义。生成器函数的内部可以使用yield关键字来暂停函数的执行，并返回执行结果，同时也可以再次从暂停的位置开始执行。在函数外部使用next()函数来获取生成器的迭代值，结构与上面的迭代器相同，包含value和done值
基础语法
比如，我们使用一个数组来表示函数异步的内容，在内部使用yield对函数进行暂停操作，在外部使用generator.next()对内部暂停的结果取迭代值
function* start(list: any[]) {
let i = list.length
while (i-- >= 0) {
yield list[i]
}
}
const arr = [1, 2, 3, 4, 5]
const generator = start(arr)
let next
while (next = generator.next(), !next.done) {
console.log(next.value); // 5~1
}生成器传参
在next函数中传入参数可以将参数带入生成器函数中，比如
function* start(q1: string) {
const name: string = yield q1
yield `我叫${name}`
}
const generator = start("你叫什么名字")
console.log(generator.next().value);// 你叫什么名字
console.log(generator.next("张三").value);// 我叫张三生成器委托
生成器之间可以使用yield*关键字进行传递，函数中的多个生成器会连接在一起，一起输出值
function* getName(name: string) {
yield `我叫`
yield `${name}`
}
function* getAge(age: number) {
yield `我${age}了`
}
function* getInfo(__name: string, __age: number) {
yield* getName(__name)
yield* getAge(__age)
}
const generator = getInfo("张三", 20)
console.log(generator.next().value);// 我叫
console.log(generator.next().value);// 张三
console.log(generator.next().value);// 我20了上面的getInfo等同于
function* getInfo(__name: string, __age: number) {
yield `我叫`
yield `${__name}`
yield `我${__age}了`
}可终止迭代器
可终止迭代器在ES6中并未正式加入，但是却有相关的声明，使用return函数可以跳出迭代。使用throw函数可以跳出迭代并抛错，所以我们可以借助上面的对象迭代器的方式，实现一个迭代终止的功能
首先我们实现一个数组的迭代器，数组和对象区别在于已经存在length属性，所以我们做个兼容就行了
Reflect.defineProperty(Array.prototype, Symbol.iterator, {
value: function () {
const keys = Reflect.ownKeys(this).filter(it => it !== Symbol.iterator) // 过滤自身
const len = this.length ?? keys.length
let count = 0
return {
next: () => {
const done = count >= len
return { value: !done ? this[keys[count++]] : void 0, done }
},
}
}
})
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
const iterator = arr[Symbol.iterator]()
let next
while (next = iterator.next(), !next.done) {
console.log(next.value); // 1~9
}然后我们在迭代器中增加return函数和throw函数
throw(err?: string) {
throw new Error(err)
},
return() {
count = len
return { done: true };
}接着在数组中使用一下
return函数：
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
const iterator: any = arr[Symbol.iterator]()
console.log(iterator.next());// { value: 1, done: false }
iterator.return()
console.log(iterator.next());// { value: undefined, done: true }throw函数：
console.log(iterator.next());// { value: 1, done: false }
iterator.throw("抛个错")// Error: 抛个错总结
本文介绍了JS迭代器的概念以及用法，并使用反射机制在Object中实现了迭代器，此外，生成器是特殊的迭代器，它的使用与迭代器类似，最后实现了迭代器中的可终止迭代器，使迭代器拥有终断功能
以上就是全部内容了，感谢你的阅读，如果觉得文章不错的话，还望支持一下博主，谢谢~