JavaScript前端迭代器Iterator与生成器Generator讲解

本篇文章给大家带来了关于javascript的相关知识，其中主要为大家介绍了javascript前端迭代器iterator与生成器generator讲解，有需要的朋友可以借鉴参考下，希望能够有所帮助。

【相关推荐：javascript视频教程、web前端】

Iterator 概念

Iterator 提供了一种统一的接口机制，为各种不同数据结构提供统一的访问机制。

定义 Iterator 就是提供一个具有 next() 方法的对象，每次调用 next() 都会返回一个结果对象，该结果对象有两个属性，value 表示当前的值，done 表示遍历是否结束。

立即学习“Java免费学习笔记（深入）”；

function makeIterator(Array){    let index = 0;    return {        next: function(){            return (                Array.length > index ?                {value: Array[index++]}:                {done: true}            )        }    }}let iterator = makeIterator(['1','2'])console.log(iterator.next()); // {value: '1'}console.log(iterator.next()); // {value: '2'}console.log(iterator.next()); // {done: true}

Iterator 的作用：

为各种数据结构，提供一个统一的、简便的访问接口；使得数据结构的成员能够按某种次序排列；供 for…of 消费

默认 Iterator 接口

ES6 提供了 for of 语句遍历迭代器对象，我们将上述创建的迭代器使用 for of 语句遍历一下：

let iterator = makeIterator(['1','2'])for (let value of iterator) {    console.log(value);} // iterator is not iterable

结果报错说 iterator is not iterable，这是为什么呢？ ES6 规定默认的 Iterator 接口部署在数据结构的 Symbol.iterator 属性中，如果一个数据结构存在 Symbol.iterator 属性，则该数据结构可遍历。

我们将自定义的 makeIterator 改造如下：

const MakeIterator = (Array) => ({    [Symbol.iterator](){        let index = 0;        return {            next(){                let length = Array.length;                if(index < length){                    return {value: Array[index++]}                }else{                    return {done: true}                }            }        }    }})for(let value of MakeIterator([1,2])){    console.log(value)}// 1// 2

Iterator 的 return()

我们为 MakeIterator 添加 return 方法，如果 for…of 循环提前退出（通常是因为出错，或者有 break 语句），就会调用 return() 方法，终止遍历。

基于这一特性，如果一个对象在完成遍历前，需要清理或释放资源，我们可以部署 return() 方法，列入文件读取失败时关闭文件。

