ES6-新特性详解-迭代器与生成器

最新推荐文章于 2024-04-07 23:30:07 发布
最新推荐文章于 2024-04-07 23:30:07 发布
阅读量114 收藏
点赞数
文章标签： es6 javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuanfgbb/article/details/132390355
版权

前言

迭代，指按序重复执行同一段程序，JavaScript 在 ES6 之前，使用计数循环来实现数组的迭代，但它并不理想，因为这种方式特定于某一种数据结构，为次，ES6 新增了 迭代器 和 生成器 这两个高级特性。

迭代器

所谓迭代器，并不是指某种特殊的数据结构或特殊语法，而是一种模式，只要某个数据结构满足了 可迭代协议，那么它就是一个迭代器，可迭代协议有以下要求：

  • 能够识别自身是否是迭代器，对应于 JavaScript 代码则是：
    • 需要拥有 Symbol.iterator 内建属性
    • 该属性应为一个函数，且返回一个 可迭代对象
  • 可迭代对象必须拥有 next 方法与可选的 return 方法，方法的返回值格式应为 { done: boolean, value: any }
    • done 标识这个可迭代对象是否被消耗完毕
    • value 则是每次迭代所产生的值

下述代码就是一个满足要求的迭代器

const obj = {
  [Symbol.iterator]() {
    return {
      next() {
        return { done: true, value: undefined };
      }
    };
  }
};

只要一个数据结构满足可迭代协议，那么就能被 for...of 等语法消费，for...of 语法会隐式的调用 Symbol.iterator 方法，获取到可迭代对象，并不断的调用该对象的 next 方法，直到 done 标识为 true，且 done 为 true 时会忽略当前的 value 值

const obj = {
  [Symbol.iterator]() {
    let i = 0;
    return {
      next() {
        return {
          done: i >= 5,
          value: i >= 5 ? undefined : i++
        };
      }
    };
  }
}

for (const k of obj) {
  console.log(k); // 0 1 2 3 4
}

我们可以模拟 for...of 的行为

function forOf(target, callback) {
  const iterator = target[Symbol.iterator]();

  let result;
  while (
    (result = iterator.next()) &&
    !result.done
  ) {
    const { value } = result;
    callback(value);
  }
}

forOf(obj, k => console.log(k)); // 0 1 2 3 4

像一些常见的数据结构都有内建的迭代器，如 Array、string 等，当对这些数据结构进行迭代操作时便会调用内建的迭代器。

next 方法用于不断的获取值，而 return 方法用于终止迭代器，如 for...of 语法中使用 break 关键字跳出迭代

const obj = {
  [Symbol.iterator]() {
    let i = 0;
    return {
      next() {
        return {
          done: i >= 5,
          value: i >= 5 ? undefined : i++
        };
      },
      return() {
        return { done: true, value: undefined };
      }
    };
  }
}

for (const k of obj) {
  console.log(k); // 0 1 2 3
  if (k === 3) break;
}

当在 for...of 中使用 break 时，意味着不再需要消费后续的值，此时会调用可迭代对象的 return 方法。

迭代器与可迭代对象两者并不冲突，可以共存，即一个对象可以是迭代器也可以是可迭代对象

const obj = {
  i: 0,
  [Symbol.iterator]() {
    this.i = 0;
    return this;
  },
  next() {
    return {
      done: this.i >= 5,
      value: this.i >= 5 ?
        undefined : this.i++
    };
  }
}

异步迭代器

迭代器虽然非常强大，但如果程序内部逻辑是异步的便无法取得对应的值，你可能想到可迭代对象每次产生一个 Promise 就能获取对应的值，但这样是有缺陷的

const obj = {
  i: 0,
  [Symbol.iterator]() {
    this.i = 0;
    return this;
  },
  next() {
    const i = this.i++;
    return {
      done: i >= 5,
      value: i >= 5 ?
        undefined :
        new Promise(resolve => {
          setTimeout(
            () => resolve(i),
            Math.random() * 10
          )
        })
    };
  }
}

for (const p of obj) {
  p.then((i) => {
    console.log(i);
  })
}

上述代码中，可迭代对象每次产生一个 Promise，这让我们能够通过 .then 来获取到对应的异步值，但输出顺序却是乱序的，这与按序执行的宗旨相违背，并不是我们想看到的，为此我们需要新的迭代方式以支持异步迭代，即异步迭代器。

