- Iterator
Iterator是ES6+中的一个新类型，它可以帮助我们更加方便地遍历数据结构。在ES6+中，Array、Map、Set、String等都实现了Iterator接口，因此可以直接使用for...of循环来遍历这些数据结构。
- 通过Symbol.iterator获取Iterator
在ES6+中，我们可以通过Symbol.iterator方法来获取一个数据结构的Iterator。例如：
const array = [1, 2, 3]; const iterator = array[Symbol.iterator](); console.log(iterator.next()); // { value: 1, done: false } console.log(iterator.next()); // { value: 2, done: false } console.log(iterator.next()); // { value: 3, done: false } console.log(iterator.next()); // { value: undefined, done: true }
- 这里获取了数组array的Iterator，并使用next方法逐个输出数组中的元素。
- Generator
Generator是ES6+中的另一个新类型，它可以帮助我们更加方便地生成迭代器。使用Generator可以让我们像写同步代码一样来处理异步操作。
- 创建Generator
在ES6+中，我们可以使用function*关键字来定义一个Generator。例如：
function* generator() { yield 1; yield 2; yield 3; } const iterator = generator(); console.log(iterator.next()); // { value: 1, done: false } console.log(iterator.next()); // { value: 2, done: false } console.log(iterator.next()); // { value: 3, done: false } console.log(iterator.next()); // { value: undefined, done: true }
- 这里创建了一个Generator，并使用next方法逐个输出Generator中的值。
- Generator的yield语句
在Generator中，yield语句可以帮助我们返回一个值，并暂停Generator的执行。例如：
function* generator() { yield 1; yield 2; yield 3; } const iterator = generator(); console.log(iterator.next()); // { value: 1, done: false } console.log(iterator.next()); // { value: 2, done: false } console.log(iterator.next()); // { value: 3, done: false } function* generator2() { yield 'A'; const result = yield 'B'; yield result; } const iterator2 = generator2(); console.log(iterator2.next()); // { value: 'A', done: false } console.log(iterator2.next()); // { value: 'B', done: false } console.log(iterator2.next('C')); // { value: 'C', done: false } console.log(iterator2.next()); // { value: undefined, done: true }
- 这里使用yield语句返回了不同的值，并暂停Generator的执行。在第二个Generator中，使用yield语句同时返回和接收一个值，并在下一次调用next方法时将该值传递给Generator。
总结
通过本文的介绍，我们了解了JavaScript中的Iterator和Generator。这些新特性可以帮助我们更加方便地遍历数据结构和处理异步操作。在实际开发中，我们需要根据需求来选择合适的编程方式，以便更加方便和有效地编写代码。
