ES6 Generator 函数详解：异步编程利器

ES6\u7684 Generator \u662f\u4e00\u79cd\u7279\u6b8a\u7684\u51fd\u6570\uff0c\u901a\u8fc7 yield \u5173\u952e\u53ef\u4ee5\u5c06\u51fd\u6570\u7684\u6267\u884c\u6682\u65f6\uff0c\u5e76\u4e14\u53ef\u4ee5\u5728\u6682\u65f6\u7684\u5730\u65b9\u5411\u51fd\u6570\u4f20\u9001\u503c\u3002Generator \u51fd\u6570\u53ef\u4ee5\u901a\u8fc7\u751f\u6210\u5668\u5bf9\u8c61\u7684 .next() \u65b9\u6cd5\u6765\u63a7\u5236\u51fd\u6570\u7684\u6267\u884c\u3002\n\nGenerator \u51fd\u6570\u7684\u5b9a\u4e49\u4f7f\u7528 function* \u5173\u952e\uff0c\u800c\u4e0d\u662f\u666e\u901a\u51fd\u6570\u7684 function \u5173\u952e\u3002\u5728\u51fd\u6570\u4f53\u5185\u90e8\uff0c\u53ef\u4ee5\u4f7f\u7528 yield \u5173\u952e\u6765\u6307\u5b9a\u51fd\u6570\u7684\u6682\u65f6\u70b9\u3002\n\n\u4e0b\u9762\u662f\u4e00\u4e2a\u7b80\u5355\u7684 Generator \u51fd\u6570\u7684\u4f8b\u5b50\uff1a\n\njavascript\nfunction* generatorFunction() {\n yield 'Hello';\n yield 'World';\n yield '!';\n}\n\nconst generator = generatorFunction();\n\nconsole.log(generator.next().value); // \u8f93\u51fa\uff1aHello\nconsole.log(generator.next().value); // \u8f93\u51fa\uff1aWorld\nconsole.log(generator.next().value); // \u8f93\u51fa\uff1a!\n\n\n\u5728\u4e0a\u9762\u7684\u4f8b\u5b50\u4e2d\uff0cgeneratorFunction \u662f\u4e00\u4e2a Generator \u51fd\u6570\uff0c\u901a\u8fc7\u8c03\u7528 generatorFunction() \u53ef\u4ee5\u5f97\u5230\u4e00\u4e2a\u751f\u6210\u5668\u5bf9\u8c61 generator\u3002\u901a\u8fc7\u8c03\u7528 generator\u7684 .next() \u65b9\u6cd5\uff0c\u53ef\u4ee5\u8ba9 Generator \u51fd\u6570\u7ee7\u7eed\u6267\u884c\uff0c\u5e76\u4e14\u8fd4\u56de\u4e00\u4e2a\u5305\u542b value \u548c done \u5c5e\u6027\u7684\u5bf9\u8c61\u3002value \u5c5e\u6027\u8868\u793a\u51fd\u6570\u6267\u884c\u5230 yield \u8bed\u53e5\u65f6\u7684\u8fd4\u56de\u503c\uff0cdone \u5c5e\u6027\u8868\u793a\u51fd\u6570\u662f\u5426\u6267\u884c\u5b8c\u6bd5\u3002\n\nGenerator \u51fd\u6570\u7684\u7279\u70b9\u662f\u53ef\u4ee5\u901a\u8fc7 yield \u8bed\u53e5\u5c06\u51fd\u6570\u7684\u6267\u884c\u6682\u65f6\uff0c\u5e76\u4e14\u53ef\u4ee5\u5411\u51fd\u6570\u4f20\u9001\u503c\u3002\u4e0b\u9762\u662f\u4e00\u4e2a\u4f7f\u7528 yield \u8bed\u53e5\u5411 Generator \u51fd\u6570\u4f20\u9001\u503c\u7684\u4f8b\u5b50\uff1a\n\njavascript\nfunction* generatorFunction() {\n const value = yield 'Please enter a value:';\n yield `You entered: ${value}`;\n}\n\nconst generator = generatorFunction();\n\nconsole.log(generator.next().value); // \u8f93\u51fa\uff1aPlease enter a value:\n\nconsole.log(generator.next('Hello').value); // \u8f93\u51fa\uff1aYou entered: Hello\n\n\n\u5728\u4e0a\u9762\u7684\u4f8b\u5b50\u4e2d\uff0c\u901a\u8fc7\u8c03\u7528 generator.next() \u65b9\u6cd5\uff0c\u7a0b\u5e8f\u6267\u884c\u5230 yield 'Please enter a value:' \u65f6\u6682\u65f6\uff0c\u8fd4\u56de\u5b57\u7b26\u4e32 'Please enter a value:' \u4f5c\u4e3a value \u5c5e\u6027\u7684\u503c\u3002\u7136\u540e\uff0c\u901a\u8fc7\u8c03\u7528 generator.next('Hello') \u65b9\u6cd5\uff0c\u5c06 'Hello' \u4f5c\u4e3a\u53c2\u6570\u4f20\u9001\u7ed9 yield \u8bed\u53e5\uff0c\u7a0b\u5e8f\u7ee7\u7eed\u6267\u884c\uff0c\u5e76\u4e14\u8fd4\u56de\u5b57\u7b26\u4e32 'You entered: Hello' \u4f5c\u4e3a value \u5c5e\u6027\u7684\u503c\u3002\n\nGenerator \u51fd\u6570\u8fd8\u53ef\u4ee5\u4f7f\u7528 yield* \u8bed\u53e5\u6765\u59d4\u6258\u7ed9\u53e6\u4e00\u4e2a Generator \u51fd\u6570\u3002\u8fd9\u6837\u53ef\u4ee5\u65b9\u4fbf\u5730\u7ec4\u5408\u591a\u4e2a Generator \u51fd\u6570\u3002\n\njavascript\nfunction* generatorFunction1() {\n yield 'Hello';\n yield* generatorFunction2();\n yield '!';\n}\n\nfunction* generatorFunction2() {\n yield 'World';\n}\n\nconst generator = generatorFunction1();\n\nconsole.log(generator.next().value); // \u8f93\u51fa\uff1aHello\nconsole.log(generator.next().value); // \u8f93\u51fa\uff1aWorld\nconsole.log(generator.next().value); // \u8f93\u51fa\uff1a!\n\n\n\u5728\u4e0a\u9762\u7684\u4f8b\u5b50\u4e2d\uff0cgeneratorFunction1 \u901a\u8fc7 yield* \u8bed\u53e5\u59d4\u6258\u6267\u884c generatorFunction2\u3002\u8fd9\u6837\uff0cgeneratorFunction1 \u5728\u6267\u884c\u5230 yield* \u8bed\u53e5\u65f6\u6682\u65f6\uff0c\u7136\u540e\u7ee7\u7eed\u6267\u884c generatorFunction2\uff0c\u5f53 generatorFunction2 \u6267\u884c\u5b8c\u6bd5\u540e\uff0c\u518d\u7ee7\u7eed\u6267\u884c generatorFunction1\u7684\u5269\u4f59\u90e8\u5206\u3002\n\nGenerator \u51fd\u6570\u7684\u7279\u70b9\u4f7f\u5f97\u5b83\u975e\u5e38\u9002\u5408\u4e8e\u4f7f\u7528\u4e8e\u5e7f\u6cdb\u7a0b\u5e8f\uff0c\u53ef\u4ee5\u901a\u8fc7 yield \u8bed\u53e5\u5c06\u5e7f\u6cdb\u64cd\u4f5c\u7684\u7ed3\u679c\u8fd4\u56de\u7ed9\u8c03\u7528\u65b9\uff0c\u800c\u7136\u5b9e\u73b0\u66f4\u51c6\u786e\u548c\u7b80\u6d01\u7684\u5e7f\u6cdb\u4ee3\u7801\u3002