Symbol.iterator 迭代器 和 生成器 for of
-
- [Symbol.iterator 迭代器 和 生成器 for of](#Symbol.iterator 迭代器 和 生成器 for of)
-
- [1. 生成器的用法](#1. 生成器的用法)
-
- [1.1. 按顺序执行，即使有异步操作，也会按顺序执行](#1.1. 按顺序执行，即使有异步操作，也会按顺序执行)
- [1.2. ` done: true, value: undefined `说明没有东西可迭代了](#1.2.
done: true, value: undefined说明没有东西可迭代了)
- [2. 迭代器](#2. 迭代器)
-
- [2.1. set和map基本用法](#2.1. set和map基本用法)
- [2.2. 支持遍历大部分类型迭代器 arr nodeList argumetns set map 等](#2.2. 支持遍历大部分类型迭代器 arr nodeList argumetns set map 等)
- [2.3. 迭代器的语法糖 for of](#2.3. 迭代器的语法糖 for of)
- [2.4. for of 对象不能用，对象没有Symbol.iterator迭代器](#2.4. for of 对象不能用，对象没有Symbol.iterator迭代器)
- [2.5. 解构底层原理也是去调用 iterator 方法, 扩展数组也是调用 iterator 方法](#2.5. 解构底层原理也是去调用 iterator 方法, 扩展数组也是调用 iterator 方法)
- [2.6. 迭代器的原理](#2.6. 迭代器的原理)
- [2.7. 手写对象支持for of遍历](#2.7. 手写对象支持for of遍历)
Symbol.iterator 迭代器 和 生成器 for of
1. 生成器的用法
1.1. 按顺序执行，即使有异步操作，也会按顺序执行
1.2. done: true, value: undefined说明没有东西可迭代了
javascript
复制代码
// 1. 生成器基本用法
function* gen() {
yield Promise.resolve('小满') // 可以是同步或者是异步
yield '大满'
yield '超大满'
yield '满了'
}
// let man = gen()
// console.log(man.next()) // 按顺序执行，即使有异步操作，也会按顺序执行
// console.log(man.next())
// console.log(man.next())
// console.log(man.next())
// console.log(man.next()) // done: true, value: undefined说明没有东西可迭代了
2. 迭代器
2.1. set和map基本用法
javascript
复制代码
// set map
let set: Set<number> = new Set([1, 1, 2, 2, 3, 3, 4, 4]) // 天然去重 1 2 3 4
console.log(set)
let map: Map<any, any> = new Map()
let arr = ['a', 'b', 'c']
// map和对象的区别：map的key可以是引用类型，对象只能是字符串或者symbol类型
map.set(arr, '小满')
map.set('1', 2)
// map.set('c', 3)
// console.log(map)
// console.log(map.get(arr))
2.2. 支持遍历大部分类型迭代器 arr nodeList argumetns set map 等
javascript
复制代码
// 2.1. 支持遍历大部分类型迭代器 arr nodeList argumetns set map 等
// Symbol.iterator
function arg() {
console.log(arguments) // 维数组或者叫类数组
// arguments.pop/push 是没有这些方法的
// 可以使用迭代器去遍历arguments数组
}
let list = document.querySelectorAll('div') // 类数组
Symbol(Symbol.iterator)
var arr = [1, 2, 3, 4]
let iterator = arr[Symbol.iterator]()
console.log(iterator.next())
console.log(iterator.next())
console.log(iterator.next())
console.log(iterator.next())
console.log(iterator.next())
2.3. 迭代器的语法糖 for of
javascript
复制代码
let set: Set<number> = new Set([1, 1, 2, 2, 3, 3, 4, 4]) // 天然去重 1 2 3 4
for (let i of set) {
console.log(i) // 1 2 3 4
}
2.4. for of 对象不能用，对象没有Symbol.iterator迭代器
javascript
复制代码
// 报错
for (let i of {name:1}) {
console.log(i)
}
2.5. 解构底层原理也是去调用 iterator 方法, 扩展数组也是调用 iterator 方法
javascript
复制代码
// 展开运算符：...arr
// 解构：[a, b, c] = [...arr]
var arr = [1, 2, 3, 4]
const [a, b, c] = [...arr]
console.log(a, b, c)
2.6. 迭代器的原理
javascript
复制代码
let set: Set<number> = new Set([1, 1, 2, 2, 3, 3, 4, 4])
let map: Map<any, any> = new Map()
let arr = ['a', 'b', 'c']
map.set(arr, '小满')
map.set('1', 2)
map.set('c', 3)
const each = (value: any) => {
const It = value[Symbol.iterator]()
let next: any = { done: false }
while (!next.done) {
next = It.next()
if (!next.done) {
console.log(next.value)
}
}
}
each(map)
each(set)
2.7. 手写对象支持for of遍历
javascript
复制代码
// 对象支持for of遍历
const obj = {
max: 5,
current: 0,
[Symbol.iterator]() {
return {
max: this.max,
current: this.current,
next: () => {
if (this.current >= this.max) {
return { done: true, value: undefined }
}
return { done: false, value: this.current++ }
}
}
}
}
for (const i of obj) {
console.log(i)
}
// 解构和扩展obj都可行
let x = [...obj]
console.log(x)