首页 / JAVASCRIPT / ES6新特性：Javascript中Generator(生成器)

ES6新特性：Javascript中Generator(生成器)

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了ES6新特性：Javascript中Generator(生成器)，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7961字，纯文字阅读大概需要12分钟。

内容图文

　　ES6的很多特性都跟Generator扯上关系，而且实际用处比较广，包含了任何需要异步的模块，比如ajax， filesystem，或者数组对象遍历等都可以用到；

　　Generator的使用：

　　Generator函数和普通的函数区别有两个， 1：function和函数名之间有一个*号， 2：函数体内部使用了yield表达式；比如这样：

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

　　这个玩意儿如果运行的话，会返回一个Iterator实例，然后再执行Iterator实例的next()方法，那么这个函数才开始真正运行，并把yield后面的值包装成固定对象并返回，直到运行到函数结尾，最后再返回undefined；

            "
            use strict
            "
            ;
function* fibonacci() {
    yield1;
    yield2;
}

var it = fibonacci();
console.log(it);          // "Generator {  }"
console.log(it.next());   // 1
console.log(it.next());   // 2
console.log(it.next()); //undefined

技术分享

　　yield

　　Generator函数返回的Iterator运行的过程中，如果碰到了yield，就会把yield后面的值返回，此时函数相当于停止了，下次再执行next()方法的时候，函数又会从上次退出去的地方重新开始执行；

　　如果把yield和return一起使用的话，那么return的值也会作为最后的返回值，如果return语句后面还有yield，那么这些yield不生效：

function* gen() {
    yield0;
    yield1;
    return2;
    yield3;
};
let g = gen();
console.log(g.next(),g.next(),g.next(),g.next());
//输出：{ value: 0, done: false } { value: 1, done: false } { value: 2, done: true } { value: undefined, done: true }

　　我们也不能在非Generator函数中使用yield，比如：

<script>
var arr = [1, [[2, 3], 4], [5, 6]];
var flat = function* (a) {
    a.forEach(function (item) {
        if (typeof item !== ‘number‘) {
            yield* flat(item);
        } else {
            yield item;
        }
    })
};

for (var f of flat(arr)){
    console.log(f);
}
</script>

　　上面的demo因为callback是一个普通函数，所以编译的时候直接抛出错误提示，我们需要改成在Generator的函数体中：

<script>
var arr = [1, [[2, 3], 4], [5, 6]];
var flat = function* (a) {
    var length = a.length;
    for (var i = 0; i < length; i++) {
        var item = a[i];
        if (typeof item !== ‘number‘) {
            yield* flat(item);
        } else {
            yield item;
        }
    }
};
for (var f of flat(arr)) {
    console.log(f);
}
</script>

　　或者有个更奇怪的方法，我们把数组的forEach改成Generator函数：

<script>
var arr = [1, [[2, 3], 4], [5, 6]];
Array.prototype.forEach = function* (callback) {
    for(var i=0; i<this.length; i++) {
        yield* callback(this[i],i ,this[i]);
    }
}
var flat = function* (a) {
    yield* a.forEach(function* (item) {
        if (typeof item !== ‘number‘) {
            yield* flat(item);
        } else {
            yield item;
        }
    })
};

for (var f of flat(arr)){
    console.log(f);
}
</script>

　　而且Iterator的return的值不会被for...of循环到，也不会被扩展符遍历到，以下Demo的return 2 和yield 3完全不生效了，这个是要注意的；

function* gen() {
    yield0;
    yield1;
    return2;
    yield3;
};
let g = gen();
console.log([...g]); //输出：[ 0, 1 ]for(let foo of g) {
    console.log( foo ); //输出 0, 1
}

　　yield*

　　yield*这种语句让我们可以在Generator函数里面再套一个Generator，当然你要在一个Generator里面调用另外的Generator需要使用: yield* 函数() 这种语法，都是套路啊：

function* foo() {
    yield0;
    yield1;
}
function* bar() {
    yield‘x‘;
    yield* foo();
    yield‘y‘;
}
for (let v of bar()){
    console.log(v);
};

　　next()方法