异步迭代器的定义与迭代器相似，区别在于识别自身的方式与可迭代对象 next 和 return 方法的返回值，异步迭代器使用 Symbol.asyncIterator 来标识自身，而可迭代对象 next 与 return 方法需要返回一个状态已完成的 Promise

const obj = {
  [Symbol.asyncIterator]() {
    return this;
  },
  next() {
    return Promise.resolve({ done: true, value: undefined });
  }
}

上面就是一个符合的异步迭代器，但仅仅如此不行，异步迭代器还需要配合 for await...of 语法使用，你可能发现了一个关键词 await，是的，for await...of 语法只能在异步函数中使用

const obj = {
  i: 0,
  [Symbol.asyncIterator]() {
    this.i = 0;
    return this;
  },
  next() {
    const i = this.i++;
    return Promise.resolve({
      done: i >= 5,
      value: i >= 5 ? undefined : i
    });
  }
}

async function run() {
  for await (const k of obj) {
    console.log(k); // 0 1 2 3 4
  }
}
run();

上述代码可以正常工作，且输出顺序也是正常的，那么让我们用异步迭代器重写之前的例子

const obj = {
  i: 0,
  [Symbol.asyncIterator]() {
    this.i = 0;
    return this;
  },
  async next() {
    const i = this.i++;
    await new Promise(resolve => {
      setTimeout(resolve, Math.random() * 10, i);
    })

    return { done: i >= 5, value: i >= 5 ? undefined : i };
  }
}

async function run() {
  for await (const k of obj) {
    console.log(k); // 0 1 2 3 4
  }
}
run();

生成器

与迭代器相比，生成器更加优秀，它提供了非常强大的异步流程控制方式，同时，生成器与迭代器的表现形式并不一样，任何数据结构满足要求便可以是一个迭代器，而生成器的表现形式为一个特殊函数

function *generator() {}

上述代码中，在函数声明 function 后添加了一个 * 号，这让这个函数变成了一个生成器，既然是特殊函数，那特殊在哪里呢

function *generator() {
  console.log('generator');
}
generator();

function ordinary() {
  console.log('ordinary');
}
ordinary();

运行上述代码，你会惊奇的发现，普通函数正常输出，但生成器函数却没有，难道函数调用没起作用吗？

其实是有的，但调用生成器函数并不会执行函数体内的代码，而是会返回一个生成器对象，该对象原型上具有 next 方法，可以用来启动和恢复程序的执行

function *generator() {
  console.log('generator');
}
const g = generator();

// 启动程序
g.next(); // generator

我们调用生成器函数获取到了生成器对象，并调用该对象原型上的 next 方法以启动程序的执行，最终正常输出。

next 方法不光能够启动程序，还能恢复程序执行，那意味着还有一种机制能够暂停程序的执行，在生成器函数中通过 yield 关键词来中断程序的执行

function *generator() {
  console.log('generator');

  yield;

  console.log('程序恢复执行');
}
const g = generator();

// 启动程序
g.next(); // generator
// 恢复执行
g.next(); // 程序恢复执行

运行上述代码，会发现第一个 next 调用启动程序后，只打印了一个输出，这意味着程序被中断了，而第二个 next 调用后恢复了程序的执行，才将第二个 console.log 语句输出。

yield 不光能够暂停程序的执行，还能够将值传递出去，就好像一个暂时的 return 语句一样

function *generator() {
  console.log('generator');

  yield 1;

  console.log('程序恢复执行');
}
const g = generator();

// 启动程序
const val1 = g.next(); // generator
console.log(val1); // { done: false, value: 1 }

// 恢复执行
const val2 = g.next(); // 程序恢复执行
console.log(val2); // { done: true, value: undefined }

yield 后能够书写表达式，这表示我们需要将表达式的值返回给 next 调用，但是我们会发现返回值的格式与可迭代对象产生的值格式一致，这意味着我们能够像消费可迭代对象一样消费生成器对象

function *generator() {
  yield 0;
  yield 1;
  yield 2;
  yield 3;
  yield 4;
}

for (const k of generator()) {
  console.log(k); // 0 1 2 3 4
}

