javascript——generator理解

选中文字可对指定文章内容进行评论啦,绿色背景文字可以点击查看评论额。

最近在学习CK5的时候,遇到了一个函数:

function* _getAllUpcastDefinitions( definition ) {
	if ( definition.model.values ) {
		for ( const value of definition.model.values ) {
			const model = { key: definition.model.key, value };
			const view = definition.view[ value ];
			const upcastAlso = definition.upcastAlso ? definition.upcastAlso[ value ] : undefined;

			yield* _getUpcastDefinition( model, view, upcastAlso );
		}
	} else {
		yield* _getUpcastDefinition( definition.model, definition.view, definition.upcastAlso );
	}
}

在这个函数中,遇到了一个function* 以及一个 yield*。在网上搜索了一下,才知道这是一个generator的使用方法。所以记录一下generator的使用。

生成器

什么是生成器呢?生成器对象是由一个 generator function 返回的,并且它符合可迭代协议迭代器协议。

代码举例

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

const gen = generator(); // "Generator { }"

console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3

从这里可以看出,生成器是上面的gen,它是通过function* 调用生成的。这个对象调用next()方法可以依次像迭代一样返回值。

生成器实例方法

Generator.prototype.next()

返回一个由 yield表达式生成的值。

Generator.prototype.return()

返回给定的值并结束生成器。

Generator.prototype.throw()

向生成器抛出一个错误

 

生成器调用

function* anotherGenerator(i) {
  yield i + 1;
  yield i + 2;
  yield i + 3;
}

function* generator(i) {
  yield i;
  yield* anotherGenerator(i);
  yield i + 10;
}

var gen = generator(10);

console.log(gen.next().value); // 10
console.log(gen.next().value); // 11
console.log(gen.next().value); // 12
console.log(gen.next().value); // 13
console.log(gen.next().value); // 20

从上面的例子可以看出,我们可以定义多个生成器函数,并且在函数中调用其他的生成器函数,调用的方式就是

yield* 函数名称

这里只记录生成器的简单用法,它还有很多高级用法,以后再慢慢学习和分析。

版权声明:著作权归作者所有。

相关推荐

理解Java的数字溢出

Java各个数字类型所占的存储空间:整型byte:1字节,1*8bit,取值范围-128~127short:2字节,2*8bit,取值范围-32768~32767int:4字节,4*8bit,取值范围-2147483648~2147483647long:8字节,8*8bit,取值访问-2^64~2^64-1浮点型float:4字节,4*8bitdouble:8字节,8*8bitchar类型java

理解JavaScript普通函数以及箭头函数里使用的this

this普通函数的this普通函数的this是由动态作用域决定,它总指向于它的直接调用者。具体可以分为以下四项:this总是指向它的直接调用者, 例如 obj.func() ,那么func()里的this指的是obj。在默认情况(非严格模式,未使用 'use strict'),如果函数没有直接调用者,this为window在严格模式下,如果函数没有

纯JavaScript检测页面是否加载完成(理解JavaScript页面加载事件)

JavaScript与页面加载相关的事件先介绍JavaScript与页面加载相关的几个事件:document.readystatechangereadystatechage事件会监控document.readyState。readyState有三个值:loading:文档正在加载interactive:文档已加载完成且已被解析,但子资源(如image,css,iframe等)仍在加载。comple

理解React Native的Props和State

Props和State是React Native分别用来控制组件中两种不同类型的数据。Propsprops是Properties的简写,称为属性。props的特点是在组件内它是不可变,或者说不能被修改。在React数据流是单向的,从父组件到子组件的方向传递。props就是组件从父组件接收的数据,在组件内部是不能对它修改。props不可变的特性是有助于我们写可复用的组件。我们只需要对一个组

JavaScript使用CryptoJS加解密

CryptoJS只一个JavaScript的加解密的工具包。它支持多种的算法:MD5、SHA1、SHA2、SHA3、RIPEMD-160 哈希散列,进行 AES、DES、Rabbit、RC4、Triple DES 加解密。CryptoJS的安装1、使用npm安装npm install crypto-js2使用Bower安装bower install crypto-jsCryptoJS的使用Cryp

理解CKEditor5的schema

我们知道,CKEditor5是一个用MVC架构设计的富文本编辑器。如上图所示,三层分别是:Model,Controller, View首先,第一个问题是schema属于那一层?经过官方文档的初步学习,我们可以看到:editor.model.schema; // -> The model's schema.因此,我们可以得出结论:schema属于模型层:其次我们需

初步理解RxJs

         学习是一个由浅入深的过程,如果能够理解并掌握二八原则(帕累托法则),那么我们对知识的学习定会事半功倍,甚至事半多倍。对基础知识的理解决定了对知识理解的深度。RxJs定义        RxJS是ReactiveX在JavaScript上的一个派生。ReactiveX是一个应用比较广泛的响应式

RxJs——subject理解一

什么是subject首先我们来理解什么是subject,按照官方的定义:A Subject is a special type of Observable that allows values to be multicasted to many Observers.Subjects are like EventEmitters.从定义我们看出subject就是一种允许发送值到多个观察者的特殊类型的

RxJs——Subject理解二

上一节我们对subject有了初步理解,今天我们继续学习subjectReplaySubject介绍这个ReplaySubject之前,我们说下一种使用场景1、我们创建一个subject2、在应用的某个地方,我们向subject推送值,但此时没有订阅3、在某个时点,有第一个观察者开始订阅4、我们期望观察者能接收之前主题推送的值(可能是全部值或者时其中一个)5、实际上啥都没发生,因为主题不能存储记忆

CKEditor5——模型理解(二:Node)

上一节我们理解了基本的CK5的模型基本信息,今天我们来学习一些模型的API。节点说明首先,需要理解的就是模型的节点。在这一点上,CK5的模型节点和dom的节点有点类似,也有一些不同。我会在文章中一一介绍。节点是模型树的基本结构。它是模型中不同节点类型的一种抽象。这里需要指出的一点是:如果一个节点从模型树中分离出来,你可以使用它的 API 来操作它。但是,非常重要的是,已经附加到模型树的节点只能通过