遍历器和for循环

1、Iterator是什么

Iterator 是 ES6 引入的一种新的遍历机制，Iterator本质是一个指针对象，其中包含一个next方法，这个方法可以改变指针的指向，并且返回一个包含value和done的对象，value为当前所指向的成员的值，done表示是否遍历完成

• 可遍历数据原型继承了Symbol.iterator

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

• 可以调用Iterator的next方法，查看遍历的过程

const it = [1, 2][Symbol.iterator]();
/*
  value：当前属性的值
  done：判断是否遍历结束 为 true 时则遍历结束
*/
console.log(it.next()); // {value: 1, done: false}
console.log(it.next()); // {value: 2, done: false}
console.log(it.next()); // {value: undefined, done: true}
console.log(it.next()); // {value: undefined, done: true}

2、Iterator解惑

• 为什么需要 Iterator 遍历器 ：为了统一遍历的方式，在ES6推出了Iterator遍历机制
  • 遍历数组：for 循环和 forEach 方法
  • 遍历对象：for in 循环
• 如何更方便的使用 Iterator： 使用for...of方法遍历

3、for...of用法

• for...of循环的本质就是将next方法遍历的过程封装，只遍历那些 done 为 false 时，对应的 value 值

// 使用next遍历过程
const arr = [1, 2, 3];
const it = arr[Symbol.iterator]();
let next = it.next();
while (!next.done) {
  console.log(next.value);
  next = it.next();
}
// 使用for...of直接就遍历了
for (const item of arr) {
  console.log(item);
}

4、for...of的使用

• 与break和continue关键字结合使用

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

• 在 for...of 中取得数组的索引
  • keys() 得到的是索引的可遍历对象，可以遍历出索引值

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

• values() 得到的是值的可遍历对象，可以遍历出值

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

• entries() 得到的是索引+值组成的数组的可遍历对象

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

5、原生可遍历和非原生可遍历对象

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

• 原生可遍历对象
  • 数组
  • 字符串
  • Set
  • Map
  • arguments
  • NodeList
• 非原生可遍历对象
  • 一般对象 var obj ={}
    手动添加Iterator，然后使用for...of遍历

const person = { sex: 'male', age: 18 };
person[Symbol.iterator] = () => {
  let index = 0;
  return {
    next() {
      index++;

      if (index === 1) {
        return {
          value: person.age,
          done: false
        };
      } else if (index === 2) {
        return {
          value: person.sex,
          done: false
        };
      } else {
        return {
          done: true
        };
      }
    }
  };
};

for (const item of person) {
  console.log(item);
}

• 有length和数字索引的对象

// 有 length 和索引属性的对象
const obj = {
  '0': 'alex',
  '1': 'male',
  length: 2
};
// 第一种方法，直接设置iterator
obj[Symbol.iterator] = Array.prototype[Symbol.iterator];
// 第二种方法，手动添加iterator
obj[Symbol.iterator] = () => {
  let index = 0;
  return {
    next() {
      let value, done;
      if (index < obj.length) {
        value = obj[index];
        done = false;
      } else {
        value = undefined;
        done = true;
      }
      index++;
      return {
        value,
        done
      };
    }
  };
};
for (const item of obj) {
  console.log(item);
}

6、使用了Iterator的场合

• 所有的原生可遍历对象
• 数组的展开运算符
• 数组的解构赋值
• Set 和 Map 的构造函数