const MakeIterator = (Array) => ({    [Symbol.iterator](){        let index = 0;        return {            next(){                let length = Array.length;                if(index < length){                    return {value: Array[index++]}                }else{                    return {done: true}                }            },            return(){                return {done: true}            }        }    }})for(let value of MakeIterator([1, 2, 3])){    console.log(value) // 1    // 方式1    break;    // 方式2    // throw new Error('error');}

原生具备 Iterator 接口的数据结构

数组SetMap类数组对象，如 arguments 对象、DOM NodeList 对象、typedArray 对象

// arguments 对象function sum(){    for(let value of arguments){        console.log(value)    }}sum(1,2)// 1// 2// typedArray 对象let typeArry = new Int8Array(2);typeArry[0] = 1;typeArry[1] = 2;for(let value of typeArry){    console.log(value) }// 1// 2

Generator 对象

function* gen(){    yield 1;    yield 2;}for(let value of gen()){    console.log(value)}

String

Q: 为什么 Object 不具有原生 Iterator ？

A: 对象（Object）之所以没有默认部署 Iterator 接口，是因为对象的哪个属性先遍历，哪个属性后遍历是不确定的。

本质上，遍历器是一种线性处理，对于任何非线性的数据结构，部署遍历器接口，就等于部署一种线性转换。

不过，严格地说，对象部署遍历器接口并不是很必要，因为这时对象实际上被当作 Map 结构使用，ES5 没有 Map 结构，而 ES6 原生提供了。

调用 Iterator 接口的场合

解构赋值

let set = new Set().add('a').add('b').add('c');let [x,y] = set; // x='a'; y='b'

扩展运算符

var str = 'hello';[...str] //  ['h','e','l','l','o']

扩展运算符是调用 Iterator 接口，那么 Object 没有部署 Iterator 接口，为什么也能使用 … 运算符呢？

原因：扩展运算符分为两种

一种是用在函数参数、数组展开的场合，这种情况要求对象是可迭代的（iterable）另一种是用于对象展开，也就是 {…obj} 形式，这种情况需要对象是可枚举的（enumerable）

let obj1 = {    name: 'qianxun'} let obj2 = {    age: 3}// 数组对象是可枚举的let obj = {...obj1, ...obj2}console.log(obj) //{name: 'qianxun', age: 3}// 普通对象默认是不可迭代的let obj = [...obj1, ...obj2]console.log(obj) // object is not iterable

模拟实现 for of

function forOf(obj, cb){    let iteratorValue = obj[Symbol.iterator]();    let result = iteratorValue.next()    while(!result.done){        cb(result.value)        result = iteratorValue.next()    }}forOf([1,2,3], (value)=>{    console.log(value)})// 1// 2// 3

Generator

认识 Generator

概念上

Generator 函数是 ES6 提供的一种异步编程解决方案。Generator 函数是一个状态机，封装了多个内部状态；

uBrand Logo生成器

uBrand Logo生成器是一款强大的AI智能LOGO设计工具。

57 查看详情

Generator 函数还是一个遍历器对象生成函数，执行后返回一个遍历器对象。

形式上

1.function 关键字与函数名之间有一个星号；

2.函数体内部使用 yield 表达式，定义不同的内部状态。

function* simpleGenerator(){    yield 1;    yield 2;}simpleGenerator()

如上我们创建了一个简单的 Generator，我们带着两个问题进行探究：

Generator 函数运行后会发生什么？函数中的 yield 表达式有什么作用？

function* simpleGenerator(){    console.log('hello world');    yield 1;    yield 2;}let generator = simpleGenerator(); // simpleGenerator {<suspended}}console.log(generator.next())// hello world// {value: 1, done: false}console.log(generator.next())// {value: 2, done: false}

Generator 生成器函数运行后返回一个生成器对象，而普通函数会直接执行函数内部的代码；每次调用生成器对象的 next 方法会执行函数到下一次 yield 关键字停止执行，并且返回一个 {value: Value, done: Boolean} 的对象。

next 方法的参数

yield 表达式本身没有返回值，或者说总是返回 undefined。next 方法可以带一个参数，该参数就会被当作上一个 yield 表达式的返回值。通过 next 方法的参数，可以在 Generator 函数运行的不同阶段，从外部向内部注入不同的值，从而调整函数行为。 由于 next 方法的参数表示上一个 yield 表达式的返回值，所以在第一次使用 next 方法时，传递参数是无效的。

function sum(x){    return function(y){        return x + y;    }}console.log(sum(1)(2))// 利用next传参改写function* sum(x){    let y = yield x;    while(true){       y = yield x + y;    }}let gen = sum(2)console.log(gen.next()) // 2console.log(gen.next(1)) // 3console.log(gen.next(2))  // 4

yield 表达式

yield 表达式的作用：定义内部状态和暂停执行 yield 表达式 与 return 语句的区别

yield 表达式表示函数暂停执行，下一次再从该位置继续向后执行，而 return 语句不具备位置记忆的功能一个函数里，只能执行一个 return 语句，但是可以执行多个 yield 表达式任何函数都可以使用 return 语句，yield 表达式只能用在 Generator 函数里面，用在其他地方都会报错yield 表达式如果参与运算放在圆括号里面；用作函数参数或放在赋值表达式的右边，可以不加括号

function *gen () {  console.log('hello' + yield) ×  console.log('hello' + (yield)) √  console.log('hello' + yield 1) ×  console.log('hello' + (yield 1)) √  foo(yield 1)  √  const param = yield 2  √}

基于 Generator 生成器函数中可以支持多个 yield，我们可以实现一个函数有多个返回值的场景：

function* gen(num1, num2){    yield num1 + num2;    yield num1 - num2;}let res = gen(2, 1);console.log(res.next()) // {value: 3, done: false}console.log(res.next()) // {value: 1, done: false}

Generator 与 Iterator 之间的关系

由于 Generator 函数就是遍历器生成函数，因此可以把 Generator 赋值给对象的 Symbol.iterator 属性，从而使得该对象具有 Iterator 接口。Generator 实现方式代码更加简洁。

let obj = {    name: 'qianxun',    age: 3,    [Symbol.iterator]: function(){        let that = this;        let keys = Object.keys(that)        let index = 0;        return {            next: function(){                return index < keys.length ?                {value: that[keys[index++]], done: false}:                {value: undefined, done: true}            }        }    }}for(let value of obj){    console.log(value)}

Generator:

let obj = {    name: 'qianxun',    age: 3,    [Symbol.iterator]: function* (){        let keys = Object.keys(this)        for(let i=0; i< keys.length; i++){            yield this[keys[i]];        }    }}for(let value of obj){    console.log(value)}

Generator.prototype.return()

return()方法，可以返回给定的值，并且终结遍历 Generator 函数。

function* gen() {  yield 1;  yield 2;  yield 3;}var g = gen();g.next()        // { value: 1, done: false }// 如果 return() 方法调用时，不提供参数，则返回值的 value 属性为 undefinedg.return('foo') // { value: "foo", done: true }g.next()        // { value: undefined, done: true }

如果 Generator 函数内部有 try...finally 代码块，且正在执行 try 代码块，那么 return() 方法会导致立刻进入 finally 代码块，执行完以后，整个函数才会结束。

function* numbers () {  yield 1;  try {    yield 2;    yield 3;  } finally {    yield 4;    yield 5;  }  yield 6;}var g = numbers();g.next() // { value: 1, done: false }g.next() // { value: 2, done: false }g.return(7) // { value: 4, done: false }g.next() // { value: 5, done: false }g.next() // { value: 7, done: true }

yield* 表达式

如果想在 Generator 函数内部，调用另一个 Generator 函数。我们需要在前者的函数体内部，自己手动完成遍历，如果函数调用多层嵌套会导致写法繁琐不易阅读，ES6 提供了 yield* 表达式作为解决方法。

委托给其他生成器

function* g1() {  yield 2;  yield 3;}function* g2() {  yield 1;  yield* g1();  yield 4;}const iterator = g2();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: 4, done: false }console.log(iterator.next()); // { value: undefined, done: true }

