js 迭代器详解

1.迭代器的特征

跌代：从一个数据集合中按照一定顺序，不断地取数据的过程

//创建迭代器
let iter=arr[Symbol.iterator]();
//value 就是值，done 表示跌代结束了没有
console.log(iter.next());  //{value: 10, done: false}
console.log(iter.next());  //{value: 20, done: false}
console.log(iter.next());  //{value: 30, done: false}
console.log(iter.next());  //{value: undefined, done: true}

跌代和遍历的区别？
【过程】跌代强调的依次取出，不能确定可以取出的值有多少，也不能保证去把数据全部去完
【结果】遍历必须保证数据的长度，循环不断的全部取出，针对于数据量过大的情况下使用遍历，需要时间过长

2.那些是可迭代对象

那些是可迭代对象：凡是可以用 for … of来循环的都是可迭代对象
for…of…是下面这样的语法糖:

async function grammar() {
  let arr = [4, 2, 1]
  let iterator = arr[Symbol.iterator]();
  let res = iterator.next();
  while(!res.done) {
    let value = res.value;
    console.log(value);
    res = iterator.next();
  }
	console.log('结束')
}

grammar() //4,2,1

3.设计一个可迭代对象

let obj = {
  name : 'tom',
  age : 18,
  gender : '男',
  intro : function(){
    console.log('my name is '+this.name)
  },
  [Symbol.iterator]:function(){
    let i = 0;
    // 获取当前对象的所有属性并形成一个数组
    let keys = Object.keys(this); 
  
    return {
      next: function(){
        return {
          // 外部每次执行next都能得到数组中的第i个元素
          value:keys[i++], 
          // 如果数组的数据已经遍历完则返回true
          done:i > keys.length 
        }
      }
    }
  }
}

for(let val of obj){
  console.log(val);
}

4.生成器的执行机制

function* genFunc(){
    console.log('执行了genFunc-1');
    yield 1;  //genFunc函数里面的代码遇到yield就会停下来并跳出这个函数，返回yield后面的值（加工成一个对象）给调用.next()的地方
    console.log('执行了genFunc-2');
    yield 2;
    console.log('执行了genFunc-3');
    yield 3;
}
//  生成器函数的执行机制：生成器函数并不是执行函数里面的代码，而是创建一个迭代器
let iters=genFunc() //创建一个迭代器
console.log(iters.next());// 执行了genFunc-1 {value: 1, done: false}

console.log(iters.next());  //  执行了genFunc-2 {value: 2, done: false}
console.log(iters.next());  //  执行了genFunc-3  {value: 3, done: false}
console.log(iters.next()); //  {value: undefined, done: true}