遍历器与 for...of 循环

Iterator 是什么

1. Iterator 的作用
   Iterator：遍历器（迭代器）
   for()
   [1, 2].forEach
   new Set().forEach()
   Iterator 也是用来遍历的
2. 寻找 Iterator

const it = [1,2][Symbol.iterator]();

3. 使用 Iterator

const it = [1, 2][Symbol.iterator]();
console.log(it.next());		// {value: 1, done: false}
console.log(it.next());		// {value: 2, done: false}
console.log(it.next());		// {value: undefined, done: true}

it 可遍历对象（可迭代对象）
Symbol.iterator 可遍历对象的生成方法

4. 什么是 Iterator
   Symbol.iterator (可遍历对象的生成方法) -> it(可遍历对象) -> it.next() -> it.next() -> … (直到done为true)

Iterator 解惑

1. 为什么需要 Iterator 遍历器
   因为可以统一一个遍历的方式
2. 如何更方便的使用 iterator 去遍历
   我们一般不会直接使用 Iterator 去遍历
   for … of

for…of 的用法

1. 认识for…of

const arr = [1, 2, 3];
for (const item of arr) {
	console.log(item);
}

for…of 循环只会遍历出那些 done 为 false 时，对应的 value 值

2. 与 break、continue 一起使用

const arr = [1, 2, 3];
for (const item of arr) {
	if (item === 2) {
		// break;
		continue;
	}
	console.log(item);
}

3. 在 for…of 中取得数组的索引

const arr = [1, 2, 3];
for (const key of arr.keys()) {
	console.log(key);
}

// 遍历数组值
const arr = [1, 2, 3];
for (const value of arr.values()) {
	console.log(value);
}

const arr = [1, 2, 3];
for (const entrie of arr.entries()) {
	console.log(entrie);
}
for (const [index, value] of arr.entries()) {
	console.log(index, value);
}

原生可遍历和非原生可遍历

1. 什么是可遍历
   只要有 Symbol.iterator 方法，并且这个方法可以生成可遍历对象，就是可遍历的
   只要可遍历，就可以使用 for…of循环来统一遍历

2. 原生可遍历的有哪些
   数组
   字符串
   Set
   Map
   arguments
   NodeList

3. 非原生可遍历的有哪些
   一般的对象
   有length和索引属性的对象

const obj = {
	0: 'tom',
	1: 'mail',
	length: 2
};
// 简单的方法，用 Array 的方法
obj[Symbol.iterator] = Array.protoype[Symbol.iterator];

使用了 Iterator 的场合

• 原生可遍历的
  Array 数组
  String 字符串
  Set
  Map
  函数的 arguments 对象
  NodeList 对象

1. 数组的展开运算符
   只要是可遍历的，就可以用数组的方式展开
2. 数组的解构赋值
   只要是可遍历的，就可以用数组的方式解构赋值