委托给其他可迭代对象

function* gen(){    yield* [1,2,3]}console.log(gen().next()) // {value: 1, done: false}

Generator 函数的 this

Generator 函数返回一个遍历器，ES6 规定这个遍历器是 Generator 函数的实例，继承了 Generator.prototype 对象上的方法，但无法获取 this 上的属性，因为这时 this 是全局对象，而不是实例对象。

function* gen(){    this.a = 1}gen.prototype.say = function(){    console.log('hi')}let obj = gen()console.log(obj instanceof gen) // trueobj.say() // hiobj.next()console.log(obj.a) //undefined

如果想像构造函数一样访问实例属性，可以修改 this 绑定到 Generator.prototype 上。

function* gen(){    this.a = 1}gen.prototype.say = function(){    console.log('hi')}   let obj = gen.call(gen.prototype)console.log(obj instanceof gen) // trueobj.say() // hiobj.next()console.log(obj.a) //1

Generator 实现一个状态机

function* StateMachine(state){    let transition;    while(true){        if(transition === "INCREMENT"){            state++;        }else if(transition === "DECREMENT"){            state--;        }        transition = yield state;    }}const iterator = StateMachine(0);console.log(iterator.next()); // 0console.log(iterator.next('INCREMENT')); // 1console.log(iterator.next('DECREMENT')); // 0

【相关推荐：javascript视频教程、web前端】

以上就是JavaScript前端迭代器Iterator与生成器Generator讲解的详细内容，更多请关注创想鸟其它相关文章！