ECMAScript 2019 (ES10) 中的 iterator 和 generator：详解新特性和使用场景
在 JavaScript 中，iterator 和 generator 是两个非常有用的特性。它们可以帮助开发者更好地处理集合和异步操作。在 ECMAScript 2019 (ES10) 中，iterator 和 generator 有了一些新的特性和用法，本文将详细介绍这些新特性和使用场景。
一、Iterator
Iterator 是一种统一的遍历机制，它可以让开发者遍历任何数据结构，比如数组、Set、Map 等。在 ES10 中，iterator 有了以下新特性：
- for-await-of 循环
在 ES8 中，引入了 for-of 循环，可以遍历数组、Set、Map 等可迭代对象。在 ES10 中，又引入了 for-await-of 循环，可以遍历异步迭代器。比如，我们可以使用 for-await-of 循环遍历一个包含 Promise 的数组：
// javascriptcn.com 代码示例
async function asyncFunc() {
const promises = [
Promise.resolve(1),
Promise.resolve(2),
Promise.resolve(3)
];
for await (const promise of promises) {
console.log(promise);
}
}在这个例子中，我们定义了一个 asyncFunc 函数，该函数返回一个包含三个 Promise 的数组。在 for-await-of 循环中，我们使用 const promise of promises 的语法来遍历这个数组。由于 promises 数组中的每一个元素都是 Promise，因此我们需要使用 async 和 await 关键字来等待 Promise 的解决。
- Symbol.iterator
在 ES6 中，引入了 Symbol 类型，可以用来定义一个唯一的属性名。在 ES10 中，iterator 的默认方法是 Symbol.iterator，这意味着，只要一个对象定义了 Symbol.iterator 属性，就可以被遍历。比如，我们可以定义一个包含 Symbol.iterator 属性的对象：
// javascriptcn.com 代码示例
const obj = {
[Symbol.iterator]() {
let i = 0;
return {
next() {
i++;
if (i <= 3) {
return { value: i, done: false };
} else {
return { value: undefined, done: true };
}
}
};
}
};
for (const item of obj) {
console.log(item);
}在这个例子中，我们定义了一个包含 Symbol.iterator 属性的对象 obj。该属性返回一个对象，该对象有一个 next 方法，该方法返回一个包含 value 和 done 属性的对象。在 for-of 循环中，我们可以遍历 obj 对象。
二、Generator
Generator 是一种可以暂停和恢复执行的函数，可以用来处理异步操作。在 ES10 中，generator 有了以下新特性：
- try-catch 块
在 ES6 中，generator 函数中的错误可以通过 throw 语句抛出。在 ES10 中，我们可以使用 try-catch 块来捕获 generator 函数中的错误。比如，我们可以定义一个包含 try-catch 块的 generator 函数：
// javascriptcn.com 代码示例
function* genFunc() {
try {
yield 1;
throw new Error('error');
yield 2;
} catch (e) {
console.log(e);
}
}
const gen = genFunc();
console.log(gen.next());
console.log(gen.next());在这个例子中，我们定义了一个 genFunc generator 函数，该函数包含 try-catch 块。在 try 块中，我们使用 yield 语句返回 1，然后抛出一个错误。在 catch 块中，我们使用 console.log 打印错误信息。在主程序中，我们定义了一个 gen generator 对象，并两次调用 gen.next() 方法，分别返回 1 和 undefined。
- yield* 表达式
在 ES6 中，generator 函数中的 yield 语句只能返回一个值。在 ES10 中，我们可以使用 yield* 表达式来返回多个值。比如，我们可以定义一个包含 yield* 表达式的 generator 函数：
function* genFunc() {
yield* [1, 2, 3];
}
const gen = genFunc();
console.log(gen.next());
console.log(gen.next());在这个例子中，我们定义了一个 genFunc generator 函数，该函数使用 yield* 表达式返回一个数组。在主程序中，我们定义了一个 gen generator 对象，并两次调用 gen.next() 方法，分别返回 1 和 2。
总结
在 ECMAScript 2019 (ES10) 中，iterator 和 generator 有了一些新的特性和用法。iterator 的默认方法是 Symbol.iterator，可以被任何对象遍历。generator 可以使用 try-catch 块来捕获错误，也可以使用 yield* 表达式返回多个值。这些新特性和用法可以帮助开发者更好地处理集合和异步操作，提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6506beec95b1f8cacd2710ec