Iterator与Generator

更新日期: 2022-08-18阅读: 820标签: Generator
以下文章来源于:袋鼠云数栈UED


Iterator

Iterator 概念

Iterator 提供了一种统一的接口机制,为各种不同数据结构提供统一的访问机制。定义 Iterator 就是提供一个具有 next() 方法的对象,每次调用 next() 都会返回一个结果对象,该结果对象有两个属性,value 表示当前的值,done 表示遍历是否结束。

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 接口的数据结构

数组
Set
Map
类数组对象,如 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 函数是一个状态机,封装了多个内部状
态;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()) // 2
console.log(gen.next(1)) // 3
console.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 属性为 undefined
g.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) // true
obj.say() // hi
obj.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) // true
obj.say() // hi
obj.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()); // 0
console.log(iterator.next('INCREMENT')); // 1
console.log(iterator.next('DECREMENT')); // 0

链接: https://www.fly63.com/article/detial/12020

JavaScript异步编程:Generator与Async

Generator与async function都是返回一个特定类型的对象:Generator: 一个类似{ value: XXX, done: true }这样结构的Object,Async: 始终返回一个Promise,使用await或者.then()来获取返回值

es6中生成器Generator的使用场景

由于Generator可以暂停函数执行,返回任意表达式的值,这使得 Generator有多种应用场景,这篇文章简单整理一些Generator的使用场景:异步操作的同步化表达、控制流管理、部署 Iterator 接口、作为数据结构

Generator函数

Generator 函数有多种理解角度。语法上,首先可以把它理解成,Generator 函数是一个状态机,封装了多个内部状态。执行 Generator 函数会返回一个遍历器对象,也就是说,Generator 函数除了状态机,还是一个遍历器对象生成函数。返回的遍历器对象,可以依次遍历 Generator 函数内部的每一个状态。

ES6 - Generator函数

Generator函数是ES6标准中提出的一种异步编程的解决方案。这种函数与普通函数最大的区别在于它可以暂停执行,又可以从暂停的位置恢复继续执行。从语法上看,Generator函数就是一个状态机,封装了许多内部状态。

es6 generator函数的异步编程

es6 generator函数,我们都知道asycn和await是generator函数的语法糖,那么genertaor怎么样才能实现asycn和await的功能呢?thunk函数 将函数替换成一个只接受回调函数作为参数的单参数函数

Generator函数的语法和应用

状态机,封装了多个内部状态;返回一个遍历器对象,通过改对象可以一次遍历Generator函数内部的每一个状态;带*号,yeild表达式定义不同的内部状态;调用 Generator 函数后,该函数并不执行,返回的也不是函数运行结果

Js Generators使用指南

最近,为了更好地理解Redux Sagas的工作原理,我重学了JavaScript generators的知识,我把从网上收集到的各种知识点浓缩到一篇文章里,我希望这篇文章既通俗易懂,又足够严谨,可以作为初学者的generators使用指南。

ES6 新特性之Generator

实际上Generator就是遍历器的一个生成器,我们可以用Generator来生成一个遍历器。Generator有两个明显的特点:第一个是function关键字与函数名之间有一个星号,一般而言是将两者写在一起的。第二个是在函数体内部有一个yield的关键字

如何实现Generator 执行器?

虽然现在使用 async 函数 就可以替代 Generator 执行器了,不过了解下 Generator 执行器的原理还是挺有必要的。如果你不了解 Generator,那么你需要看这里。

ES6深度解析:Generators

这是一只会说话的猫的一些代码,可能是当今互联网上最重要的一种应用。它看起来有点像一个函数,对吗?这被称为生成器-函数,它与函数有很多共同之处。但你马上就能看到两个不同之处。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!