迭代器和生成器
何为迭代器
迭代器是被设计专用于迭代的对象，带有特定接口。所有的迭代器对象都拥有 next() 方 法，会返回一个结果对象。该结果对象有两个属性：对应下一个值的 value ，以及一个布尔 类型的 done ,其值为 true 时表示没有更多值可供使用。迭代器持有一个指向集合位置的 内部指针，每当调用了 next() 方法，迭代器就会返回相应的下一个值。
在 ES5 中创建一个迭代器
function createIterator(items) {
var i = 0;
return {
next: function () {
var done = i >= items.length;
var value = !done ? items[i++] : undefined
return {
done: done,
value: value
}
}
}
}
var iterator = createIterator([1, 2, 3]);
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next()); // "{ value: undefined, done: true }"
何为生成器
生成器 (generator) 是能返回一个迭代器的函数。生成器函数由放在 function 关键字之 后的一个星号 (*) 来表示，并能使用新的 yield 关键字。将星号紧跟在 function 关键 字之后，或是在中间留出空格，都是没问题的
function* createIterator() {
yield 1;
yield 2;
yield 3;
}
执行上面的打印依然可以
生成器函数最有意思的方面可能就是它们会在每个 yield 语句后停止执行。此代码中 yield 1 执行后，该函数将不会再执行任何操作，直到迭代器的 next() 方法被调用，此时 才继续执行 yield 2
和表达式一起使用
function* createIterator(items) {
for (let i = 0; i < items.length; i++) {
yield items[i]
}
}
生成器对象方法
由于生成器就是函数，因此也可以被添加到对象中。例如，你可以在 ES5 风格的对象字面量 中使用函数表达式来创建一个生成器：
var o = {
createIterator: function* (items) {
for (let i = 0; i < items.length; i++) {
yield items[i]
}
}
}
let iterator = o.createIterator([1, 2, 3]);
用 ES6简写
*createIterator(items){
//
}
可迭代对象与 for-of 循环
可迭代对象（ iterable ）是包含 Symbol.iterator 属性的对象
在 ES6 中，所有的集合 对象(数组、 Set 与 Map) 以及字符串都是可迭代对象，因此它们都被指定了默认的迭代 器。可迭代对象被设计用于与 ES 新增的 for-of 循环配合使用。
- for-of 循环在循环每次执行时会调用可迭代对象的 next() 方法，并将结果对象的 value 值存储在一个变量上。循环过程会持续到结果对象的 done 属性变成 true 为止
let values = [1, 2, 3]
for (const num of values) {
console.log(num)
}
// 1 2 3
- 这个 for-of 循环首先调用了 values 数组的 Symbol.iterator 方法，获取了一个迭代器
- iterator.next() 被调用，迭 代器结果对象的 value 属性被读出并放入了 num 变量。 num 变量的值开始为 1 ，接下来 是 2 ，最后变成 3 。
- 当结果对象的 done 变成 true ，循环就退出了，因此 num 绝不会被 赋值为 undefined 。
访问默认迭代器
使用 Symbol.iterator 来访问对象上的默认迭代器
let values = [1, 2, 3]
let defIterator = values[Symbol.iterator]
console.log(iterator.next());
检测对象是否能进行迭代
function isIterable(object) {
return typeof object[Symbol.iterator] === 'function'
}
console.log(isIterable([])); //true
console.log(isIterable("")); //true
console.log(isIterable({})); //false
console.log(isIterable(1)); //false
console.log(isIterable(new Map())); //true
console.log(isIterable(new Set())); //true
console.log(isIterable(new WeakMap())); //false
console.log(isIterable(new WeakSet())); //false
创建可迭代对象
let collection = {
obj: {},
*[Symbol.iterator]() {
for (const key in this.obj) {
yield this.obj[key]
}
}
}
collection.obj.name = 'Tom'
collection.obj.age = 20
for (const iterator of collection) {
console.log(iterator);
}
集合的迭代器
ES6 具有三种集合对象类型：数组、 Map 与 Set
- entries():返回一个包含键值对的迭代器
- values():返回一个包含集合中的值的迭代器
- keys :返回一个包含集合中的键的迭代器
生成器的 Return 语句
由于生成器是函数，你可以在它内部使用 return 语句，既可以让生成器早一点退出执行， 也可以指定在 next() 方法最后一次调用时的返回值。
function* createIterator() {
yield 1;
return;
yield 2
yield 3
}
let iterator1 = createIterator();
console.log(iterator1.next()); // { value: 1, done: false }
console.log(iterator1.next()); // { value: undefined, done: true }
异步任务运行
对于异步代码，forEach 并不能保证按顺序执行。forEach 中用 await 会产生什么问题?怎么解决这个问题?
async function test() {
let arr = [4, 2, 1]
arr.forEach(async item => {
const res = await handle(item)
console.log(res)
})
console.log('结束')
}
function handle(x) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(x)
}, 1000 * x)
})
}
test()
我们期望的结果是:
4 2 1 结束
但是实际上会输出:
1 2 4 结束
问题原因
forEach底层怎么实现的。
// 核心逻辑
for (var i = 0; i < length; i++) {
if (i in array) {
var element = array[i];
callback(element, i, array);
}
}
forEach 拿过来直接执行了，这就导致它无法保证异步任务的执行顺序。比如后面的任务用时短，那么就又可能抢在前面的任务之前执行
解决方案 其实也很简单, 我们利用 for...of 就能轻松解决。
async function test() {
let arr = [4, 2, 1]
for(const item of arr) {
const res = await handle(item)
console.log(res)
}
console.log('结束')
}
解决原理——Iterator
for...of 并不像forEach那么简单粗暴的方式去遍历执行，而是采用一种特别的手段——迭代器去遍历。