yield 不光能够输出，还能够接受输入，调用 next 方法传递的参数会被当作 yield 的值

function *generator() {
  const num = yield 10;
  console.log(num);
}
const g = generator();

const val1 = g.next();
console.log(val1); // { done: false, value: 10 }

g.next(20); // 20

上述代码中，给第一个 next 调用传递参数是没有必要的，因为它用于启动程序，程序运行后遇到 yield 关键字导致程序暂停执行，并返回 yield 后的表达式值 10，第二个 next 调用后传递了实参 20，这导致上一个暂停程序的 yield 关键字变为了 值 20，此时进行 const num = 20 的运算，然后输出。

现在让我们来看看复杂一些的例子

function *generator(i) {
  const num = yield yield i * 10;
  console.log(num);
}

const g = generator(20);

console.log(g.next().value);
console.log(g.next(5).value);
g.next(10);

上述代码中会分别输出什么呢？思考一下。

其实会分别输出 200、5、10，这段代码的执行如下

  1. 获取生成器对象
  2. 启动程序
  3. 遇到第一个 yield，计算第一个 yield 后的表达式值，又遇到第二个 yield
  4. 第二个 yield 返回入参 20 和 10 的乘积 200
  5. 输出 200
  6. 恢复程序执行并传参 5
  7. 此时第二个 yield 值为 5，被第一个 yield 返回
  8. 输出 5
  9. 恢复程序执行并传参 10
  10. 此时 num 值为 10
  11. 输出 10

yield 是会受到运算符优先级影响的，相同的代码修改一下运算优先级会产生不同的结果

function *generator(i) {
  const num = yield (yield i) * 10;
  console.log(num);
}

const g = generator(20);

console.log(g.next().value); // 20
console.log(g.next(5).value); // 50
g.next(10); // 10

除了普通的 yield 语法外，JS 还提供了 yield* 语法，该语法类似于 for...of，使用 yield* 意味着我们想要消耗一个可迭代对象

function *generator() {
  yield* [0, 1, 2, 3, 4];
}

for (const k of generator()) {
  console.log(k); // 0 1 2 3 4
}

此外，yield* 还能进行委托

function* other() {
  const num = yield 10;
  console.log(num);
}

function *generator() {
  yield* other();
}
const g = generator();

const val = g.next();
console.log(val); // { done: false, value: 10 }

g.next(20); // 20

可以看到，generator 生成器函数内并没有 yield 出任何值，但仍能够获取到 other 生成器中 yield 出的值，且 other 生成器也能够接受到 generator 生成器的输入，yield* 的行为类似如下

function* other() {
  const num = yield 10;
  console.log(num);
}

function *generator() {
  // yield*
  {
    const g = other();

    let result = g.next();
    while(!result.done) {
      const args = yield result.value;
      result = g.next(args);
    }
  }
}

生成器对象原型上还拥有 return 与 throw 方法，return 方法用于关闭生成器，而 throw 方法用于注入错误

function *generator() {
  yield 10;
}
const g = generator();

// 启动程序
g.next();
// 注入错误
g.throw('err');

上述代码中，next 启动生成器之后，程序中止并 yield 出一个值，然后调用了 throw 方法，这会恢复程序的执行，并在上次中止执行的位置注入一个错误，这导致了这个生成器被关闭。

虽然注入了错误，但这个错误不是不可捕获的，我们只需要在程序停止运行的位置书写 try...catch 即可捕获被注入的错误

function *generator() {
  try {
    yield 10;
  } catch(err) {
    console.log(err);
  }
}
const g = generator();

// 启动程序
g.next();
// 注入错误
g.throw('err'); // err

这样我们就能捕获到注入的错误，并阻止生成器关闭，同时后续的 yield 输出值也会通过 throw 返回

function *generator() {
  try {
    yield 10;
  } catch(err) {
    console.log(err);
  }

  yield 20; 
}
const g = generator();

// 启动程序
g.next();
// 注入错误
const val = g.throw('err'); // err
console.log(val); // { done: false, value: 20 }

结语

ES6 迭代器与生成器的出现提供了非常强大的功能，迭代器模式使我们能够自定义重复执行程序的逻辑，而生成器给我们提供了强大的异步流程控制，与生成器相配合的 yield 让我们能够进行双向的数据传递，基于此，我们能够实现很多高级的模式，像 async 函数其实就是基于 Promise + generator 实现的。

