es6基础0x016：生成器函数

ghnor 发布于2019-08-23 13:11 / 3018人阅读

摘要：概述其实前几章我都不知道怎么写，因为他们总是涉及到一些比较深的东西，比如可迭代对象生成器迭代器之类的东西，等写完这个系列，再好好整理一下这些东西可能会好一点，现在整理到哪儿就写到哪儿吧语法使用作为声明标识符，表示这是一个生成器函数是函数名是

0x000 概述

其实前几章我都不知道怎么写，因为他们总是涉及到一些比较深的东西，比如可迭代对象、生成器、迭代器之类的东西，等写完这个系列，再好好整理一下这些东西可能会好一点，现在整理到哪儿就写到哪儿吧

0x001 语法

function* name([param[, param[, ... param]]])
{ 
    statements 
}

使用function*作为声明标识符，表示这是一个生成器函数

name是函数名

param是参数名，可以255个

statements是函数体

0x002 特点

生成器函数在执行的时候是可以暂停的，需要的时候再继续执行

生成器函数返回的是一个迭代器对象，不会立即执行

生成器函数可以使用return，但是return之后将不可再迭代

0x003 栗子-无限id增长器

function* idMaker(begin=0){
  while(true)
    yield begin++;
}
let maker=idMaker(0)
console.log(maker.next().value) // 0
console.log(maker.next().value) // 1
console.log(maker.next().value) // 2
console.log(maker.next().value) // 3
...

说明：
调用生成器函数返回的是一个迭代器，迭代器是一个满足迭代器协议的对象，简单的说，迭代器对象有一定有一个next函数，该函数返回一个对象，我们称之为迭代结果对象，该对象包含以下两个属性：

value：本次迭代的结果

done:布尔值，如果为true，表示无法再继续迭代，如果为false，表示可以继续迭代。

调用next函数，将会让生成器函数真正的执行，一直执行，直到遇见yield，并返回迭代结果对象

0x004 栗子-有限id增长器

function* idMaker(begin=0){
  while(begin<3)
    yield begin++;
}
let maker=idMaker(0)
console.log(maker.next()) // {value: 0, done: false}
console.log(maker.next()) // {value: 1, done: false}
console.log(maker.next()) // {value: 2, done: false}
console.log(maker.next()) // {value: undefined, done: true}

如果函数执行完成了，那么done就自动变成true

0x005 next接收参数

function *createIterator() {
    let first = yield 1;
    let second = yield first + 2; // 4 + 2 
                                  // first =4 是next(4)将参数赋给上一条的
    yield second + 3;             // 5 + 3
}

let iterator = createIterator();

console.log(iterator.next());    // "{ value: 1, done: false }"
console.log(iterator.next(4));   // "{ value: 6, done: false }"
console.log(iterator.next(5));   // "{ value: 8, done: false }"
console.log(iterator.next());    // "{ value: undefined, done: true }"

这个解释起来挺麻烦，第一次调用iterator.next()，返回1，代码停在了yield 1，但是我们将yield 1的结果保存在了first变量中，其实这个操作是没有发生的，当我们第二次执行iterator.next(4)，注意这里传递了一个参数4，此时会把4当做yield 1的返回值，赋值给first，所以第二次执行可以看做是let first=4的这么一个执行顺序。

0x006 return

function* yieldAndReturn() {
  yield "1";
  return "2";
  yield "3"; 
}
var gen = yieldAndReturn()
console.log(gen.next()); // { value: "1", done: false }
console.log(gen.next()); // { value: "2", done: true }
console.log(gen.next()); // { value: undefined, done: true }

云服务器 GPU云服务器基础函数 java快速生成函数 php生成文件的函数 ES6

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99280.html

React入门0x016: 访问Dom

摘要：概述不到必要不要在中访问，尝试使用的思想去解决问题。当然，必要的时候还是可以的，比如某些依赖的组件时机在中，并不是任何时候都可以访问的，需要讲究时机。 0x000 概述不到必要不要在React中访问Dom，尝试使用React的思想去解决问题。当然，必要的时候还是可以的，比如某些依赖Dom的组件 0x001 时机在React中，并不是任何时候都可以访问Dom的，需要讲究时机。因为Re...

NeverSayNever 2019-08-23 13:50 评论0 收藏0
JavaScript基础: 类与继承

摘要：类的方法相当于之前我们定义在构造函数的原型上。的构造函数中调用其目的就是调用父类的构造函数。是先创建子类的实例，然后在子类实例的基础上创建父类的属性。前言　　首先欢迎大家关注我的Github博客，也算是对我的一点鼓励，毕竟写东西没法获得变现，能坚持下去也是靠的是自己的热情和大家的鼓励。　　　　许久已经没有写东西了，因为杂七杂八的原因最近一直没有抽出时间来把写作坚持下来，感觉和跑步一...

liuchengxu 2019-08-22 15:42 评论0 收藏0
【JS基础】ES6语法

摘要：遍历器对象调用方法后，抛出的异常被函数体捕获以后，会附带执行下一条语句。 iterator迭代器在ES6之前遍历数组的方法有以下四种： // 第一种 for(var i = 0; i < array.length; i++){ console.log(array[i]) } // 第二种 array.forEach(function(item,index){ cons...

Maxiye 2019-08-22 15:15 评论0 收藏0
webpack组织模块的原理 - 基础篇

摘要：每一个模块的源代码都会被组织在一个立即执行的函数里。接下来看的生成代码可以看到，的源代码中关于引入的模块的部分做了修改，因为无论是，或是风格的，都无法被解释器直接执行，它需要依赖模块管理系统，把这些抽象的关键词具体化。现在前端用Webpack打包JS和其它文件已经是主流了，加上Node的流行，使得前端的工程方式和后端越来越像。所有的东西都模块化，最后统一编译。Webpack因为版本的...

leiyi 2019-08-22 15:12 评论0 收藏0