一、迭代器、可迭代对象
1、【重要】一句话概括什么是迭代器？迭代器模式的优点是什么？
- 【迭代器】是帮助我们对某个数据结构进行遍历的对象
- 【注意点】迭代器是对象
- 【迭代器模式】让我们无须关心数据结构的内部实现，就可以进行遍历
image.png
2、手写一个最简单的迭代器对象，理解迭代器对象？
let names = ["aaa", "bbb", "ccc"];
let index = 0;
let namesIterator = {
next: function () {
if (index < names.length) {
return { done: false, value: names[index++] };
} else {
return { done: true, value: undefined };
}
},
};
console.log(namesIterator.next());
console.log(namesIterator.next());
console.log(namesIterator.next());
console.log(namesIterator.next());
3、【迭代器】和【可迭代对象】之间是什么关系（一句话概括）？
- 当一个对象实现了
iterable protocol，也就是内部Symbol.iterator 属性返回一个迭代器，那么该对象就是可迭代对象。
image.png
4、手写可迭代对象？
- 有时间，还是得再写一次，这次写得很艰难
const obj = {
names: ["aaa", "bbb", "ccc"],
[Symbol.iterator]: function () {
let index = 0;
return {
next: () => {
if (index < this.names.length) {
return { done: false, value: this.names[index++] };
} else {
return { done: true, value: undefined };
}
},
};
},
};
const iterator = obj[Symbol.iterator]();
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
image.png
5、为什么一个普通的const obj = {names: ["aaa", "bbb", "ccc"]}对象，无法调用for...of语法？
- 因为
for...of语法仅仅适合iterable对象，而obj不是一个iterable对象。
// 会有如下报错
for (const item of obj) {
^
TypeError: obj is not iterable
- 但是如果我们使用上题中实现【iterable protocol】的obj就可以使用
for...of语法
二、生成器
1、什么是生成器（generator，一句话概括）？生成器和迭代器有关系吗？
- 【生成器】生成器是ES6中新增的一种函数控制、使用的方案，它可以让我们更加灵活的控制【函数什么时候继续执行、暂停执行】。
- 【关系】生成器是一种特殊的迭代器。
2、【学习技巧】凡是遇到【新知识】，被定义成【旧知识】的特殊情况，我们该怎么学习【新知识】呢？
- 【首先】把旧知识的概念复习一下，然后套在新知识上实践一遍
- 【其次】找出新知识相对旧知识的特殊之处。
3、生成器和生成器函数有什么关系？如何定义一个生成器函数？
- 生成器函数的返回值是一个Generator(生成器)
image.png
4、yield* 是什么作用？
- 【作用】可以将一个数组，快速转换成生成器遍历代码
- 【技巧】用生成器替代迭代器，代码通常会更加简洁
class Room {
constructor(address, students) {
this.students = students;
this.address = address;
}
foo = function () {
console.log("foo");
};
[Symbol.iterator] = function* () {
yield* this.students;
};
}
const room2 = new Room("逸夫楼", ["zhansan", "lisi", "wangwu"]);
for (const stu of room2) {
console.log(stu);
}
5、一个能传参、能拿返回值、能分段执行的生成器函数？
function* foo(prama1) {
console.log("foo函数第一段");
let value1 = 100;
const prama2 = yield value1 + prama1;
console.log("foo函数第二段");
let value2 = 200;
const prama3 = yield value2 + prama2;
console.log("foo函数第三段");
let value3 = 300;
const prama4 = yield value3 + prama3;
console.log("foo函数第四段");
let value4 = 400 + prama4;
return value4;
}
const generator = foo(10);
console.log(generator.next());
console.log(generator.next(20));
console.log(generator.next(30));
console.log(generator.next(40));
console.log(generator.next(50));
- 【输出结果】
foo函数第一段
{ value: 110, done: false }
foo函数第二段
{ value: 220, done: false }
foo函数第三段
{ value: 330, done: false }
foo函数第四段
{ value: 440, done: true }
{ value: undefined, done: true }
