ES6——Generator函数

最新推荐文章于 2025-11-05 08:51:40 发布
原创 最新推荐文章于 2025-11-05 08:51:40 发布 · 258 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
ES6

当前文章被收录于：

ES6
16 篇文章 1 人学习
订阅专栏 查看详情
本文深入探讨了ES6中的Generator函数，包括next方法的使用、for...of循环、异步读取、throw方法处理异常、return方法手动结束遍历、Generator的嵌套以及this的相关特性。还介绍了如何通过Thunk转换多参数为单参数，以便更好地理解和应用Generator函数。

文章目录


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

Generator 函数就是遍历器生成函数

function* 名称
体内 yield 表达式（状态等待执行 并返回）

一、next（）方法

1.next不带参

    function* fun(){
        yield 1+1;
        yield 2+2;
        yield 3+3;
        yield 4+4;
        return 10;   //替换最终的value:undefined
    }
    //执行该函数
    let f=fun(); //执行之后返回遍历器
    console.log(f.next()); //{value: 2, done: false}
    console.log(f.next()); //{value: 4, done: false}
    console.log(f.next()); //{value: 6, done: false}
    console.log(f.next()); //{value: 8, done: false}
    console.log(f.next()); //{value: 10, done: true} 
    //不加return，value:undefined

在这里插入图片描述

2.next带参

参数指的是上一次yeild表达式的返回值 (本身是undefined)

    //next遍历带参 参数指的是上一次yeild表达式的返回值(本身是undefined)
    function* method(){
        let x=yield 1+2;
        console.log(x);
        let y=yield 3+x;
        console.log(y);
        return y+10;
    }
    let met=method();
    console.log(met.next()); //{value: 3, done: false}
    console.log(met.next(3)); //3  {value: 6, done: false}
    console.log(met.next(8)); //8  {value: 18, done: true}

3.面试题

（1）yield表达式如果用在另一个表达式之中，必须放在圆括号里面

    function* fun(){
        let x=yield 5+(yield 1+2);
        return x;
    }
    let xf=fun();
    console.log(xf.next()); //{value: 3, done: false}
    console.log(xf.next()); //{value: NaN, done: false}  (5+undefined)
    console.log(xf.next()); //{value: undefined, done: true}

    console.log(xf.next()); //{value: 3, done: false}
    console.log(xf.next(10)); //{value: 15, done: false}  (5+10)
    console.log(xf.next(5)); //{value: 5, done: true}

（2）Generator函数执行 返回遍历器 函数体并没有执行

    function* fm(){
        console.log("start");
        console.log(1,`${yield}`);
        console.log(2,`${yield}`);
        console.log("end");
    }
	let f=fm();  //无返回值
    f.next(); //start
    f.next(5); //1  '5'
    f.next(10); //2  '10'
    f.next(); //end

console.log(f.next()); //start  {value: undefined, done: false}
console.log(f.next('a')); //1 'a' {value: undefined, done: false}
console.log(f.next('b'));//2 'b' end  {value: undefined, done: true}

（3）

    function* fm(){
        console.log(1,`${yield}`);
        console.log(2,`${yield}`);
        console.log("end");
    }
	let f=fm();  //无返回值
    f.next(); //无返回值
    f.next(5); //1  '5'
    f.next(10); //2  '10'  end

console.log(f.next()); //	{value: undefined, done: false}
console.log(f.next('a')); //1 'a' {value: undefined, done: false}
console.log(f.next('b'));//2 'b' end  {value: undefined, done: true}

二、for…of循环

1.for…of

for…of循环可以自动遍历 Generator 函数运行时生成的Iterator对象，且此时不再需要调用next方法

    function* foo(){
        yield 1;
        yield 2;
        yield 3;
        yield 4;
        return 5;
    }
    for(let v of foo()){
        console.log(v);  //1 2 3 4
    }

一旦next方法的返回对象的done属性为true，for…of循环就会中止，且不包含该返回对象
所以上面代码的return语句返回的5，不包括在for…of循环之中

2.其他方法( … ，解构赋值 ，Array.from)

