迭代器

这里先来做一个小的demo，假设要遍历一个数组，拿到数组的元素，该怎么做，会敲代码的肯定想到了循环，有js基础的肯定想到了for。of 方法，但是这些方法都不能很好的控制你要到哪一步，如果要精确的控制循环到哪一个步骤，循环的方法就有些吃力，这里就是迭代器要解决的问题，迭代器能够很好的控制每一步骤的生成，下面做一个demo来控制步骤执行

const names = ['asd', 'sd', 'reg', 'vdvs', 'fas'];  //遍历的数组

let index = 0; 
const nameIterrator = { 
  next: function () {  //next迭代的方法，控制每一步骤的执行
    if (index < names.length) {   // 数组没有遍历完进入
     // 返回一个对象，对象中包含数组的元素和是否遍历完成的信息
      return { done: false, value: names[index++] }; 
    }
    //遍历完成，done表示遍历完成，value的值为undefined
    return { done: true, value: undefined };
  },
};
console.log(nameIterrator.next()); //{ done: false, value: 'asd' }
console.log(nameIterrator.next());//{ done: false, value: 'sd' }
console.log(nameIterrator.next());//{ done: false, value: 'reg' }
console.log(nameIterrator.next());//{ done: false, value: 'vdvs' }
console.log(nameIterrator.next());//{ done: false, value: 'fas' }
console.log(nameIterrator.next());//{ done: true, value: undefined }

在上列中可以看到，没调用一次next方法，数组往下遍历一次，这样就可以精确控制每一步骤的执行，可以将上面的方法封装为一个函数，让方法可以遍历不同的数组

const name = ['asd', 'vds', 'fesd', 'tbb', 'wrew'];
const arr = [1, 5, 7, 2, 9, 6];
//迭代器函数
function createItertor(arr) {
  let index = 0;
  return {
    next() {
      if (index < arr.length) {
        return { done: false, value: arr[index++] };
      }
      return { done: true, value: undefined };
    },
  };
}
//创建不同的迭代函数
const Itertor = createItertor(name);
const Aitertor = createItertor(arr);
console.log(Itertor.next());
console.log(Itertor.next());
console.log(Itertor.next());
console.log(Itertor.next());
console.log(Itertor.next());
console.log(Itertor.next());

还可以来实现一个对象的迭代，我们都知道for of 是不能迭代对象的元素，但是有迭代器的话就可以将不能迭代的对象也能用for of 方法，这是因为对象的内部没有实现[Symbol.iterator]方法，数组和字符串都实现了这个方法，所以只要在对象中也实现这个方法，那么对象就可以迭代了

