六、ES6+详情篇—迭代器和生成器

ES6+

发布日期: 2024-12-03

更新日期: 2024-12-03

文章字数: 2.8k

阅读时长: 13 分

阅读次数:

1、迭代器

背景知识

什么是迭代？

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

迭代和遍历的区别？

迭代强调的是依次取数据，并不保证取多少，也不保证把所有的数据取完

遍历强调的是要把整个数据依次全部取出

迭代器

对迭代过程的封装，在不同的语言中有不同的表现形式，通常为对象

迭代模式

一种设计模式，用于统一迭代过程，并规范了迭代器规格：

迭代器应该具有得到下一个数据的能力
迭代器应该具有判断是否还有后续数据的能力

JS中的迭代器

JS规定，如果一个对象具有next方法，并且该方法返回一个如下格式的对象：

{value: 值, done: 是否迭代完成}

则认为该对象是一个迭代器

含义：

next方法：用于得到下一个数据
返回的对象
- value：下一个数据的值
- done：boolean，是否迭代完成

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>

  <body>
    <script>
      const arr = [1, 2, 3, 4, 5];
      //迭代数组arr
      const iterator = {
        i: 0, //当前的数组下标
        next() {
          var result = {
            value: arr[this.i],
            done: this.i >= arr.length
          }
          this.i++;
          return result;
        }
      }

      //让迭代器不断的取出下一个数据，直到没有数据为止
      let data = iterator.next();
      while (!data.done) { //只要没有迭代完成，则取出数据
        console.log(data.value)
        //进行下一次迭代
        data = iterator.next();
      }

      console.log("迭代完成")
    </script>
  </body>

</html>

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>

  <body>
    <script>
      const arr1 = [1, 2, 3, 4, 5];
      const arr2 = [6, 7, 8, 9];

      // 迭代器创建函数  iterator creator
      function createIterator(arr) {
        let i = 0;//当前的数组下标
        return { 
          next() {
            var result = {
              value: arr[i],
              done: i >= arr.length
            }
            i++;
            return result;
          }
        }
      }

      const iter1 = createIterator(arr1);
      const iter2 = createIterator(arr2);

    </script>
  </body>

</html>

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>

  <body>
    <script>
      // 依次得到斐波拉契数列前面n位的值
      // 1 1 2 3 5 8 13 .....

      //创建一个斐波拉契数列的迭代器
      function createFeiboIterator() {
        let prev1 = 1,
          prev2 = 1, //当前位置的前1位和前2位
          n = 1; //当前是第几位

        return {
          next() {
            let value;
            if (n <= 2) {
              value = 1;
            } else {
              value = prev1 + prev2;
            }
            const result = {
              value,
              done: false
            };
            prev2 = prev1;
            prev1 = result.value;
            n++;
            return result;
          }
        }
      }

      const iterator = createFeiboIterator();

    </script>
  </body>

</html>

2、迭代器协议与for-of循环

可迭代协议

概念回顾

迭代器(iterator)：一个具有next方法的对象，next方法返回下一个数据并且能指示是否迭代完成
迭代器创建函数（iterator creator）：一个返回迭代器的函数

可迭代协议

ES6规定，如果一个对象具有知名符号属性Symbol.iterator，并且属性值是一个迭代器创建函数（生成器就是迭代器创建函数），则该对象是可迭代的（iterable）

思考：如何知晓一个对象是否是可迭代的？思考：如何遍历一个可迭代对象？

for-of 循环

for-of 循环用于遍历可迭代对象，格式如下

//迭代完成后循环结束
for(const item of iterable){
  //iterable：可迭代对象
  //item：每次迭代得到的数据
}

展开运算符与可迭代对象

展开运算符可以作用于可迭代对象，这样，就可以轻松的将可迭代对象转换为数组。

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>

  <body>
    <script>
      //可迭代对象
      var obj = {
        a: 1,
        b: 2,
        [Symbol.iterator]() {
          const keys = Object.keys(this);
          let i = 0;
          return {
            next: () => {
              const propName = keys[i];
              const propValue = this[propName];
              const result = {
                value: {
                  propName,
                  propValue
                },
                done: i >= keys.length
              }
              i++;
              return result;
            }
          }
        }
      }

      for (const item of obj) {
        console.log(item); // {propName:"a", propValue:1}
      }
    </script>
  </body>

</html>

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>

  <body>
    <script>
      const arr = [5, 7, 2, 3, 6];


      const iterator = arr[Symbol.iterator]();
      let result = iterator.next();
      while (!result.done) {
          const item = result.value; //取出数据
          console.log(item);
          //下一次迭代
          result = iterator.next();
      }

      for (const item of arr) {
        console.log(item)
      }
    </script>
  </body>

</html>

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>

  <body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <script>
      const divs = document.querySelectorAll("div");


      // const iterator = divs[Symbol.iterator]()
      // let result = iterator.next();
      // while (!result.done) {
      //     const item = result.value; //取出数据
      //     console.log(item);
      //     //下一次迭代
      //     result = iterator.next();
      // }

      for (const item of divs) {
        console.log(item);
      }
    </script>
  </body>