参考资料

《JavaScript 高级程序设计》
《你不知道的 JavaScript》
MDN

yuanyxh
关注
ES6的迭代器(Iterator)和生成器(Generator)
wanghongpu9305的博客
11-28 528
ES6的迭代器和生成器为JavaScript带来了更强大的迭代和异步编程能力。迭代器提供了一种顺序访问集合中每个元素的方式，而生成器则允许函数在执行过程中暂停和恢复。它们在实际开发中有着广泛的应用，可以用于自定义遍历方式、简化异步流程控制等场景。通过深入了解迭代器和生成器，我们可以更好地利用它们来提升代码的质量和效率。
ES6新增数组迭代方法
hmxs_hmbb的博客
04-27 611
因为ES6的出现, 数组出现了很多的方法; 这里就来聊一聊在实际开发中会遇到的数组迭代方式. 如: 1. map() 2. filter() 3. foEach() 4. some() 5. every() 6. findIndex() 7. reduce(); 由于这些方式是被写在Array.prototype中, 所以只要是真数组, 都能调用数组...
ES6之迭代器(Iterator)
俊刚的博客
12-31 1149
ES6引入了迭代器的概念，这个特性为JavaScript带来了更强大的迭代和异步编程能力。本文将深入探讨ES6的迭代器，介绍其概念、用法以及在实际开发中的应用。 迭代器（Iterator）是ES6引入的一种新的数据结构，它提供了一种统一的遍历机制，可以用来遍历各种不同类型的数据。迭代器的概念、作用和遍历原理如下所述：
华为社招面试，ES6 入门—ES6 迭代器，2024前端大厂面试经验
最新发布
2401_83974199的博客
04-07 530
随后通过 next 方法进行向下迭代指向下一个位置，next 方法会返回当前位置的对象，对象包含了 value 和 done 两个属性，value 是当前属性的值，done 用于判断是否遍历结束;迭代器，是 ES6 引入的一种新的遍历机制，主要讲解的是 Iterator 、迭代过程、可迭代的数据结构。String，Array，Map，Set，Dom 元素是所有内置的可迭代对象，他们的原型对象都有一个。迭代器是一个统一的接口，它的作用是使各种数据结构可被便捷的访问，它是通过一个键为。
（六） ES6 新特性 —— 迭代器（iterator)
a45667的博客
09-28 842
//声明一个对象name: '终极一班',};//遍历这个对象}直接遍历对象明显是拿不到的，因为里面没有可用的iterator接口。//声明一个对象name: '终极一班',// 实现iterator方法//索引变量//return {//下标自增index++;//返回结果} else {}},};},};//遍历这个对象}
详解ES6语法之可迭代协议和迭代器协议
08-28
ECMAScript 2015 中的可迭代协议和迭代器协议 ECMAScript 2015 中引入了两个重要的协议：可迭代协议和迭代器协议。这些协议允许 JavaScript 对象定义或定制它们的迭代行为，并提供了一种统一的访问机制来处理不同的...
es6-examples:ES6示例-Javascript新手
05-16
生成器函数通过 `function*` 定义，可以暂停和恢复执行，用于实现异步编程，如协程和迭代。 8. **Promise 对象** Promise 是处理异步操作的一种方式，它代表了一个异步操作的最终完成或失败的状态以及这个状态...
day04-es6-课件.rar
04-18
生成器函数是带有星号（*）标识的普通函数，可以暂停执行并返回一个迭代器。通过`yield`关键字，生成器可以控制函数的执行流程，常用于实现复杂的异步操作。 9. **默认参数**： 在函数定义时可以直接为参数设置...
day03-es6-课件.rar
04-18
这个“day03-es6-课件”可能包含了关于ES6的详细讲解，包括其核心概念、新特性以及如何在实际项目中应用这些新特性。 1. **箭头函数** 箭头函数是ES6中的一种新函数定义方式，以其简洁的语法而受到欢迎。例如： `...
ES6迭代器与生成器详解：简化数据操作与高效编程
在ES6中，迭代器(Iterator)和生成器(Generator)是两个重要的语言特性，它们极大地简化了数据处理和迭代逻辑。本文将深入解析这两个概念。 首先，迭代器是一个核心概念，用于简化对数据集合的操作。它是一个特殊对象...
ES6迭代器、set、map知识点
Hfffs的博客
09-28 226
1.迭代器 迭代器（Iterator）就是这样一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口，就可以完成遍历操作（即依次处理该数据结构的所有成员） Iterator 的作用有三个：一是为各种数据结构，提供一个统一的、简便的访问接口；二是使得数据结构的成员能够按某种次序排列；三是ES6创造了一种新的遍历命令for...of循环，Iterator接口主要供for...of消费。 Iterator 的遍历过程是这样的。 创建一个指针对象，指向当
ES6（ECMASript 6 新特性---迭代器，生成器）
weixin_51249285的博客
08-19 196
ECMASript 6 新特性（迭代器，生成器）
ES6新特性 — 迭代器、生成器、Promise、Set、Map、Class类、数值和对象的扩展、模块化
m0_59897687的博客
03-02 500
目录 一、迭代器 迭代器自定义遍历对象案例 二、生成器 生成器函数的参数 生成器函数的两个实例： 三、Promise 实例化Promise对象 Promise 读取文件 四、Set 数组去重： 交集： 并集 差集 五、Map 六、class 类 知识点： 类的静态成员 类的继承 class的get和set 七、数值扩展 1.Number.EPSILON 2. 二进制和八进制 3. Number.isFinite() 与 Number.isNaN() ...
ES6新增特性总结
一只努力搬砖的打工妹纸
02-13 3529
一文让你对es6新增特性了然于胸
ES6 入门—ES6 迭代器
weixin_44009656的博客
05-29 2990
迭代器，是 ES6 引入的一种新的遍历机制，主要讲解的是 Iterator 、迭代过程、可迭代的数据结构。
ES6的迭代器Iterator深入理解（写一个和ES6一样的自定义的迭代器）
weixin_43342105的博客
09-20 613
文章目录Iterator的概念Iterator的三个作用Iterator的实现步骤Iterator的实现原理默认的迭代器(Iterator)接口自行设置迭代器(Iterator)接口 Iterator的概念 遍历器（Iterator）它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作 （即依次处理该数据结构的所有成员, 之前只有数组和NodeList等比较特殊的类数组才拥有该特性） Iterator的三个作用 一是为各种数据结构，提供一个
ES6——迭代器
xun__xing的博客
08-11 1211
迭代器一、迭代器1.什么是迭代？2.迭代和遍历的区别3.迭代器4.迭代模式5.JS中的迭代器二、可迭代协议与for-of循环1.可迭代协议2.for-of 循环3.展开运算符与可迭代对象三、生成器1.什么是生成器2.如何创建生成器3.书写一个生成器函数4.生成器函数内部是如何执行5.注意的细节6.生成器的其他API7.生成器应用-异步任务控制 一、迭代器 1.什么是迭代？ 从一个数据集合中按照一定的顺序，不断取出数据的过程 2.迭代和遍历的区别 迭代强调的是依次取数据，并不保证取多少，也不保证把所有的数据取
ES6新特性之迭代器及其应用
m0_47354578的博客
08-03 360
迭代器介绍 迭代器（Iterator）是一种接口，为各种不同的数据结构提供统一的访问机制，任何数据结构只要部署Iterator接口，就可以完成遍历操作。 ES6创造了一种新的遍历命令for..of循环，Iterator接口主要供for...of消费 // 声明一个数组 const xiyou = ['唐僧', '孙悟空', '猪八戒', '沙僧'] // 使用for...of遍历数组 for(let v of xiyou) { console.log(v) } 原生具备Iterato
ES6新特性——7.迭代器，生成器
weixin_44154094的博客
06-20 164
迭代器 1.1创建迭代器 是一种新的遍历机制， 两个核心， 1.迭代器是一个接口， 能快捷访问数据， 通过Symbol.iterator来创建迭代器 2.迭代器是用于遍历数据结构的指针 const items = ['one', 'two', 'thr'] const ite = items[Symbol.iterator()] console.log(ite.next()) //{value:'one', done:false}done如果为false, 遍历继续， 如果为true,表示遍历完成 生
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值