迭代器Iterator、生成器Generator详解

在讲Generator(生成器)之前,要先一起了解一下另外一个概念,迭代器

一、迭代器 Iterator

迭代器Iterator ES6 引入的一种新的遍历机制,同时也是一种特殊的对象,它具有一些专门为迭代过程设计的专有接口;

每一个迭代器对象 都有一个 next() 方法,每次调用都会返回一个当前结果对象。

当前结果对象中有两个属性:

        1.value:  当前属性的值

        2.done:  用于判断是否遍历结束,当没有更多可返回的数据时,返回 true

        每调用一次 next() 方法,都会返回下一个可用的值,知道遍历结束。

二、生成器 Generator

生成器是一种返回迭代器的函数,通过 function 关键字后的( * )来表示,函数中会用到新的关键字 yield 。星号可以紧挨着 function 关键字,也可以在中间添加一个空格。

function* generator(){
    const list = [1,2,3];
    for(let i of list){
        yield i
    }
}

let g = generator();

console.log(g.next()); // {value: 1, done: false}
console.log(g.next()); // {value: 1, done: false}
console.log(g.next()); // {value: 1, done: false}
console.log(g.next()); // {value: 1, done: true}

 三、特性

1. 每当执行完一条 yield 语句后函数就会自动停止运行,直到再次调用 next();

2. yield 关键字只可在生成器(Generator)内部使用,在其他地方使用会导致程序抛出错误;

3. 可以用函数表达式来创建生成器,但是不能使用箭头函数

比较常用的地方是在 stream 数据流处理的时候,会用到迭代器!

迭代器Iterator、生成器Generator详解_第1张图片

迭代器Iterator、生成器Generator详解_第2张图片 

迭代器Iterator、生成器Generator详解_第3张图片 

迭代器Iterator、生成器Generator详解_第4张图片 

 

你可能感兴趣的:(javascript,vue.js)