迭代器和生成器

忘是亡心i 2023-07-18 09:28 23阅读 0赞

在学习`迭代器（Iterator）`之前，我们需要理解一下的几个问题

**什么是迭代？**

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

**迭代和遍历有什么区别?**

迭代强调是依次取出，不能确定取出的有多少，也不能保证把数据全部取完。

**什么是迭代器？**

对迭代过程的封装，通常为对象，不同的语言中，表现出来的迭代形式不一样。

**JavaScript中的迭代器**

在`JavaScript`中的迭代器，存在`next()`方法，并且返回一个对象。`next()`方法是用于得到下一个数据。

const obj = { 
        next() { 
            return { 
                value: ???, // 数据
                done: ??? // 判断是否有后续数据，一般为Boolean
            }
        }
    }

举个例子来看

这个`iterator`对象就是迭代器

let data = iterator.next();
    while (!data.done) { 
        console.log(data.value)
        data = iterator.next();
    }

在`ES6`中，可以通过 `Symbol.iterator` 创建一个迭代器

const arr = [1, 2, 3, 4, 5];
    const iterator = arr[Symbol.iterator]();
    
    iterator.next()
    // {value: 1, done: false}
    iterator.next()
    // {value: 2, done: false}
    iterator.next()
    // {value: 3, done: false}
    iterator.next()
    // {value: 4, done: false}
    iterator.next()
    // {value: 5, done: false}
    iterator.next()
    // {value: undefined, done: true}

`for...of...` 循环就是专门遍历可迭代的对象的

const arr = [1, 2, 3, 4, 5];
    for (const item of arr) { 
        console.log(item)
    }
    
    // 1 2 3 4 5

#### 可迭代的数据结构 ####

可迭代的数据结构有`Array`、`String`、`Map`、`Set`和`DOM元素`，普通的对象是无法迭代的

for (let item of { }) {  
      console.log(item);
    }
    
    // TypeError: {} is not iterable

#### 自定义的迭代对象 ####

普通对象无法迭代时我们可以自定义迭代对象，`for...of`会进入`[Symbol.iterator]()`的函数。

--------------------

### 生成器 ###

**什么是生成器？**

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

**创建生成器**

生成器函数使用 `function*`语法，`async`和`*`不能同时存在。

function* test() { 
        console.log('第1次执行')
        yield 1;
        console.log('第2次执行')
        yield 2;
        console.log('第3次执行')
        yield 3;
        return 4;
    }
    const generator = test();
    console.log(generator.next())
    console.log(generator.next())
    console.log(generator.next())
    console.log(generator.next())
    
    // 第1次执行
    // {value: 1, done: false}
    // 第2次执行
    // {value: 2, done: false}
    // 第3次执行
    // {value: 3, done: false}
    // {value: 4, done: true}

在函数内部是调用别的生成器，一定要加上`*`号

function* fun1() { 
         yield "a";
         yield "b";
     }
     function* fun2() { 
         yield* fun1();
         yield 1;
         yield 2;
         yield 3;
     }
     const generator = fun2();
     
    // generator.next()
    // {value: "a", done: false}
    // generator.next()
    // {value: "b", done: false}
    // generator.next()
    // {value: 1, done: false}
    // generator.next()
    // {value: 2, done: false}
    // generator.next()
    // {value: 3, done: false}
    // generator.next()
    // {value: undefined, done: true}