　　Generator函数返回的Iterator执行next()方法以后，返回值的结构为：

            {
    value : 
            "
            value
            ", //value为返回的值
    done : false//done的值为一个布尔值， 如果Interator未遍历完毕， 他会返回false， 否则返回true；
}

　　所以我们可以模拟一个Generator生成器，利用闭包保存变量，每一次执行next()方法，都模拟生成一个{value:value,done:false}的键值对：

            function gen(array){
    
            var nextIndex = 0;
    return {
        next: function(){
            return nextIndex < array.length ?
            {value: array[nextIndex++], done: false} :
            {value: undefined, done: true};
        }
    };
};

var it = gen(["arr0", "arr1", "arr2", "arr3"]);
console.log( it.next() );
console.log( it.next() );
console.log( it.next() );
console.log( it.next() );
console.log( it.next() );

　　再浪一点的话，我们也可以模拟一个对象的Iterator，因为本身对象是没有Iterator的，我们为对象添加[Symbol.iterator]方法：

<script>
var itObj = {
    0:"00",
    1:"11",
    2:"22",
    3:"33",
    length : 4,
    [Symbol.iterator]() {
        const _this = this;
        let index = 0;
        return {
            next() {
                if(index< _this.length) {
                    return {
                        value : _this[index++],
                        done : false
                    }
                }else{
                    return {
                        value : undefined,
                        done : true
                    }
                }
            }
        }
    }
};
console.log([...itObj]);
</script>

View Code

　　next()方法的参数

　　如果给next方法传参数，那么这个参数将会作为上一次yield语句的返回值，这个特性在异步处理中是非常重要的，因为在执行异步代码以后，有时候需要上一个异步的结果，作为下次异步的参数，如此循环：：

<script>
function* foo(x) {
    var y = 2 * (yield (x + 1));
    var z = yield (y / 3);
    return (x + y + z);
}

var a = foo(5);
a.next() // Object{value:6, done:false}
a.next() // Object{value:NaN, done:false}
a.next() // Object{value:NaN, done:true}var b = foo(5);
b.next() // { value:6, done:false }
b.next(12) // { value:8, done:false }
b.next(13) // { value:42, done:true }
</script>

　　上面的demo看懂了， next()方法的参数怎么使用也就懂了；

　　throw方法()

　　如果执行Generator生成器的throw()方法，如果在Iterator执行到的yield语句写在try{}语句块中，那么这个错误会被内部的try{}catch(){}捕获：

            <script>
var g = function* () {
    try {
        yield;
    } catch (e) {
        console.log(‘内部捕获0‘, e);
    }
};

var i = g();
i.next(); //让代码执行到yield处；
try {
    i.throw(‘a‘);
} catch (e) {
    console.log(‘外部捕获‘, e);
}
</script>

　　如果Interator执行到的yield没有写在try{}语句块中，那么这个错误会被外部的try{}catch(){}语句块捕获；

<script>

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

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

try {
    i.throw(‘a‘);
    i.throw(‘b‘);
} catch (e) {
    console.log(‘外部捕获‘, e);
}
</script>

　　return()方法：

　　如果执行Iterator的return()方法，那么这个迭代器的返回会被强制设置为迭代完毕，执行return()方法的参数就是这个Iterator的返回值，此时done的状态也为true：

<script>
function* gen() {
    yield0;
    yield1;
    yield2;
    yield3;
};
let g = gen();
console.log(g.return("heheda")); //输出：{ value: ‘heheda‘, done: true }
</script.

　　Generator中的this和他的原型

　　Generator中的this就是谁调用它，那么this就是谁，我们利用Reflect.apply可以改变Generator的上下文：

function* gen() {
    console.log(this);
    yield0;
};
console.log(gen().next());
console.log(Reflect.apply(gen,"heheda").next());

　　Generator生成的Iterator，不但继承了Iterator的原型，也继承了Generator的原型：

<script>
function* gen() {
    console.log(this);
    yield0;
};
gen.prototype.foo = ()=> {
    console.log("foo");
}
let g = gen();
console.log(Reflect.getPrototypeOf(g) === gen.prototype); //输出：true
</script>