</html>

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>

  <body>
    <script>
      var obj = {
        a: 1,
        b: 2,
        [Symbol.iterator]() {
          const keys = Object.keys(this);
          let i = 0;
          return {
            next: () => {
              const propName = keys[i];
              const propValue = this[propName];
              const result = {
                value: {
                  propName,
                  propValue
                },
                done: i >= keys.length
              }
              i++;
              return result;
            }
          }
        }
      }

      const arr = [...obj];
      console.log(arr);

      function test(a, b) {
        console.log(a, b)
      }

      test(...obj);
    </script>
  </body>

</html>

3、生成器

什么是生成器？

生成器是一个通过构造函数Generator创建的对象，生成器既是一个迭代器，同时又是一个可迭代对象

如何创建生成器？

生成器的创建，必须使用生成器函数（Generator Function）

如何书写一个生成器函数呢？

//这是一个生成器函数，该函数一定返回一个生成器
function* method(){

}

生成器函数内部是如何执行的？

生成器函数内部是为了给生成器的每次迭代提供的数据

每次调用生成器的next方法，将导致生成器函数运行到下一个yield关键字位置

yield是一个关键字，该关键字只能在生成器函数内部使用，表达“产生”一个迭代数据。

有哪些需要注意的细节？

1). 生成器函数可以有返回值，返回值出现在第一次done为true时的value属性中 2). 调用生成器的next方法时，可以传递参数，传递的参数会交给yield表达式的返回值 3). 第一次调用next方法时，传参没有任何意义 4). 在生成器函数内部，可以调用其他生成器函数，但是要注意加上*号

生成器的其他API

return方法：调用该方法，可以提前结束生成器函数，从而提前让整个迭代过程结束
throw方法：调用该方法，可以在生成器中产生一个错误

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>

  <body>
    <script>
      function* test() {
        console.log("第1次运行")
        yield 1;
        console.log("第2次运行")
        yield 2;
        console.log("第3次运行")
      }

      const generator = test();
    </script>
  </body>

</html>

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>

  <body>
    <script>
      const arr1 = [1, 2, 3, 4, 5];
      const arr2 = [6, 7, 8, 9];

      // 迭代器创建函数  iterator creator
      function* createIterator(arr) {
        for (const item of arr) {
          yield item;
        }
      }

      const iter1 = createIterator(arr1);
      const iter2 = createIterator(arr2);

    </script>
  </body>

</html>

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>

  <body>
    <script>
      //创建一个斐波拉契数列的迭代器
      function* createFeiboIterator() {
        let prev1 = 1,
          prev2 = 1, //当前位置的前1位和前2位
          n = 1; //当前是第几位
        while (true) {
          if (n <= 2) {
            yield 1;
          } else {
            const newValue = prev1 + prev2
            yield newValue;
            prev2 = prev1;
            prev1 = newValue;
          }
          n++;
        }
      }

      const iterator = createFeiboIterator();
    </script>
  </body>

</html>

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>

  <body>
    <script>
      function* test() {
        console.log("第1次运行")
        yield 1;
        console.log("第2次运行")
        yield 2;
        console.log("第3次运行");
        return 10;
      }

      const generator = test();
    </script>
  </body>

</html>

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>

  <body>
    <script>
      function* test() {
        console.log("函数开始")

        let info = yield 1;
        console.log(info)
        info = yield 2 + info;
        console.log(info)
      }

      const generator = test();
    </script>
  </body>

</html>

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>

  <body>
    <script>
      function* t1(){
        yield "a"
        yield "b"
      }

      function* test() {
        yield* t1();
        yield 1;
        yield 2;
        yield 3;
      }

      const generator = test();
    </script>
  </body>

</html>

4、生成器异步任务控制

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>

  <body>
    <script>
      function* task() {
        const d = yield 1;
        console.log(d)
        // //d : 1
        const resp = yield fetch("http://101.132.72.36:5100/api/local")
        const result = yield resp.json();
        console.log(result);
      }

      run(task)

      function run(generatorFunc) {
        const generator = generatorFunc();
        let result = generator.next(); //启动任务（开始迭代）, 得到迭代数据
        handleResult();
        //对result进行处理
        function handleResult() {
          if (result.done) {
            return; //迭代完成，不处理
          }
          //迭代没有完成，分为两种情况
          //1. 迭代的数据是一个Promise
          //2. 迭代的数据是其他数据
          if (typeof result.value.then === "function") {
            //1. 迭代的数据是一个Promise
            //等待Promise完成后，再进行下一次迭代
            result.value.then(data => {
              result = generator.next(data)
              handleResult();
            })
          } else {
            //2. 迭代的数据是其他数据，直接进行下一次迭代
            result = generator.next(result.value)
            handleResult();
          }
        }
      }
    </script>
  </body>

</html>