ES6基础知识(Generator 函数应用)

1.Ajax 是典型的异步操作,通过 Generator 函数部署 Ajax 操作,可以用同步的方式表达

function* main() {
  var result = yield request("http://some.url");
  var resp = JSON.parse(result);
    console.log(resp.value);
}

function request(url) {
  makeAjaxCall(url, function(response){
    it.next(response);
  });
}

var it = main();
it.next();

上面代码的main函数,就是通过 Ajax 操作获取数据。可以看到,除了多了一个yield,它几乎与同步操作的写法完全一样。注意,makeAjaxCall函数中的next方法,必须加上response参数,因为yield表达式,本身是没有值的,总是等于undefined

2.Generator 函数的一个重要实际意义就是用来处理异步操作,改写回调函数

function* loadUI() {
  showLoadingScreen();
  yield loadUIDataAsynchronously();
  hideLoadingScreen();
}
var loader = loadUI();
// 加载UI
loader.next()

// 卸载UI
loader.next()

上面代码中,第一次调用loadUI函数时,该函数不会执行,仅返回一个遍历器。下一次对该遍历器调用next方法,则会显示Loading界面(showLoadingScreen),并且异步加载数据(loadUIDataAsynchronously)。等到数据加载完成,再一次使用next方法,则会隐藏Loading界面。可以看到,这种写法的好处是所有Loading界面的逻辑,都被封装在一个函数,按部就班非常清晰。

3.利用 Generator 函数,可以在任意对象上部署 Iterator 接口

function* iterEntries(obj) {
  let keys = Object.keys(obj);
  for (let i=0; i < keys.length; i++) {
    let key = keys[i];
    yield [key, obj[key]];
  }
}

let myObj = { foo: 3, bar: 7 };

for (let [key, value] of iterEntries(myObj)) {
  console.log(key, value);
}

// foo 3
// bar 7

原文地址:https://www.cnblogs.com/xingxingclassroom/p/10464306.html

时间: 2024-10-30 16:14:59

ES6基础知识(Generator 函数应用)的相关文章

ES6基础知识(async 函数)

1.async 函数是什么?一句话,它就是 Generator 函数的语法糖. const fs = require('fs'); const readFile = function (fileName) { return new Promise(function (resolve, reject) { fs.readFile(fileName, function(error, data) { if (error) return reject(error); resolve(data); });

es6基础知识

1.超引用:(...) 用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中 function fun(...args){ console.log(args); //[1,2,3,4,5,6] args.push(7); console.log(args); //[1,2,3,4,5,6,7] }fun(1,2,3,4,5,6) 2.解构赋值: 赋值: var a = 10,b = 20,c = 30; console.log(a,b,c) //10 20 30 解构: //数组的格式 var

es6 中的generator函数控制流程

Generator函数跟普通函数的写法有非常大的区别: 一是,function关键字与函数名之间有一个星号: 二是,函数体内部使用yield语句,定义不同的内部状态(yield在英语里的意思就是"产出"). 最简单的Generator函数如下: function* g() { yield 'a'; yield 'b'; yield 'c'; return 'ending'; } g(); // 返回一个对象 g函数呢,有四个阶段,分别是'a','b','c','ending'. Gen

ES6基础知识(Reflect)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

ES6 基础知识-----简记 let const

ES5中只有函数作用域和全局作用域,声明变量使用var,在es6中添加声明变量 let const let 声明块级作用域变量, let 不存在变量提升 var命令会发生"变量提升"现象,即变量可以在声明之前使用,值为undefined.这种现象多多少少是有些奇怪的,按照一般的逻辑,变量应该在声明语句之后才可以使用. 为了纠正这种现象,let命令改变了语法行为,它所声明的变量一定要在声明后使用,否则报错. var 声明的变量可以在声明之前使用,是undifind,存在变量提升现象,le

深入理解python(四)python基础知识之函数

函数部分 函数部分大概想分成两个部分来讲,第一部分是关于对函数参数的介绍,第二部分是局部变量全局变量和内置变量也就是变量作用域的LGB原则 函数的参数 1.关于形参和实参的问题 第一点要注意的是python中形参和实参的问题. 以不可变对象为参数,不会修改不可变对象的值(形参和实参的原因) 但对于可变对象(例如列表字典等),会在原地修改对象的值 例: >>> def immutableob(a):#在函数中修改不可变对象的值 ... a+=1 >>> b=1 >&

Python基础知识之函数、模块

1.Python模块. Python一个.py后缀的文件,称为模块.Python模块可以包含变量.函数.类,同时类中又可以定义变量和函数. 2.Python模块导入. (1) Python模块全部导入方式:from 模块名 import * (2) Python模块按需导入方式:from 模块名 import 函数名/类名 3.函数.常用函数如下. str(o):将数字转化为字符串函数, int(o):将字符串转化为数字函数. format():字符串格式化函数. replace:字符串替换函数

php基础知识【函数】(8)xml和变量函数

 一.XML函数 参数类型 data    --string,需要解析的数据集. parser  --resource,一个指向要取得字节索引的 XML 解析器的引用.  1.创建和释放XMl解析器 xml_parser_create([string encoding]) --建立一个新的 XML 解析器并返回可被其它 XML 函数使用的资源句柄. xml_parser_free(parser) --释放指定的 XML 解析器 2.获取错误信息 xml_error_string (code) -

php基础知识【函数】(7)url和ob函数

一.URl函数 1.urlencode -- 编码 URL 字符串 2.urldecode -- 解码已编码的 URL 字符串 3.rawurlencode -- 按照 RFC 1738 对 URL 进行编码 4.rawurldecode -- 对已编码的 URL 字符串进行解码 5.base64_encode -- 使用 MIME base64 对数据进行编码 6.base64_decode -- 对使用 MIME base64 编码的数据进行解码 7.parse_url -- 解析 URL,