ES6的Iterator与Generator函数

在 ECMAScript 6（ES6）中，Iterator（迭代器）和 Generator 函数是强大的特性，为处理数据提供了更灵活的方式。

一、Iterator（迭代器）

Iterator 是一种接口，它为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署了 Iterator 接口，就可以被for...of循环遍历。
一个对象要成为可迭代对象，需要实现Symbol.iterator方法，该方法返回一个具有next方法的对象。
基本用法：

let items = ['one', 'two', 'three'];
//创建一个遍历器
let ite = items[Symbol.iterator]();
console.log(ite.next()) // { value: 'one', done: false }
console.log(ite.next()) // { value: 'two', done: false }
console.log(ite.next()) // { value: 'three', done: false }
console.log(ite.next()) // { value: undefined, done: true }

使用场景：
遍历自定义数据结构：当你有自定义的数据结构，如链表、树等，可以通过实现 Iterator 接口使得这些数据结构可以方便地被遍历。
与语言的迭代机制（如for...of循环、扩展运算符等）配合使用，提供统一的遍历方式，使代码更加简洁和可读。

二、Generator 函数

Generator 函数是 ES6 提供的一种异步编程解决方案，它可以暂停和恢复执行，状态可以被保存和恢复，函数执行可以被外部控制。
Generator 函数返回一个 Generator 对象，这个对象具有next、throw和return方法，可以用来控制函数的执行。

基本用法：

 function* generatorFunc() {
       yield 'First value';
       yield 'Second value';
       return 'Done';
   }

   const gen = generatorFunc();
   console.log(gen.next()); // { value: 'First value', done: false }
   console.log(gen.next()); // { value: 'Second value', done: false }
   console.log(gen.next()); // { value: 'Done', done: true }

使用场景：

异步编程：可以将异步操作封装在 Generator 函数中，通过 yield 暂停函数执行，等待异步操作完成后再恢复执行，使得异步代码看起来更像同步代码，提高代码的可读性和可维护性。
数据生成器：可以用于生成一系列的值，按需生成数据，避免一次性生成大量数据占用过多内存。
迭代器的灵活实现：可以方便地创建自定义的迭代器，实现复杂的迭代逻辑。

举个用在异步编程中的例子：

// 1.加载 Loading...页面
// 2.数据加载完成...（异步操作）
// 3.Loading 关闭掉
 
function loadUI(){
    console.log('加载 Loading...页面');
}
 
function showData(){
    // 模拟数据加载异步操作
    setTimeout(() => {
        console.log('数据加载完成');
    },1000);
}
 
function hideUI(){
    console.log('隐藏 Loading...页面');
}
 
loadUI();
showData();
hideUI();

结果如下：

generator应用.png

分析上图：我们的实际需求是加载数据完成后才关闭页面，但由于三个函数函数是同步执行的，数据加载需要时间，在数据未加载完成时，就已经隐藏loading页面。通过 Generator 函数可以解决这个问题。

function* load() {
    loadUI();
    yield showData();     
    hideUI();
}
 
const itLoad = load();
itLoad.next();
 
function loadUI(){
    console.log('加载 Loading...页面');
}
 
function showData(){
    // 模拟数据加载异步操作
    setTimeout(() => {
        console.log('数据加载完成');
        // 当数据返回后才执行下一步操作
        itLoad.next();
    },1000);
}
 
function hideUI(){
    console.log('隐藏 Loading...页面');
}

generator应用.png