除了for…of循环以外，扩展运算符（…）、解构赋值和Array.from方法内部调用的，都是遍历器接口。
这意味着，它们都可以将 Generator 函数返回的 Iterator 对象，作为参数。

function* numbers () {
  yield 1
  yield 2
  return 3
  yield 4
}

// 扩展运算符
[...numbers()] // [1, 2]

// Array.from 方法
Array.from(numbers()) // [1, 2]

// 解构赋值
let [x, y] = numbers();
x // 1
y // 2

// for...of 循环
for (let n of numbers()) {
  console.log(n)
}
// 1
// 2

三、异步读取

    function* requCity(){
        let result=yield Ajax('get','./city.json',null, function (res) {
            console.log(aja.next(res)); //{value: Array(1), done: true}
        })
        let json=JSON.parse(result);
        return json;
    }
    let aja=requCity();
    aja.next();

city.json：

[
  {"id":"1","name":"陕西","child":[
    {"cid":"1-1","name":"西安"}
  ]}
]

在这里插入图片描述

四、throw() 抛出异常

Generator 函数返回的遍历器对象，都有一个throw方法，可以在函数体外抛出错误，然后在 Generator 函数体内捕获

(1)

var g = function* () {
  try {
    yield;
  } catch (e) {
    console.log('内部捕获', e);
  }
};

var i = g();
i.next();

try {
  i.throw('a');
  i.throw('b');
} catch (e) {
  console.log('外部捕获', e);
}
// 内部捕获 a
// 外部捕获 b

i第二次抛出错误，由于 Generator 函数内部的catch语句已经执行过了，不会再捕捉到这个错误了，所以被函数体外的catch语句捕获

(2)

    function* method(){
        try{
            yield 1+2;
            yield 2+3;
            yield 3+4;
        }
        catch(e){
            console.log(e.message);
        }
    }
    let m=method();
    console.log(m.next()); //{value: 3, done: false}
    m.throw(new Error("出错了")); //出错了

五、return() 手动结束遍历

返回给定的值，并且终结遍历 Generator 函数

（1）有参

function* gen() {
  yield 1;
  yield 2;
  yield 3;
}

var g = gen();

g.next()        // { value: 1, done: false }
g.return('foo') // { value: "foo", done: true }
g.next()        // { value: undefined, done: true }

（2）无参

function* gen() {
  yield 1;
  yield 2;
  yield 3;
}

var g = gen();

g.next() // { value: 1, done: false }
g.return() // { value: undefined, done: true }

六、Generator嵌套

    let a= function* () {
        yield 'a';
        yield 'b';
    }
    let b= function* () {
        yield 1;
        yield* a();
        yield 2;
    }
    let bf=b();
    console.log(bf.next()); //{value: 1, done: false}
    console.log(bf.next()); //{value: 'a', done: false}
    console.log(bf.next()); //{value: 'b', done: false}
    console.log(bf.next()); //{value: 2, done: false}
    console.log(bf.next()); //{value: undefined, done: true}

七、this

Generator 函数总是返回一个遍历器，ES6 规定这个遍历器是 Generator 函数的实例，也继承了 Generator 函数的prototype对象上的方法

（1）

function* g() {}

g.prototype.hello = function () {
  return 'hi!';
};

let obj = g();

obj instanceof g // true
obj.hello() // 'hi!'

Generator 函数g返回的遍历器obj，是g的实例，而且继承了g.prototype

但是，如果把g当作普通的构造函数，并不会生效，因为g返回的总是遍历器对象，而不是this对象。

function* g() {
  this.a = 11;
}

let obj = g();
obj.next();
obj.a // undefined

（2）Generator 函数也不能跟new命令一起用，会报错

function* F() {
  yield this.x = 2;
  yield this.y = 3;
}

new F()
// TypeError: F is not a constructor

（3）让 Generator 函数返回一个正常的对象实例，既可以用next方法，又可以获得正常的this

首先，生成一个空对象，使用call方法绑定 Generator 函数内部的this。这样，构造函数调用以后，这个空对象就是 Generator 函数的实例对象了。

function* F() {
  this.a = 1;
  yield this.b = 2;
  yield this.c = 3;
}
var obj = {};
var f = F.call(obj);

