Iterator 是什么

  1.       // 1.Iterator 的作用
  2.       // Iterator：遍历器（迭代器）
  3.       // for()
  4.       // [1,2].forEach
  5.       // new Set().forEach
  7.       // Iterator 也是用来遍历的
  9.       // 2.寻找 Iterator
  10.       // console.log(Iterator);
  12.       console.log([1, 2][Symbol.iterator]());
  14.       const it = [1, 2][Symbol.iterator]();
  15.       console.log(it);
  17.       // 3.使用 Iterator
  18.       // const it = [1, 2][Symbol.iterator]();
  19.       // console.log(it.next()); // {value: 1, done: false}
  20.       // console.log(it.next()); // {value: 2, done: false}
  21.       // console.log(it.next()); // {value: undefined, done: true}
  22.       // console.log(it.next()); // {value: undefined, done: true}
  24.       // it：可遍历对象（可迭代对象）
  25.       // Symbol.iterator：可遍历对象的生成方法
  27.       // 4.什么是 Iterator
  28.       // Symbol.iterator（可遍历对象的生成方法） -> it（可遍历对象） -> it.next() -> it.next() -> ...（直到 done 为 true）

Iterator 解惑

  1.       // 1.为什么需要 Iterator 遍历器
  2.       // 遍历数组：for 循环和 forEach 方法
  3.       // 遍历对象：for in 循环
  5.       // Iterator 遍历器是一个统一的遍历方式
  7.       // console.log([][Symbol.iterator]());
  8.       // console.log({}[Symbol.iterator]);
  10.       // 2.如何更方便的使用 Iterator
  11.       // Symbol.iterator->it->next()
  13.       // 我们一般不会直接使用 Iterator 去遍历
  14.       // for..of

for…of 的用法

  1.       // 1.认识 for...of
  2.       // const arr = [1, 2, 3];
  3.       // // const it = arr[Symbol.iterator]();
  4.       // // // console.log(it.next());
  5.       // // // console.log(it.next());
  6.       // // // console.log(it.next());
  7.       // // // console.log(it.next());
  8.       // // let next = it.next();
  9.       // // console.log(next);
  10.       // // while (!next.done) {
  11.       // //   console.log(next.value);
  12.       // //   next = it.next();
  13.       // //   console.log(next);
  14.       // // }
  15.       // for (const item of arr) {
  16.       //   console.log(item);
  17.       // }
  18.       // // for...of 循环只会遍历出那些 done 为 false 时，对应的 value 值
  20.       // 2.与 break、continue 一起使用
  21.       // const arr = [1, 2, 3];
  22.       // for (const item of arr) {
  23.       //   if (item === 2) {
  24.       //     // break;
  25.       //     continue;
  26.       //   }
  27.       //   console.log(item);
  28.       // }
  30.       // arr.forEach()
  32.       // 3.在 for...of 中取得数组的索引
  33.       const arr = [1, 2, 3];
  35.       // keys() 得到的是索引的可遍历对象，可以遍历出索引值
  36.       console.log(arr.keys());
  37.       // for (const key of arr.keys()) {
  38.       //   // console.log(key);
  39.       // }
  40.       // // values() 得到的是值的可遍历对象，可以遍历出值
  41.       // for (const value of arr.values()) {
  42.       //   console.log(value);
  43.       // }
  44.       // for (const value of arr) {
  45.       //   console.log(value);
  46.       // }
  48.       // entries() 得到的是索引+值组成的数组的可遍历对象
  49.       // for (const entries of arr.entries()) {
  50.       //   console.log(entries);
  51.       // }
  52.       for (const [index, value] of arr.entries()) {
  53.         console.log(index, value);
  54.       }

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

  1.       // 1.什么是可遍历
  2.       // 只要有 Symbol.iterator 方法，并且这个方法可以生成可遍历对象，就是可遍历的
  4.       // 只要可遍历，就可以使用 for...of 循环来统一遍历
  6.       // 2.原生可遍历的有哪些
  7.       // 数组
  8.       // 字符串
  9.       // Set
  10.       // Map
  11.       // arguments
  12.       // NodeList
  14.       // for (const item of [1, 2, 3]) {
  15.       //   console.log(item);
  16.       // }
  17.       // for (const item of 'hi') {
  18.       //   console.log(item);
  19.       // }
  20.       // for (const item of new Set([1, 2])) {
  21.       //   console.log(item);
  22.       // }
  23.       // for (const elem of document.querySelectorAll('p')) {
  24.       //   console.log(elem);
  25.       //   elem.style.color = 'red';
  26.       // }
  28.       // 3.非原生可遍历的有哪些
  29.       // 一般的对象
  30.       const person = { sex: 'male', age: 18 };
  31.       // console.log(person[Symbol.iterator]());
  33.       // {next()} {value,done}
  34.       // person[Symbol.iterator] = () => {
  35.       //   let index = 0;
  36.       //   return {
  37.       //     next() {
  38.       //       index++;
  40.       //       if (index === 1) {
  41.       //         return {
  42.       //           value: person.age,
  43.       //           done: false
  44.       //         };
  45.       //       } else if (index === 2) {
  46.       //         return {
  47.       //           value: person.sex,
  48.       //           done: false
  49.       //         };
  50.       //       } else {
  51.       //         return {
  52.       //           done: true
  53.       //         };
  54.       //       }
  55.       //     }
  56.       //   };
  57.       // };
  59.       // for (const item of person) {
  60.       //   console.log(item);
  61.       // }
  62.       // for in
  64.       // 有 length 和索引属性的对象
  65.       const obj = {
  66.         '0': 'alex',
  67.         '1': 'male',
  68.         length: 2
  69.       };
  71.       obj[Symbol.iterator] = Array.prototype[Symbol.iterator];
  73.       // obj[Symbol.iterator] = () => {
  74.       //   let index = 0;
  76.       //   return {
  77.       //     next() {
  78.       //       let value, done;
  79.       //       if (index < obj.length) {
  80.       //         value = obj[index];
  81.       //         done = false;
  82.       //       } else {
  83.       //         value = undefined;
  84.       //         done = true;
  85.       //       }
  87.       //       index++;
  89.       //       return {
  90.       //         value,
  91.       //         done
  92.       //       };
  93.       //     }
  94.       //   };
  95.       // };
  96.       for (const item of obj) {
  97.         console.log(item);
  98.       }

使用了 Iterator 的场合

  1.       // 原生可遍历的
  2.       // Array 数组
  3.       // String 字符串
  4.       // Set
  5.       // Map
  6.       // 函数的 arguments 对象
  7.       // NodeList 对象
  9.       // for...of
  11.       // 1.数组的展开运算符
  12.       // console.log(...[1, 2, 3]);
  13.       // console.log(1, 2, 3);
  14.       // console.log(...'str');
  15.       // console.log(...new Set([1, 2, 3]));
  16.       // console.log(...{}); ×
  18.       // 2.数组的解构赋值
  19.       // const [a, b] = [1, 2];
  20.       // const [a, b] = [...[1, 2]];
  21.       // const [a, b] = 'hi';
  22.       // const [a, b] = [...'hi'];
  23.       // const [a, b] = [...new Set([3, 4])];
  25.       // console.log(a, b);
  27.       // 3.Set 和 Map 的构造函数
  28.       // new Set(iterator)
  29.       // new Map(iterator)