【前端面试】七、算法-迭代器和生成器

目录

1.迭代器

2.生成器

---

1.迭代器

• lterator：也被称作游标Cursor，是一种设计模式。迭代器提供了一种遍历内容的方法(比如 JS 迭代器中的next)，而不需要关心内部构造。

    // 迭代器的遍历
    const s = new Set([1,2,3,4,5])
    const it = s.values()
    // console.log(it); // SetIterator {1, 2, 3, 4, 5}

    const it1 = s.values()
    // console.log([...it1]); // [1, 2, 3, 4, 5]

    const it2 = s.values()
    for (const val of it2) {
      // console.log(val); // 1 2 3 4 5
    } 

    let val = null
    while(!(val = it.next()).done) {
      // console.log(val);
      // {value: 1, done: false}
      // {value: 2, done: false}
      // {value: 3, done: false}
      // {value: 4, done: false}
      // {value: 5, done: false}
    }

    /* Array.from(arrayLike, mapFn, thisArg)
      arrLike：想要转换成数组的伪数组对象或可迭代对象
      mapFn：如果指定了该参数，新数组中的每个元素会执行该回调函数
      thisArg：可选参数，执行回调函数 mapFn 时 this 对象 
    */
   const it3 = s.values()
   const arr = Array.from(Array(5), it3.next, it3).map(x => x.value) // [1, 2, 3, 4, 5]

2.生成器

Generator：生成器，也是一种设计模式，用于构造复杂对象， JS 中的生成器，用于构造迭代器。

•         简化语法、写起来少考虑一些变量
•         节省空间（示例中函数体不需要定义数组承载值)
•         分散执行片段(节省单位时间的处理量)，对于单线程的前端非常重要
•         构造异步语法 

    // 生成器构造无穷斐波那契数列
    function* fibonacci() {
      let [prev, curr] = [1, 1]
      yield prev
      yield curr
      while(true) {
        [prev, curr] = [curr, prev + curr]
        yield curr
      }
    }

    const fib = fibonacci()
    const fib10 = Array.from(Array(10), fib.next, fib).map(x => x.value)
    // console.log(fib10) // [1, 1, 2, 3, 5, 8, 13, 21, 34, 55]

    // Generator异步语法
      function request (url) {
      return cb => {
        setTimeout(() => {
          cb(url) // 模拟异步操作,当异步操作完成后，再次调用run函数
        }, 1000)
      }
    }
 
    function createRunner (genFunc) {
      const it = genFunc()
      function run (data) {
        const result = it.next(data)
        if (result.done) return
        result.value(run) // 传入run函数，当异步操作完成后，再次调用run函数
      }
      return run()
    }

    function* genFunc() {
      const res1 = yield request('url1')
      console.log(res1)
      const res2 = yield request('url2')
      console.log(res2)
    }
 
    createRunner(genFunc)