f.next();  // Object {value: 2, done: false}
f.next();  // Object {value: 3, done: false}
f.next();  // Object {value: undefined, done: true}

obj.a // 1
obj.b // 2
obj.c // 3

八、Thunk 多参转单参

在这里插入图片描述

标签
#es6
如何用matlab扫频法测考虑频率耦合的并网逆变器的序阻抗，如何实现？
最新发布
**My Coding Family**
11-11 1143
🏆本文收录于 《全栈Bug调优(实战版)》 专栏，该专栏专注于分享我在真实项目开发中遇到的各类疑难Bug及其深层成因，并系统提供高效、可复现的解决思路和实操方案。无论你是刚入行的新手开发者，还是拥有多年项目经验的资深工程师，本专栏都将为你提供一条系统化、高质量的问题排查与优化路径，助力你加速成长，攻克技术壁垒，迈向技术价值最大化与职业发展的更高峰🚀！
视觉Transformer实战 | Vision Transformer（ViT）详解与实现
热门推荐
盼小辉丶的博客
11-05 3万+
在计算机视觉领域，卷积神经网络 (CNN) 长期以来一直是处理图像任务的主流架构。然而，随着 Transformer 在自然语言处理领域的巨大成功，研究人员开始探索将这种基于自注意力机制的架构应用于视觉任务。Vision Transformer (ViT) 是这一探索的重要里程碑，它首次证明了纯 Transformer 架构在图像分类任务上可以超越最先进的 CNN 模型。本文将详细介绍 ViT 的技术原理，并使用 PyTorch 从零开始构建 ViT 模型用于图像分类任务。
ES6深入—ES6 Generator 函数
weixin_44009656的博客
05-30 1862
本文介绍了 ES6 Generator 函数的概念和使用。以通过 yield 关键字，把函数的执行流挂起，为改变执行流程提供了可能，从而为异步编程提供解决方案。
粗饲料粉碎机的设计.zip机械设计毕业设计
粗饲料粉碎机的设计.zip机械设计毕业设计
ES6基础——Generator函数详解
二阶求导的博客
04-07 1199
Generator函数和Promise对象联合使用的话会极大降低异步编程的编写难度和阅读难度。 Generator写法的不同：1）* 2）函数内部使用yield语句，定义不同的内部状态 function* g() { yield 'a'; yield 'b'; return 'ending'; } var gen = g(); gen.next(); //只有 1行 next()，返回的是 {value:'a', done:false} gen.next();...
ES6之Generator 函数
low666的博客
03-25 616
15 Generator 函数 15.1 简介 15.1.1 基本概念 Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。本章详细介绍 Generator 函数的语法和 API ，它的异步编程应用请 看《异步操作》一章。 Generator 函数有多种理解角度。从语法上，首先可以把它理解成， Generator 函数是一个状态机，封装了多个内部状态。...
ES6
kingov
05-09 394
1 数组新特性1.1 浅拷贝…var arr1 = [1,2,3,{name:'tom'}]; var arr2 = [...arr1] ; //这里属于浅拷贝arr1[0] =4 ; arr1[3].age = 18 ;console.log(arr1); //[ 4, 2, 3, { name: 'tom', age: 18 } ] console.log(arr2); //[ 1, 2,
[ES6] Generator 函数
前端
04-20 830
ES6 新引入了 Generator 函数，可以通过 yield 关键字，把函数的执行流挂起，为改变执行流程提供了可能，从而为异步编程提供解决方案常用于异步编程的还包括 promise 对象的应用，与 async/await 指令。
【ES6】Generator函数详解
十一月廿七风雨大作
01-16 7083
【ES6】Generator函数详解一、Generator函数简介基本概念函数写法yield关键字介绍二、next方法的参数三、for...of循环四、关于普通throw()与Generator的throw()五、Generator函数的应用【很重要】1、延迟函数2、简化函数的flag（Generator与状态机）3、异步操作的同步化表达4、函数的自动化控制【心生佩服】 引言：从Generato...
对ES6Generator函数的理解
王宜明的个人博客
07-18 1023
对ES6Generator函数的理解什么是Generator函数 Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。   简单说Generator函数是ES6新推出的一种语法,其目的是为了给JS的异步式编程提供一种更好的解决方案.在传统的回调函数异步式编程中,存在的一个最大的问题就是,如果要进行大量的异步式操作时,那么其代码将会一个嵌套者一个
ES6：Generator函数详解
DZQ1223的博客
07-29 1403
从另一个角度看，也可以说 Generator 生成了一系列的值，这也就是其名称的来历(在英语中generator”这个词是“生成器”的意思)。上面的代码中，函数 f 如果是普通函数，在为变量 generator 赋值时就会执行。方法时，内部的指针就会从函数的头部或上一次停下来的地方开始执行，直到遇到下一个。方法等于该对象的遍历器对象生成函数，调用该函数会返回该对象的一个遍历器对象。函数运行的不同阶段从外部向内部注入不同的值，从而调整函数行为。上面的代码已经把回调函数改成了直线执行的形式，但是加入了大量。
ES6 Generator 函数
qq_41466440的博客
12-05 255
Generator函数
es6之generator函数
qq_44929535的博客
11-03 826
generator函数 传统的编程语言早已有异步编程的解决方案，其中有一种叫做“协程”，意思就是多个线程相互协作，完成异步操作。 generator函数是协程在es6中的实现，最大的特点就是可以交出函数的执行权（即暂停执行）。generator函数可以暂停执行和恢复执行，这是他能封装异步任务的根本原因。除此之外，它还有两个特性使它可作为异步编程的完整解决方案：函数体内外的数据交换和错误处理机制。 结合ajax使用： try { r1 = yield ajax('http://url-1', data
es6中的generator函数详解
2401_89308368的博客
12-20 1026
但是，调用Generator函数后，函数并不执行，返回的也不是函数执行后的结果，而是一个指向内部状态的指针对象。下一步，必须调用遍历器对象的next方法，使得指针移向下一个状态。即：每次调用next方法，内部指针就从函数头部或上一次停下来的地方开始执行，直到遇到下一个yield表达式（或return语句）为止。Generator 函数是分段执行的，yield表达式是暂停执行的标记，而next方法可以恢复执行。function* gen(x){//一个 Generator 函数return y;
ES6 之 generator 函数
10-26 231
Generator 函数是 ES6 提供的一种异步编程解决方案。（解决异步，深度嵌套的问题）语法行为与传统函数完全不同。 · · 异步：不连续，上一个操作没有执行完 下一个操作照样开始 同步：连续执行，上一个操作没有执行完 下一个没法开始 generator函数语法： function * show() { yield 'welcome' yield 'to' ...
Es6 Generator函数
Jiang112323的博客
02-24 193
/* 一、generator函数的定义 1.Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同 2.形式上，Generator 函数是一个普通函数，但是有两个特征。一是，function关键字与函数名之间有一个星号；二是，函数体内部使用yield表达式，定义不同的内部状态 ...
ES6 Generator 函数
小葵坤_易安的博客
07-30 266
一、什么是Generator 函数 例1：先看下面的Generator函数: function* hGenerator() { console.log("this is generator"); } 该函数与普通函数的区别是在定义时有个*，执行该函数： function* hGenerator() { console.log("this is generator"); } hello...
ES6-Generator函数和async函数
dreamingbaobei的博客
11-14 499
ES6中引入的一种新的函数类型，叫做generator生成器函数，它的特点是能够通过yield表达式中断函数的执行。 在普通的函数通过return指定返回值，如果函数被调用，会一直不间断的执行到return终止，如果没有显示return语句，会默认添加到函数的末尾。 生成器函数如何定义 function* f() {} 普通函数和生成器函数的区别： 普通函数和生成器函数的构造函数分别是Func...
ES6——19. Generator 函数的语法
chtazycdf的博客
03-29 1172
1、简介 基本概念 Generator 函数是 ES6 提供的一种异步编程解决方案 Generator 函数有多种理解角度。语法上，首先可以把它理解成，Generator 函数是一个状态机，封装了多个内部状态。 执行 Generator 函数会返回一个遍历器对象，也就是说，Generator 函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。 形式上，Generator 函数是一个普通函数，但是有两个特征。一是，function关键字与函数
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

致可乐

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值