　　所以如果要让生成器继承方法，我们可以这样，感觉好酷，但是Generator内部的this是指向原型的，也就是说已经把原型污染了：

<script>
function* gen() {
    this.bar = "bar";
    yield0;
};
gen.prototype.foo = ()=> {
    console.log("foo");
}
let g = Reflect.apply(gen, gen.prototype,[]);
console.log(g.next());  //输出：Object {value: 0, done: false}
console.log(g.bar); //输出：bar
</script>

　　实际使用：

　　ajax的异步处理，利用生成器的特性，不但可以用于ajax的异步处理，也能够用于浏览器的文件系统filesystem的异步：

<html>
<head>
    <meta charset="utf-8">
    <script src="//cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js"></script>
</head>
<body>
    <script>
        "use strict";
        function* main() {
            var result = yield request("http://www.filltext.com?rows=10&f={firstName}");
            console.log(result);
            //do 别的ajax请求;        }

        function request(url) {
            var r = new XMLHttpRequest();
            r.open("GET", url, true);
            r.onreadystatechange = function () {
                if (r.readyState != 4 || r.status != 200) return;
                var data = JSON.parse(r.responseText);
                //数据成功返回以后， 代码就能够继续往下走了;                it.next(data);
            };
            r.send();
        }

        var it = main();
        it.next();
        console.log("执行到这儿啦");
    </script>
</body>
</html>

　　以上代码中的console.log("执行到这儿啦");先被执行了，然后才出现了ajax的返回结果，也就说明了Generator函数是异步的了；　　　

技术分享

　　利用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
}

　　生成多个Generator：

　　利用生成器的异步特性，实现协程的JS代码，在每一个生成器内部实现不同功能，协程：

<script>
function* first() {
    yield* function*() {
        setInterval(function() {
            console.log("setTimeout---0");
        },1000)
    }();
}
function* second() {
    yield* function*() {
        setInterval(function() {
            console.log("setTimeout---1");
        },1000)
    }();
}
function* third() {
    yield* function*() {
        setInterval(function() {
            console.log("setTimeout---2");
        },1000)
    }();
}
function runs(...args) {
    for(let arg of args) {
        arg.next();
    }
};
runs(first(), second(), third());
</script>

　　参考：

https://davidwalsh.name/es6-generators
https://davidwalsh.name/es6-generators-dive
https://davidwalsh.name/async-generators
https://davidwalsh.name/concurrent-generators
http://www.2ality.com/2015/03/es6-generators.html
http://es6.ruanyifeng.com/#docs/generator
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator

作者： NONO
出处： http://www.cnblogs.com/diligenceday/
QQ： 287101329
微信： 18101055830

原文：http://www.cnblogs.com/diligenceday/p/5488037.html

内容总结

以上是互联网集市为您收集整理的ES6新特性：Javascript中Generator(生成器)全部内容，希望文章能够帮你解决ES6新特性：Javascript中Generator(生成器)所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1193890.html

来源：【匿名】

【上一篇】javascript中caller和callee 【下一篇】javascript 怎么调用php方法

更多 ►

【ES6新特性：Javascript中Generator(生成器)】教程文章相关的互联网学习教程文章

ES6新特性：Javascript中Generator(生成器)【代码】【图】

ES6的很多特性都跟Generator扯上关系，而且实际用处比较广，包含了任何需要异步的模块，比如ajax， filesystem，或者数组对象遍历等都可以用到；　　Generator的使用：　　Generator函数和普通的函数区别有两个， 1：function和函数名之间有一个*号， 2：函数体内部使用了yield表达式；比如这样：function* gen() {yield"1";yield"2" } 　　这个玩意儿如果运行的话，会返回一个Iterator实例，然后再执行Iterator实例的next()方...

JavaScript数组新特性【代码】

