[es6]中for...of与[es5]中for...in的区别
1、for...in循环遍历的是索引
2、for...of循环遍历的索引值
var arr = ['A', 'B', 'C'];
var obj = { name: '张三', age: 20 }
for..in 遍历数组 得到索引
for (var x in arr) {
console.log(x) //0 1 2
}
for..in 遍历对象 得到键和值
for (var x in obj) {
console.log(x) //name age
console.log(obj[x]) //张三 20
}
for..of 遍历数组 得到值
for (let x of arr) {
console.log(x) //A B C
}
for..of 遍历对象 会报错
for (let x of obj) {
console.log(x) // Uncaught TypeError: obj is not iterable
}
for..of 遍历对象 报错（ Uncaught TypeError: obj is not iterable）的原因是对象原型上缺少 遍历器（Iterator）
一、迭代器（Iterator）
迭代器是一种特殊对象，它具有一些专门为迭代过程设计的专有接口，所有的迭代器对象都有一个next()方法，每次调用都返回一个结果对象。
特性：
ES6 创造了一种新的遍历命令 for...of 循环，Iterator 接口主要供 for...of 消费；
原生具备 iterator 接口的数据(可用 for of 遍历)：
- Array；
- Arguments；
- Set；
- Map；
- String；
结果对象有两个属性：一个是value，表示下一个将要返回的值；另一个是done，它是一个布尔类型的值，当没有更多可返回数据时返回true。迭代器还会保存一个内部指针，用来指向当前集合中值的位置，每调用一次next()方法，都会返回下一个可用的值
如果在最后一个值返回后再调用next()方法，那么返回的对象中属性done的值为true，属性value则包含迭代器最终返回的值，这个返回值不是数据集的一部分，它与函数的返回值类似，是函数调用过程中最后一次给调用者传递信息的方法，如果没有相关数据则返回undefined
// 声明一个数组
const xiyou = ['唐僧', '孙悟空', '猪八戒', '沙僧'];
// 使用 for...of 遍历数组
for(let v of xiyou){
console.log(v);
}
let iterator = xiyou[Symbol.iterator]();
// 调用对象的next方法
console.log(iterator.next());// "{ value: '唐僧', done: false }"
console.log(iterator.next());// "{ value: '孙悟空', done: false }"
console.log(iterator.next());// "{ value: '猪八戒', done: false }"
console.log(iterator.next());// "{ value: '沙僧', done: false }"
console.log(iterator.next());// "{ value: undefined, done: true}"
// 重新初始化对象，指针也会重新回到最前面
let iterator1 = xiyou[Symbol.iterator]();
console.log(iterator1.next());// "{ value: '唐僧', done: false }"
原理：
- 创建一个指针对象，指向当前数据结构的起始位置；
- 第一次调用对象的 next 方法，指针自动指向数据结构的第一个成员；
- 接下来不断调用 next 方法，指针一直往后移动，直到指向最后一个成员；
- 每调用 next 方法返回一个包含 value 和 done 属性的对象；
function makeInterator(arr){
let index = 0;
return {
next(){
if(index < arr.length){
return {
value: arr[index++],
done: false
}
}
return { value: undefined, done: true }
}
}
}
二、生成器（Generator）
定义：生成器是一种返回迭代器的函数，通过function关键字后的星号(*)来表示，函数中会用到新的关键字yield。星号可以紧挨着function关键字，也可以在中间添加一个空格
// 生成器其实就是一个特殊的函数
function* gen() {
console.log(111);
yield '一只没有耳朵';
console.log(222);
yield '一只没有尾部';
console.log(333);
yield '真奇怪';
console.log(444);
}
let iterator = gen();
console.log(iterator.next());//{value: '一只没有耳朵', done: false}
console.log(iterator.next());//{value: '一只没有尾部', done: false}
console.log(iterator.next());//{value: '真奇怪', done: false}
console.log(iterator.next());//{value: undefined, done: true}
console.log("遍历：");
//遍历
for(let v of gen()){
console.log(v);
}
yield关键字也是ES6的新特性，可以通过它来指定调用迭代器的next()方法时的返回值及返回顺序。生成器函数最有趣的部分是，每当执行完一条yield语句后函数就会自动停止执行。
async await 的原理
1、async函数就是generator函数的语法糖。
2、async函数，就是将generator函数的*换成async，将yield替换成await。
async函数对generator的改进
1、内置执行器，不需要使用next()手动执行。
2、await命令后面可以是Promise对象或原始类型的值，yield命令后面只能是Thunk函数或Promise对象。
3、返回值是Promise。返回非Promise时，async函数会把它包装成Promise返回。(Promise.resolve(value))
