for of循环

遍历所有数据结构的统一方式，只要这种数据结构有自己的ierable接口
for…of循环就是调用了被遍历对象的iterator方法得到一个迭代器，从而去遍历内部所有的数据
可以使用break跳出循环

  1. // for...of 循环
  3. const arr = [100, 200, 300, 400]
  5. // for (const item of arr) {
  6. //   console.log(item)
  7. // }
  9. // for...of 循环可以替代 数组对象的 forEach 方法
  11. // arr.forEach(item => {
  12. //   console.log(item)
  13. // })
  15. // for (const item of arr) {
  16. //   console.log(item)
  17. //   if (item > 100) {
  18. //     break
  19. //   }
  20. // }
  22. // forEach 无法跳出循环，必须使用 some 或者 every 方法
  24. // arr.forEach() // 不能跳出循环
  25. // arr.some()
  26. // arr.every()
  28. // 遍历 Set 与遍历数组相同
  30. // const s = new Set(['foo', 'bar'])
  32. // for (const item of s) {
  33. //   console.log(item)
  34. // }
  36. // 遍历 Map 可以配合数组结构语法，直接获取键值
  38. // const m = new Map()
  39. // m.set('foo', '123')
  40. // m.set('bar', '345')
  42. // for (const [key, value] of m) {
  43. //   console.log(key, value)
  44. // }
  46. // 普通对象不能被直接 for...of 遍历
  48. // const obj = { foo: 123, bar: 456 }
  50. // for (const item of obj) {
  51. //   console.log(item)
  52. // }

迭代器Iterator

  1. // 迭代器（Iterator）
  3. const set = new Set(['foo', 'bar', 'baz'])
  5. const iterator = set[Symbol.iterator]()
  7. // console.log(iterator.next())
  8. // console.log(iterator.next())
  9. // console.log(iterator.next())
  10. // console.log(iterator.next())
  11. // console.log(iterator.next())
  13. while (true) {
  14.   const current = iterator.next()
  15.   if (current.done) {
  16.     break // 迭代已经结束了，没必要继续了
  17.   }
  18.   console.log(current.value)
  19. }

实现可迭代接口Iterable

就是挂载一个iterator方法，然后在方法中实现迭代器对象

  1. // 实现可迭代接口（Iterable）
  3. // const obj = {
  4. //   [Symbol.iterator]: function () {
  5. //     return {
  6. //       next: function () {
  7. //         return {
  8. //           value: 'zce',
  9. //           done: true
  10. //         }
  11. //       }
  12. //     }
  13. //   }
  14. // }
  16. const obj = {
  17.   store: ['foo', 'bar', 'baz'],
  19.   [Symbol.iterator]: function () {
  20.     let index = 0
  21.     const self = this
  23.     return {
  24.       next: function () {
  25.         const result = {
  26.           value: self.store[index],
  27.           done: index >= self.store.length
  28.         }
  29.         index++
  30.         return result
  31.       }
  32.     }
  33.   }
  34. }
  36. for (const item of obj) {
  37.   console.log('循环体', item)
  38. }

迭代器设计模式

迭代器模式的核心意义：对外提供统一遍历的接口，让外面不需要关心内部的数据结构是怎样的
感受：就像是以前遍历需要使用某种具体的数据结构的独有的遍历方法，例如数组的forEach，而使用该模式，只要在数据结构内部实现可迭代接口，所有数据都只要for of就可以遍历到里面的数据了了

  1. // 迭代器设计模式
  3. // 场景：你我协同开发一个任务清单应用
  5. // 我的代码 ===============================
  7. const todos = {
  8.   life: ['吃饭', '睡觉', '打豆豆'],
  9.   learn: ['语文', '数学', '外语'],
  10.   work: ['喝茶'],
  12.   // 提供统一遍历访问接口
  13.   each: function (callback) {
  14.     const all = [].concat(this.life, this.learn, this.work)
  15.     for (const item of all) {
  16.       callback(item)
  17.     }
  18.   },
  20.   // 提供迭代器（ES2015 统一遍历访问接口）
  21.   [Symbol.iterator]: function () {
  22.     const all = [...this.life, ...this.learn, ...this.work]
  23.     let index = 0
  24.     return {
  25.       next: function () {
  26.         return {
  27.           value: all[index],
  28.           done: index++ >= all.length
  29.         }
  30.       }
  31.     }
  32.   }
  33. }
  35. // 你的代码 ===============================
  37. // for (const item of todos.life) {
  38. //   console.log(item)
  39. // }
  40. // for (const item of todos.learn) {
  41. //   console.log(item)
  42. // }
  43. // for (const item of todos.work) {
  44. //   console.log(item)
  45. // }
  47. todos.each(function (item) {
  48.   console.log(item)
  49. })
  51. console.log('-------------------------------')
  53. for (const item of todos) {
  54.   console.log(item)
  55. }