資訊專欄INFORMATION COLUMN
摘要：一簡介函數是引入的新型函數，用于異步編程，跟對象聯合使用的話會極大降低異步編程的編寫難度和閱讀難度。二簡單示例和注意函數不能直接使用，是通過方法獲取的返回結果，而可以提前終止函數。
一、簡介
Generator函數是ES6引入的新型函數，用于異步編程，跟Promise對象聯合使用的話會極大降低異步編程的編寫難度和閱讀難度。
與普通函數的區別：
function關鍵字與函數名之間有一個星號；
函數體內部使用yield語句，定義不同的內部狀態（yield在英語里的意思就是“產出”）。
二、簡單示例 1、yield和returnfunction* Foo() {
yield "hello";
yield "world";
return "!";
}
var foo = Foo();
console.log(foo.next());
console.log(foo.next());
console.log(foo.next());
注意：generator函數不能直接使用，是通過next()方法獲取yield/return的返回結果，而return可以提前終止函數。foo.return("!")方法也可終止函數。
2、yield*
字符串方式
function* Foo() {
yield* "hello";
}
var foo = Foo();
console.log(foo.next());
console.log(foo.next());
console.log(foo.next());
console.log(foo.next());
console.log(foo.next());
console.log(foo.next());
打印結果：
數組方式function* Foo() {
yield* ["a", "b", "c"];
}
var foo = Foo();
console.log(foo.next());
console.log(foo.next());
console.log(foo.next());
console.log(foo.next());
打印結果：
3、與for of配合使用 yield和returnfunction* Foo() {
yield 1;
yield 2;
return 3;
}
var foo = Foo();
for(var v of foo) {
console.log(v);
}
打印結果：
從上可以看出for of不執行return值
yield*function* Foo() {
yield* "hello";
}
var foo = Foo();
for(var v of foo) {
console.log(v);
}
打印結果：
4、throw方法function* Foo() {
try {
yield;
} catch(e) {
console.log("內部捕獲", e);
}
}
var foo = Foo();
foo.next();
try {
foo.throw("a");
foo.throw("b");
} catch (e) {
console.log("外部捕獲", e);
}
三、配合Promise使用
function promiseFn() {
new Promise(function(resolve, reject) {
setTimeout(function() {
foo.next("G");
}, 1000);
});
}
function* Foo() {
var a = yield promiseFn();
var b = yield promiseFn();
console.log(a, 111);
console.log(b, 222);
}
var foo = Foo(); // foo是全局變量，掛在window上，存在變量提升，在執行到promise異步的時候，可以直接使用
foo.next();
四、配合ajax使用
demo.php
"tom","age"=>rand()]; echo json_encode($a);
demo.html
function ajax() {
$.ajax({
type: "get",
url: "demo.php",
success: function(res) {
foo.next(res);
},
error: function(error) {
foo.next(error);
}
});
}
function* Foo() {
var a = yield ajax();
var b = yield ajax();
console.log(a, 111);
console.log(b, 222);
}
var foo = Foo();
foo.next();
打印結果：
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/101302.html
摘要：下的異步嘗試系列下的異步嘗試一初識生成器下的異步嘗試二初識協程下的異步嘗試三協程的版自動執行器下的異步嘗試四版的下的異步嘗試五版的的繼續完善生成器類獲取迭代器當前值獲取迭代器當前值返回當前產生的鍵生成器從上一次處繼續執行重置迭代器向生成器中 PHP下的異步嘗試系列 PHP下的異步嘗試一：初識生成器 PHP下的異步嘗試二：初識協程 PHP下的異步嘗試三：協程的PHP版thunkify自...
摘要：在某些不定長度的列表操作上，惰性列表會讓代碼和結構更靈活。方法本身是立即執行的，如果滿足條件，這里的方法會執行兩次。結語和是帶給我們的非常強大的語言層面的能力，它本身的求值可以看作是惰性的。 初識 Lazy List 如果有了解過 Haskell 的朋友，對下面的這些表達一定不陌生 repeat 1 -- => [1, 1, 1, 1, 1,...] cycle abc -- => a...
摘要：如何在中使用動畫前端掘金本文講一下中動畫應用的部分。與的快速入門指南推薦前端掘金是非常棒的框架，能夠創建功能強大，動態功能的。自發布以來，已經廣泛應用于開發中。 如何在 Angular 中使用動畫 - 前端 - 掘金本文講一下Angular中動畫應用的部分。 首先，Angular本生不提供動畫機制，需要在項目中加入Angular插件模塊ngAnimate才能完成Angular的動畫機制...
閱讀 874·2021-10-25 09:45
閱讀 3298·2021-09-22 14:58
閱讀 3856·2021-08-31 09:43
閱讀 919·2019-08-30 15:55
閱讀 923·2019-08-29 13:51
閱讀 1235·2019-08-29 13:02
閱讀 3490·2019-08-29 12:52
閱讀 1965·2019-08-26 13:27
