首页 >> js开发 >> jsES6 Generator基本使用方法示例js大全
jsES6 Generator基本使用方法示例js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
本文实例讲述了ES6 Generator基本使用方法。分享给大家供大家参考，具体如下：1.Generator介绍先来一段Generator的基础代码
function* g(){
yield 100;
yield 200;
return 300;
}
let gg = g();
console.log(gg);
// Object [Generator] {}
console.log(gg.next());
// { value: 100, done: false }
console.log(gg.next());
// { value: 200, done: false }
console.log(gg.next());
// { value: 300, done: true }
console.log(gg.next());
// { value: undefined, done: true }
function* g(){
yield 100;
yield 200;
return 300;
}
let gg = g();
console.log(gg);
// Object [Generator] {}
console.log(gg.next());
// { value: 100, done: false }
console.log(gg.next());
// { value: 200, done: false }
console.log(gg.next());
// { value: 300, done: true }
console.log(gg.next());
// { value: undefined, done: true }
首先我们看到：
Generator是由functinon*定义的，在generator内部可以使用yield
Generator不是函数，而是一个对象，并且在执行开始就进入暂停状态，而不是直接执行全部操作
通过next()来执行下一步操作，返回的都是{ value: xxx, done: xxx }这样的形式，value代表上一次操作返回的值，done有两个值，一个是true，一个是false，表示整个流程是否全部结束。
Generator是由functinon*定义的，在generator内部可以使用yieldGenerator不是函数，而是一个对象，并且在执行开始就进入暂停状态，而不是直接执行全部操作通过next()来执行下一步操作，返回的都是{ value: xxx, done: xxx }这样的形式，value代表上一次操作返回的值，done有两个值，一个是true，一个是false，表示整个流程是否全部结束。2.Generator异步编程generator是ES6中引入的异步解决方案，我们来看看它与promise处理异步的对比，来看它们的差异。
// 这里模拟了一个异步操作
function asyncFunc(data) {
return new Promise( resolve => {
setTimeout(
function() {
resolve(data)
},1000
)
})
}
// 这里模拟了一个异步操作
function asyncFunc(data) {
return new Promise( resolve => {
setTimeout(
function() {
resolve(data)
},1000
)
})
}
promise的处理方式:
asyncFunc("abc").then( res => {
console.log(res);
// "abc"
return asyncFunc("def")
}).then( res => {
console.log(res);
// "def"
return asyncFunc("ghi")
}).then( res => {
console.log(res);
// "ghi"
})
asyncFunc("abc").then( res => {
console.log(res);
// "abc"
return asyncFunc("def")
}).then( res => {
console.log(res);
// "def"
return asyncFunc("ghi")
}).then( res => {
console.log(res);
// "ghi"
})
generator的处理方式:
function* g() {
const r1 = yield asyncFunc("abc");
console.log(r1);
// "abc"
const r2 = yield asyncFunc("def");
console.log(r2);
// "def"
const r3 = yield asyncFunc("ghi");
console.log(r3);
// "ghi"
}
let gg = g();
let r1 = gg.next();
r1.value.then(res => {
let r2 = gg.next(res);
r2.value.then(res => {
let r3 = gg.next(res);
r3.value.then(res => {
gg.next(res)
})
})
})
function* g() {
const r1 = yield asyncFunc("abc");
console.log(r1);
// "abc"
const r2 = yield asyncFunc("def");
console.log(r2);
// "def"
const r3 = yield asyncFunc("ghi");
console.log(r3);
// "ghi"
}
let gg = g();
let r1 = gg.next();
r1.value.then(res => {
let r2 = gg.next(res);
r2.value.then(res => {
let r3 = gg.next(res);
r3.value.then(res => {
gg.next(res)
})
})
})
promise多次回调显得比较复杂，代码也不够简洁，generator在异步处理上看似同步的代码，实际是异步的操作，唯一就是在处理上会相对复杂，如果只进行一次异步操作，generator更合适。3.yield和yield*先来看两段代码
function* g1() {
yield 100;
yield g2();
return 400;
}
function* g2() {
yield 200;
yield 300;
}
let gg = g1();
console.log(gg.next());
// { value: 100, done: false }
console.log(gg.next());
// { value: Object [Generator] {}, done: false }
console.log(gg.next());
// { value: 400, done: true }
console.log(gg.next());
// { value: undefined, done: true }
function* g1() {
yield 100;
yield g2();
return 400;
}
function* g2() {
yield 200;
yield 300;
}
let gg = g1();
console.log(gg.next());
// { value: 100, done: false }
console.log(gg.next());
// { value: Object [Generator] {}, done: false }
console.log(gg.next());
// { value: 400, done: true }
console.log(gg.next());
// { value: undefined, done: true }
function* g1() {
yield 100;
yield* g2();
return 400;
}
function* g2() {
yield 200;
yield 300;
}
let gg = g1();
console.log(gg.next());
// { value: 100, done: false }
console.log(gg.next());
// { value: 200, done: false }
console.log(gg.next());
// { value: 300, done: false }
console.log(gg.next());
// { value: 400, done: true }
function* g1() {
yield 100;
yield* g2();
return 400;
}
function* g2() {
yield 200;
yield 300;
}
let gg = g1();
console.log(gg.next());
// { value: 100, done: false }
console.log(gg.next());
// { value: 200, done: false }
console.log(gg.next());
// { value: 300, done: false }
console.log(gg.next());
// { value: 400, done: true }
yield对另一个generator不会进行遍历，返回的是迭代器对象，而yield*会对generator进行遍历迭代。感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools./code/HtmlJsRun测试上述代码运行效果。在线HTML/CSS/JavaScript代码运行工具在线HTML/CSS/JavaScript代码运行工具http://tools./code/HtmlJsRun关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》javascript面向对象入门教程JavaScript错误与调试技巧总结JavaScript数据结构与算法技巧总结JavaScript遍历算法与技巧总结JavaScript数学运算用法总结希望本文所述对大家JavaScript程序设计有所帮助。
function* g(){
yield 100;
yield 200;
return 300;
}
let gg = g();
console.log(gg);
// Object [Generator] {}
console.log(gg.next());
// { value: 100, done: false }
console.log(gg.next());
// { value: 200, done: false }
console.log(gg.next());
// { value: 300, done: true }
console.log(gg.next());
// { value: undefined, done: true }
function* g(){
yield 100;
yield 200;
return 300;
}
let gg = g();
console.log(gg);
// Object [Generator] {}
console.log(gg.next());
// { value: 100, done: false }
console.log(gg.next());
// { value: 200, done: false }
console.log(gg.next());
// { value: 300, done: true }
console.log(gg.next());
// { value: undefined, done: true }
首先我们看到：
Generator是由functinon*定义的，在generator内部可以使用yield
Generator不是函数，而是一个对象，并且在执行开始就进入暂停状态，而不是直接执行全部操作
通过next()来执行下一步操作，返回的都是{ value: xxx, done: xxx }这样的形式，value代表上一次操作返回的值，done有两个值，一个是true，一个是false，表示整个流程是否全部结束。
Generator是由functinon*定义的，在generator内部可以使用yieldGenerator不是函数，而是一个对象，并且在执行开始就进入暂停状态，而不是直接执行全部操作通过next()来执行下一步操作，返回的都是{ value: xxx, done: xxx }这样的形式，value代表上一次操作返回的值，done有两个值，一个是true，一个是false，表示整个流程是否全部结束。2.Generator异步编程generator是ES6中引入的异步解决方案，我们来看看它与promise处理异步的对比，来看它们的差异。
// 这里模拟了一个异步操作
function asyncFunc(data) {
return new Promise( resolve => {
setTimeout(
function() {
resolve(data)
},1000
)
})
}
// 这里模拟了一个异步操作
function asyncFunc(data) {
return new Promise( resolve => {
setTimeout(
function() {
resolve(data)
},1000
)
})
}
promise的处理方式:
asyncFunc("abc").then( res => {
console.log(res);
// "abc"
return asyncFunc("def")
}).then( res => {
console.log(res);
// "def"
return asyncFunc("ghi")
}).then( res => {
console.log(res);
// "ghi"
})
asyncFunc("abc").then( res => {
console.log(res);
// "abc"
return asyncFunc("def")
}).then( res => {
console.log(res);
// "def"
return asyncFunc("ghi")
}).then( res => {
console.log(res);
// "ghi"
})
generator的处理方式:
function* g() {
const r1 = yield asyncFunc("abc");
console.log(r1);
// "abc"
const r2 = yield asyncFunc("def");
console.log(r2);
// "def"
const r3 = yield asyncFunc("ghi");
console.log(r3);
// "ghi"
}
let gg = g();
let r1 = gg.next();
r1.value.then(res => {
let r2 = gg.next(res);
r2.value.then(res => {
let r3 = gg.next(res);
r3.value.then(res => {
gg.next(res)
})
})
})
function* g() {
const r1 = yield asyncFunc("abc");
console.log(r1);
// "abc"
const r2 = yield asyncFunc("def");
console.log(r2);
// "def"
const r3 = yield asyncFunc("ghi");
console.log(r3);
// "ghi"
}
let gg = g();
let r1 = gg.next();
r1.value.then(res => {
let r2 = gg.next(res);
r2.value.then(res => {
let r3 = gg.next(res);
r3.value.then(res => {
gg.next(res)
})
})
})
promise多次回调显得比较复杂，代码也不够简洁，generator在异步处理上看似同步的代码，实际是异步的操作，唯一就是在处理上会相对复杂，如果只进行一次异步操作，generator更合适。3.yield和yield*先来看两段代码
function* g1() {
yield 100;
yield g2();
return 400;
}
function* g2() {
yield 200;
yield 300;
}
let gg = g1();
console.log(gg.next());
// { value: 100, done: false }
console.log(gg.next());
// { value: Object [Generator] {}, done: false }
console.log(gg.next());
// { value: 400, done: true }
console.log(gg.next());
// { value: undefined, done: true }
function* g1() {
yield 100;
yield g2();
return 400;
}
function* g2() {
yield 200;
yield 300;
}
let gg = g1();
console.log(gg.next());
// { value: 100, done: false }
console.log(gg.next());
// { value: Object [Generator] {}, done: false }
console.log(gg.next());
// { value: 400, done: true }
console.log(gg.next());
// { value: undefined, done: true }
function* g1() {
yield 100;
yield* g2();
return 400;
}
function* g2() {
yield 200;
yield 300;
}
let gg = g1();
console.log(gg.next());
// { value: 100, done: false }
console.log(gg.next());
// { value: 200, done: false }
console.log(gg.next());
// { value: 300, done: false }
console.log(gg.next());
// { value: 400, done: true }
function* g1() {
yield 100;
yield* g2();
return 400;
}
function* g2() {
yield 200;
yield 300;
}
let gg = g1();
console.log(gg.next());
// { value: 100, done: false }
console.log(gg.next());
// { value: 200, done: false }
console.log(gg.next());
// { value: 300, done: false }
console.log(gg.next());
// { value: 400, done: true }
yield对另一个generator不会进行遍历，返回的是迭代器对象，而yield*会对generator进行遍历迭代。感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools./code/HtmlJsRun测试上述代码运行效果。在线HTML/CSS/JavaScript代码运行工具在线HTML/CSS/JavaScript代码运行工具http://tools./code/HtmlJsRun关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》javascript面向对象入门教程JavaScript错误与调试技巧总结JavaScript数据结构与算法技巧总结JavaScript遍历算法与技巧总结JavaScript数学运算用法总结希望本文所述对大家JavaScript程序设计有所帮助。
相关文章:
- jsvue data对象重新赋值无效(未更改)的解决方式js大全
- jsElement Breadcrumb 面包屑的使用方法js大全
- js解决vue动态路由异步加载import组件,加载不到module的问题js大全
- jsAngular利用HTTP POST下载流文件的步骤记录js大全
- js解决vuex数据页面刷新后初始化操作js大全
- jsvue 页面回退mounted函数不执行的解决方案js大全
- jsvue项目使用$router.go(-1)返回时刷新原来的界面操作js大全
- jsElement Input输入框的使用方法js大全
- js关于angular浏览器兼容性问题的解决方案js大全
- JavaScriptthree.js欧拉角和四元数的使用方法
刚刚发布热门点击发布时间
- [02/23]chrome 浏览器插件外包:定制您的专属Chrome插件！专业外包团队助您轻松实现创意！
- [02/23]专业电脑浏览器插件外包服务，助力企业数字化转型！
- [02/23]解放双手，效率翻倍！Chrome插件前端自动化外包服务，助您轻松实现业务流程自动化！
- [02/23]定制您的专属Chrome插件！专业外包团队助您轻松实现创意！
- [02/23]Chrome插件外包：为你的浏览器赋能，开启无限可能
- [09/06]node js 调用kimi 接口批量生成网页
- [07/21]Node.js数据采集外包服务-数据采集专家-用Node.js释放数据的力量
- [07/21]专业前端开发-从PSD到响应式网页的无缝转换
- [07/18]专业Chrome插件开发- 为您的业务插上翅膀
- [07/18]智能数据抓取 -浏览器插件接口抓取服务外包
- [07/17]vue3 setup 监听url变化
- [07/17]git 回滚到指定 commit
- [07/15]浏览器插件使用场景:浏览器插件在数据抓取方面的使用场景非常广泛
- [07/15]Chrome 浏览器插件的使用场景
- [07/15]Chrome 浏览器插件开发的特点