const iterator = {
  names: ['asv', 'grs', 'rbt', 'fa'],
 //这里用了symbol的迭代器方法，每次for of 进行遍历的时候都会找这个方法
//只要是实现了 [Symbol.iterator]方法就可以迭代
  [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 iterator1 = iterator[Symbol.iterator]();
console.log(iterator1.next()); //可以next方法
for (let item of iterator) {   //也可以用for of 方法
  console.log(item);
}

还可以实现一个类的迭代

class Room {
  constructor(stu) {
    this.stu = stu;
  }
  [Symbol.iterator]() {
    let index = 0;
    return {
      next: () => {
        if (index < this.stu.length) {
          return { done: false, value: this.stu[index++] };
        } else {
          return { done: true, value: undefined };
        }
      },
      //提前停止的方法
      return: () => {
        console.log('迭代器提前终止了');
        return { done: true, value: undefined };
      },
    };
  }
}
//类的内部实现一个可迭代的方法
const room = new Room(['asd', 'asv', 'fvds']);
for (let item of room) {
  console.log(item);
  if (item === 'asv') break;
}

生成器

在上面的代码中next函数的实现是迭代器的核心，但是每次都要手动实现，生成器的出现就是为了更简单的使用迭代器

//函数的后面接一个*，表示是一个生成器函数
function* foo() {
  console.log('start');

  let value1 = 200;
  console.log('1', value1);
  yield value1;  //yield表示，next在哪一行停止，可以理解为打了一个断点，用next执行下一个断点

  let value2 = 300;
  console.log('2', value2);
  yield value2;

  let value3 = 500;
  console.log('3', value3);
  yield value3;

  console.log('end');
  return 'end';
}

const fo = foo();
console.log(fo.next());  //{ value: 200, done: false }
//console.log(fo.next());
// console.log(fo.next());
// console.log(fo.next());

生成器的next还可以传入参数，传入的参数在yeild的返回值中

function* foo(num) {
  console.log('start');
  const value1 = 100 * num;
  console.log('1', value1);
  const n = yield value1;

  const value2 = 200 * n;
  console.log('2', value2);
  const m = yield value2;

  const value3 = 300 * m;
  console.log('3', value3);
  try {
    const l = yield value3;
    console.log('yield返回值', l);
  } catch (error) {
    console.log(error);
  }

  const value4 = 200;
  console.log('4', value4);
  const t = yield value2;

  const value5 = 200 * t;
  console.log('5', value5);
  const k = yield value5;

  console.log('end');
}

const iterator = foo(10);
//next传的参数在yield返回值中
console.log(iterator.next(5));
console.log(iterator.next(10));
console.log(iterator.next(20));
//return中止内部的执行,可以传入参数,在yield的返回值中,执行本次yeild终止
//console.log(iterator.return(36));
//throw抛出异常,传递的参数可以在trycatch中接收错误信息中,在下一个yeild终止
console.log(iterator.throw('err message'));

可以用生成器来替代迭代器使用

//函数
function* iterator(arr) {
  //写法一
  let index = 0;
  return {
    next: function () {
      if (index < arr.length) {
        return { done: false, value: arr[index++] };
      } else {
        return { done: true, value: undefined };
      }
    },
  };
  //写法二
  for (const item of arr) {
    await item;
  }
  //写法三:yeild* 后面跟上一个可迭代对象
  yield* arr;
}

//类
class Room {
  constructor(room) {
    this.room = room;
  }
  *[Symbol.iterator]() {
    yield* this.room;
  }
}

const room = new Room(['asv', 'fdev', 'ebrv', 'vds']);
for (let item of room) {
  console.log(item);
}

async await

在了解async await的原理之前，先来知道为什么要这个两个关键字，我们都知道async await是用来做异步请求的，在没有这个关键字前，异步的请求是怎么来实现的
先用setTimeout来模拟一下网络请求,每次请求加上一个字符串

function requestData(url) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(url);
    }, 1000);
  });
}

回调调用

requestData('aaa').then((res) => {
   requestData(res + 'bbb').then((res) => {
     requestData(res + 'ccc').then((res) => {
     console.log(res);
     });
   });
 });

调用的次数一多的话，就会造成回调地狱，而且代码也不够简洁

链式调用

requestData('aaa')
  .then((res) => {
    return requestData(res + 'bbb');
  })
  .then((res) => {
    return requestData(res + 'ccc');
  })
  .then((res) => {
    console.log(res);
  });

没有回调地狱了，但是代码不够简洁，次数一多的话还是有大量冗余代码

promise + 生成器

function* getData() {
  const res1 = yield requestData('aaa');
  const res2 = yield requestData(res1 + 'bbb');
  const res3 = yield requestData(res2 + 'ccc');
  console.log(res3);
}

const generator = getData()
//调用next方法
generator.next().value.then(res => {
  generator.next(res).value.then(res => {
    generator.next(res).value.then(res => {
      generator.next(res)
    })
  })
})

这样执行的请求就非常的简洁，但是需要手动来调用next方法，增加了额外的开销，所以，为了解决这个额外的开销，async await 就出来了,只需要在函数的前面加上async ，在要进行请求语句前面加上await就可以实现异步请求了，还不用手动调用next方法，如果看懂了上面的代码的话，这里就很好理解async await的原理了，这个其实就是promise加生成器的语法糖

async function getData() {
  const res1 = await requestData("why")
  const res2 = await requestData(res1 + "aaa")
  const res3 = await requestData(res2 + "bbb")
  const res4 = await requestData(res3 + "ccc")
  console.log(res4)
}