1<!DOCTYPE html> 2 2 <html lang="en"> 3 3 <head> 4 4 <meta charset="UTF-8"> 5 5 <title>test1</title> 6 6 <script> 77 894 995/*10 96 11 97 every,some 前者是遍历数组中的每一个元素，并执行函数运行，如果有一个返回false则返回false/后者如果有一个返回true则返回true 12 98 filter,map 前者遍历数组中的元素，可以理解为过滤元素，并执行函数运行，返回的是过滤后的数...

vue3.0新特性有哪些【图】

Evan You（尤雨溪）在2018年11月16日）早上在 Vue Toronto 的主题演讲中预演了 Vue 3 。利用现代浏览器支持的新功能，Vue 3 将成为我们已经了解和喜爱的 Vue.js 强大的的改进版本。总结起来，Vue 3 以下方面值得我们期待：更快更小更易于维护更多的原生支持更易于开发使用更快：重写虚拟DOM (Virtual DOM Rewrite)随着虚拟 DOM 重写，我们可以期待更多的编译时（compile-time）提示来减少运行时（runtime）开销。重写将包括更有效...

React16新特性有哪些？react16的新特性和功能的介绍

本篇文章主要的介绍了关于react16的一些新特性，还有关于react16的详细功能介绍。下面就让我们一起来看这篇文章的正文内容吧React 16更新新js环境要求react16依靠Map和Set集合和requestAnimationFrame（一个针对动画效果的API）新功能- Fragments：render函数可以返回数组和字符串 - error boundaries：错误处理 - portals ：支持声明性地将子树渲染到另一个DOM节点 - custom DOM attributes ：ReactDom允许传递非标准属性 - impro...

webpack4.0.0-beta.0版本新特性（详细教程）

本篇文章主要介绍了webpack 4.0.0-beta.0版本新特性介绍，现在分享给大家，也给大家做个参考。近年来前端技术如雨后春笋般蓬勃发展，我们也在这个潮流下不断地学习、成长。前端技术的不断发展，给我们提供了许多的便利。例如：JSX的出现为我们提供了一个清晰、直观的方式来描述组件树，LESS/SASS的出现提高了我们书写css的能力，AMD/CommonJS/ES6 的出现为我们模块化开发提供了便利。然而，我们需要使用其它工具将这些工具转化成原...

详细为你解读vue-cli3.0新特性（详细教程）【图】

vue-cli 是 vue 官方团队推出的一款快速开发 vue 项目的构建工具，具有开箱即用并且提供简洁的自定义配置等功能。这篇文章主要介绍了快速了解vue-cli 3.0 新特性,需要的朋友可以参考下vue-cli 是 vue 官方团队推出的一款快速开发 vue 项目的构建工具，具有开箱即用并且提供简洁的自定义配置等功能。 vue-cli 从 2.0 到 3.0 的升级有太多的新东西可以说了，但是不可能在本文中列举所有的内容，这篇文章作为一个对比 2.0 升级功能的导...

怎样使用vue-cli3.0新特性【图】

这次给大家带来怎样使用vue-cli3.0新特性，使用vue-cli3.0新特性的注意事项有哪些，下面就是实战案例，一起来看一下。新建项目# 安装 npm install -g @vue/cli # 新建项目 vue create my-project # 项目启动 npm run serve # 打包 npm run build打包后的文件，对引用资源注入了预加载（preload/prefetch），启用 PWA 插件时注入 manifest/icon 链接，并且引入(inlines) webpack runtime / chunk manifest 清单已获得最佳性能。功能...

vue-cli3.0.x升级到webpack4后有哪些新特性

这次给大家带来vue-cli 3.0.x升级到webpack4后有哪些新特性，vue-cli 3.0.x升级到webpack4后有的注意事项有哪些，下面就是实战案例，一起来看一下。最近项目正在优化。乘着有时间看了一下 vue-cli3.0.x 使用。感觉还蛮不错的。因为之前项目使用的 vue-cli 2 创建的，强行使用 eslint让我们很难受，一些与项目无关的 “build” 和 “config” ，让人看着就有一些不爽。由于公司环境比较多，需要测试环境的配置。增加了 “”tt”...

React16.3新特性分析

Context API总是很让人迷惑。这个API是官方的，但是官方又不希望开发者们使用这个API，说是这个API会在以后发生改变。现在就是那个改变的时刻。新的API已经被merge了。而且它看起来更加的“用户友好”了。尤其是你不得不使用redux、mobx的时候，可以选择新的Context API实现更加简单的状态管理。新的API用起来非常的简单：React.createContext()，这样就创建了两个组件：import {createContext} from react;const ThemeContext = c...

详解webpack模块及webpack3新特性

本文从简单的例子入手，从打包文件去分析以下三个问题：webpack打包文件是怎样的？如何做到兼容各大模块化方案的？webpack3带来的新特性又是什么？webpack是一个强大的模块打包工具，在处理依赖、模块上都很优秀，本文从bundle.js文件分析出发去探索了不同模块方案的加载机制，初步去理解webpack，并且对webpack3特性进行阐述。一个简单的例子webpack配置 // webpack.config.js module.exports = {entry: ./src/index.js,output: {...

Vue.js2.5新特性分享【图】

本文主要和大家分享Vue.js 2.5新特性，Vue 2.5 Level E 已发布，在原来2.x的基础上做了很多相应改进和对 bug 的修复，目前 2.5 系列最新的版本为 2.5.2，本文给大家介绍vue 2.5 新特征，需要的朋友参考下吧，希望能帮助到大家。TypeScriptTypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。2012年十月份，微软发布了首个公开版本的T...

关于Vue.js2.5新特性介绍【图】

Vue 2.5 Level E 已发布，在原来2.x的基础上做了很多相应改进和对 bug 的修复，目前 2.5 系列最新的版本为 2.5.2，本文主要给大家分享Vue.js 2.5新特性，希望能帮助到大家。TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。2012年十月份，微软发布了首个公开版本的TypeScript，在2013年6月19日，微软发布了TypeScript 0.9的正式版...

Webpack3有哪些新特性

本文简短地分享下最新发布的 Webpack 3 中的新特性，供大家参考。1. Webpack 3 的新特性6 月 20 日，Webpack 发布了最新的 3.0 版本，并在 Medium 发布了公告。Webpack 目前几乎作为前端开发的标配，所以我们一起来看一看新版中有哪些主要的特性更新。整体相对于 2.0 变化不大，不必惊慌。Webpack 2.0 的相关视频教程，可以参见我录制的共计 20 集的视频教程，Webpack 2 视频教程。下面是 v3.0 Release 中的 Features List。node_m...

JS之--ES2015/6新特性汇总

ES 2015/6 新增内容还是比较多的，这里仅大纲性的列举一下（不一定全面）这些特性。其实，每个点挖进去都会有很多学问在里头，本文旨在汇总，所以不对这些特性进行深层次的讨论及研究。随后若有时间，再单独写几篇博客对常用的点进行深挖，与大家进行深度交流。箭头函数箭头函数，通过 => 语法实现的函数简写形式，C#/JAVA8/CoffeeScript 中都有类似语法。与函数不同，箭头函数与其执行下文环境共享同一个 this。如果一个箭头函数出...

具体介绍JavaScript6的新特性

JavaScript 6里都有啥新鲜东西？让我们一起来看看JavaScript 6的一些新特性。let, const (用来定义block-local变量), 程序过程中的function解构: let {x, y} = pt; let [s, v, o] = triple();(前提是let pt = {x:2, y:-5})缺省参数值: function f(x, y=1, z=0) {?}其它参数: function g(i, j, ...r) { return r.slice(i, j); }(不需要再使用 arguments )。数据展开: let a = [0,1,2,3], o = new Something(...a);。也可以用于数组字...

首页 / JAVASCRIPT / ES6新特性：Javascript中Generator(生成器)

ES6新特性：Javascript中Generator(生成器)

内容导读

内容图文

Generator的使用：

yield

yield*

next()方法

next()方法的参数

throw方法()

return()方法：

Generator中的this和他的原型

实际使用：

利用Generator函数，可以在任意对象上部署iterator接口：

生成多个Generator：

参考：

内容总结

内容备注

内容手机端

【ES6新特性：Javascript中Generator(生成器)】教程文章相关的互联网学习教程文章

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程

　　Generator的使用：

　　yield

　　yield*

　　next()方法

　　next()方法的参数

　　throw方法()

　　return()方法：

　　Generator中的this和他的原型

　　实际使用：

　　利用Generator函数，可以在任意对象上部署iterator接口：

　　生成多个Generator：

　　参考：