數(shù)：藍(lán)橋杯Web應(yīng)用開發(fā)實(shí)戰(zhàn)解析)
上次在群里幫一位準(zhǔn)備藍(lán)橋杯Web應(yīng)用開發(fā)的學(xué)弟看代碼他卡在一道“用生成器異步產(chǎn)出數(shù)據(jù)”的題上很久。題目本身不算難但他把重點(diǎn)全放在“怎么生成隨機(jī)數(shù)”上忽略了出題人真正想考察的ES6生成器流程控制能力。這其實(shí)也是很多備賽同學(xué)的共同問題ES6的Generator平時(shí)用得少真到比賽里遇到“異步 生成器”的組合容易不知道從哪下手。本文就圍繞“用ES6生成器異步產(chǎn)生隨機(jī)數(shù)”這一真題改編方向從生成器基礎(chǔ)語法講起逐步拆解“生成器 Promise”的異步流程控制寫法并給出一個(gè)可直接運(yùn)行的Web頁面案例。無論你是藍(lán)橋杯Web應(yīng)用開發(fā)的備賽選手還是想補(bǔ)一補(bǔ)ES6異步編程短板的開發(fā)者這篇都可以作為一份比較完整的實(shí)操筆記。1. 藍(lán)橋杯Web應(yīng)用開發(fā)考點(diǎn)里的ES6生成器1.1 為什么真題會(huì)考生成器藍(lán)橋杯Web應(yīng)用開發(fā)方向?qū)avaScript的考察很少停留在“寫個(gè)變量、調(diào)個(gè)函數(shù)”的層面更偏向ES6新特性在現(xiàn)代Web項(xiàng)目中的真實(shí)用法。從前幾年的出題趨勢(shì)來看Promise、async/await、Generator、模塊化、解構(gòu)賦值、箭頭函數(shù)這些ES6語法都會(huì)出現(xiàn)在不同難度的題目里。生成器和異步扯上關(guān)系是因?yàn)镴avaScript本身是單線程語言異步任務(wù)要靠事件循環(huán)機(jī)制完成。Generator函數(shù)雖然不能像async/await那樣原生支持異步但它的“暫停”特性非常適合配合Promise做流程控制。藍(lán)橋杯這類考試不愿意考死記硬背而是把“異步產(chǎn)生隨機(jī)數(shù)”這種帶有延遲、網(wǎng)絡(luò)請(qǐng)求特征的小場(chǎng)景包裝成題目考察選手對(duì)JavaScript異步模型的理解程度。1.2 真題中常見的考核形式如果我們要給“用ES6生成器異步產(chǎn)生隨機(jī)數(shù)”做一個(gè)真題模擬大概會(huì)是這樣一種風(fēng)格提供一個(gè)Web頁面要求點(diǎn)擊按鈕后通過異步任務(wù)獲取一個(gè)隨機(jī)數(shù)這個(gè)隨機(jī)數(shù)不能直接同步生成必須經(jīng)過“異步延遲”或“模擬接口返回”要求使用ES6生成器函數(shù)控制異步流程把多個(gè)隨機(jī)數(shù)的生成過程串聯(lián)起來形成一種“異步流水線”的效果。和單純調(diào)用Math.random()不同這道題的核心不是“隨機(jī)數(shù)怎么來”而是“異步流程怎么控制”。這一點(diǎn)要提前想清楚否則很容易答偏。2. 生成器函數(shù)基礎(chǔ)function* 與 yield2.1 認(rèn)識(shí)Generator函數(shù)ES6新增了Generator函數(shù)它是一種可以暫停執(zhí)行和恢復(fù)執(zhí)行的函數(shù)。普通函數(shù)一旦開始執(zhí)行就會(huì)一直跑到return結(jié)束Generator函數(shù)則在遇到y(tǒng)ield關(guān)鍵字時(shí)會(huì)主動(dòng)“讓出控制權(quán)”暫停在當(dāng)前位置等待下一次調(diào)用next()再繼續(xù)。定義方式是在函數(shù)名前面加一個(gè)星號(hào)可以寫作function* fn()也可以寫作function *fn()兩種寫法都合法。調(diào)用Generator函數(shù)時(shí)函數(shù)體不會(huì)立刻執(zhí)行而是返回一個(gè)迭代器對(duì)象。只有調(diào)用這個(gè)迭代器的next()方法函數(shù)才會(huì)真正開始執(zhí)行。來看一個(gè)最簡(jiǎn)單的例子function* count() { console.log(開始執(zhí)行); yield 1; console.log(第一次恢復(fù)); yield 2; console.log(第二次恢復(fù)); return 3; } const iterator count(); console.log(函數(shù)調(diào)用后尚未執(zhí)行函數(shù)體); console.log(iterator.next()); console.log(iterator.next()); console.log(iterator.next());執(zhí)行結(jié)果如下函數(shù)調(diào)用后尚未執(zhí)行函數(shù)體 開始執(zhí)行 { value: 1, done: false } 第一次恢復(fù) { value: 2, done: false } 第二次恢復(fù) { value: 3, done: true }從輸出可以看到幾個(gè)重要特征調(diào)用count()時(shí)函數(shù)體沒有執(zhí)行只返回了迭代器對(duì)象每次調(diào)用next()函數(shù)會(huì)執(zhí)行到下一個(gè)yield或return為止next()返回的對(duì)象包含value和done兩個(gè)屬性done為false表示還有后續(xù)流程done為true表示整個(gè)函數(shù)執(zhí)行完畢。2.2 next()傳參把數(shù)據(jù)從外部“喂”進(jìn)生成器Generator函數(shù)不只是簡(jiǎn)單的暫停還能在恢復(fù)時(shí)接收外部傳入的數(shù)據(jù)。上一次yield表達(dá)式的返回值就是下一次next()傳入的參數(shù)。這一點(diǎn)是生成器做異步流程控制的關(guān)鍵。function* calc() { const a yield 請(qǐng)輸入a; const b yield 請(qǐng)輸入b; return a b; } const it calc(); console.log(it.next()); // { value: 請(qǐng)輸入a, done: false } console.log(it.next(10)); // { value: 請(qǐng)輸入b, done: false } console.log(it.next(20)); // { value: 30, done: true }第一次調(diào)用next()時(shí)函數(shù)執(zhí)行到第一個(gè)yield暫停此時(shí)還沒有變量接收返回值。第二次調(diào)用next(10)時(shí)10會(huì)作為第一個(gè)yield表達(dá)式的返回值賦給a然后繼續(xù)執(zhí)行到第二個(gè)yield暫停。第三次調(diào)用next(20)時(shí)20賦給b最終返回30。這個(gè)“外部向函數(shù)內(nèi)部傳值”的能力讓Generator函數(shù)可以從異步任務(wù)中拿到結(jié)果再繼續(xù)執(zhí)行。比如yield一個(gè)Promise等這個(gè)Promise異步完成之后通過next(result)把結(jié)果傳回函數(shù)體內(nèi)部。2.3 yield*在生成器里調(diào)用另一個(gè)生成器yield*用于在一個(gè)Generator函數(shù)中委托另一個(gè)可迭代對(duì)象。它可以理解為“展開”操作把被委托對(duì)象產(chǎn)生的所有值逐個(gè)產(chǎn)出。function* inner() { yield A; yield B; } function* outer() { yield start; yield* inner(); yield end; } for (const value of outer()) { console.log(value); } // start // A // B // end在真題里yield*出現(xiàn)頻率不高但如果你對(duì)生成器有一定掌握可以在代碼里用它做模塊拆分把“隨機(jī)數(shù)生成流程”和“頁面渲染流程”分開組織代碼結(jié)構(gòu)會(huì)更清晰。3. 生成器異步流程控制的核心原理3.1 為什么需要生成器控制異步流程在實(shí)際開發(fā)中異步操作通常嵌套在回調(diào)函數(shù)里。一旦要連續(xù)發(fā)起多個(gè)異步請(qǐng)求就會(huì)形成“回調(diào)地獄”setTimeout(() { console.log(第一步); setTimeout(() { console.log(第二步); setTimeout(() { console.log(第三步); }, 1000); }, 1000); }, 1000);這種代碼難以閱讀也難以維護(hù)。Promise通過.then()鏈?zhǔn)秸{(diào)用緩解了回調(diào)嵌套問題但本質(zhì)上仍然是“回調(diào)的變體”。async/await在ES2017引入用同步寫法寫異步邏輯解決了大部分問題。而Generator是夾在Promise和async/await之間的過渡方案。它通過yield暫停和next()恢復(fù)配合Promise的then回調(diào)完全可以實(shí)現(xiàn)類似async/await的效果。藍(lán)橋杯真題為了考察ES6的深度有時(shí)會(huì)刻意要求用Generator來寫異步流程。3.2 Generator Promise 的標(biāo)準(zhǔn)套路我們約定這樣一個(gè)異步任務(wù)傳入一個(gè)數(shù)字經(jīng)過1秒延遲后返回這個(gè)數(shù)字加1的結(jié)果。function asyncAdd(num) { return new Promise(resolve { setTimeout(() { resolve(num 1); }, 1000); }); }用Generator來串聯(lián)三次asyncAddfunction* task() { const a yield asyncAdd(1); console.log(第一次結(jié)果:, a); const b yield asyncAdd(a); console.log(第二次結(jié)果:, b); const c yield asyncAdd(b); console.log(第三次結(jié)果:, c); return c; } function run(generator) { const iterator generator(); function step(prevValue) { const result iterator.next(prevValue); if (result.done) { return result.value; } // result.value 是一個(gè) Promise Promise.resolve(result.value) .then(value { step(value); }) .catch(err { iterator.throw(err); }); } step(); } run(task);核心邏輯如下調(diào)用task()獲得迭代器第一次執(zhí)行iterator.next()函數(shù)體運(yùn)行到第一個(gè)yield asyncAdd(1)暫停返回一個(gè)Promise我們?cè)趕tep函數(shù)里拿到這個(gè)Promise調(diào)用.then()等待它完成異步完成后把結(jié)果作為iterator.next(value)的參數(shù)傳回去函數(shù)從暫停處恢復(fù)a就拿到了異步返回的值循環(huán)這個(gè)過程直到done為true。這個(gè)過程是不是很像await事實(shí)上async/await底層就可以理解為Generator 自動(dòng)執(zhí)行器的語法糖。上面的run函數(shù)就是一個(gè)手寫的最小版“自動(dòng)執(zhí)行器”。3.3 手動(dòng)寫一個(gè)可復(fù)用的run函數(shù)為了方便比賽時(shí)使用可以把上面的run函數(shù)封裝成一個(gè)通用方法。它能自動(dòng)驅(qū)動(dòng)一個(gè)內(nèi)部yield Promise的生成器函數(shù)function run(generator) { const it generator(); function handle(iteratorResult) { if (iteratorResult.done) { return; } const value iteratorResult.value; if (value instanceof Promise) { value .then(res handle(it.next(res))) .catch(err it.throw(err)); } else { handle(it.next(value)); } } handle(it.next()); }把這個(gè)函數(shù)放在代碼開頭后面任何一個(gè)需要“生成器 異步”的流程都可以直接使用。4. 真題模擬用ES6生成器異步產(chǎn)生隨機(jī)數(shù)4.1 題目設(shè)計(jì)與評(píng)分點(diǎn)我們把真題模擬成如下需求。題目描述開發(fā)一個(gè)Web頁面頁面上有一個(gè)按鈕。點(diǎn)擊按鈕后需要按照以下流程執(zhí)行模擬一次異步接口請(qǐng)求返回一個(gè)1到100之間的隨機(jī)數(shù)種子根據(jù)第一步的種子再發(fā)起一次異步請(qǐng)求生成3個(gè)10到99之間的隨機(jī)整數(shù)將最終生成的3個(gè)隨機(jī)數(shù)依次渲染到頁面列表中整個(gè)過程必須由Generator函數(shù)控制不能直接使用async/await不能直接在同步代碼中調(diào)用Math.random()生成最終結(jié)果。評(píng)分點(diǎn)可以拆成這樣是否定義并正確使用Generator函數(shù)是否把異步任務(wù)封裝成Promise;是否理解next()傳參能不能把上一次異步結(jié)果傳到下一次流程頁面是否能正常交互并渲染結(jié)果是否具備基本的錯(cuò)誤處理。注意“能計(jì)算出隨機(jī)數(shù)”只是加分項(xiàng)重點(diǎn)考察的是“異步流程控制”。如果你用async/await實(shí)現(xiàn)了能跑通但沒按要求用Generator在某些嚴(yán)格評(píng)分規(guī)則下會(huì)扣分。4.2 創(chuàng)建項(xiàng)目結(jié)構(gòu)這個(gè)案例不需要復(fù)雜工程一個(gè)HTML文件就可以完成全部演示。為了講解方便我們創(chuàng)建如下結(jié)構(gòu)generator-random/ └── index.html如果你想在命令行中先測(cè)試核心邏輯也可以拆出一個(gè)main.js用Node.js運(yùn)行。本文主要展示W(wǎng)eb頁面版本。4.3 編寫完整HTML頁面打開index.html輸入以下代碼!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title用ES6生成器異步產(chǎn)生隨機(jī)數(shù)/title style .container { max-width: 600px; margin: 50px auto; padding: 24px; border: 1px solid #e0e0e0; border-radius: 8px; font-family: Microsoft YaHei, sans-serif; } button { padding: 10px 20px; font-size: 16px; background-color: #2f54eb; color: #fff; border: none; border-radius: 4px; cursor: pointer; } button:disabled { background-color: #aaa; cursor: not-allowed; } .list { margin-top: 20px; padding: 0; list-style: none; } .list li { padding: 8px 12px; border: 1px solid #f0f0f0; border-radius: 4px; margin-bottom: 8px; background-color: #fafafa; } /style /head body div classcontainer h2ES6 Generator 異步隨機(jī)數(shù)生成器/h2 p點(diǎn)擊按鈕后模擬異步接口返回隨機(jī)數(shù)種子再基于種子生成3個(gè)隨機(jī)整數(shù)。/p button idgenerateBtn開始異步生成/button ul idresultList classlist/ul p idstatus stylecolor: #666;/p /div script // 模擬異步任務(wù) /** * 模擬異步接口延遲 delay 毫秒后返回?cái)?shù)據(jù) */ function mockAsync(data, delay 500) { return new Promise(resolve { setTimeout(() { resolve(data); }, delay); }); } /** * 模擬請(qǐng)求隨機(jī)數(shù)種子 */ function requestSeed() { // 種子范圍 1 ~ 100 const seed Math.floor(Math.random() * 100) 1; return mockAsync(seed, 800); } /** * 根據(jù)種子生成一個(gè)10~99的隨機(jī)整數(shù) */ function generateNumberBySeed(seed) { // 這里為了演示把 seed 參與計(jì)算 const base (seed * 9301 49297) % 233280; const num Math.floor((base / 233280) * 90) 10; return mockAsync(num, 500); } // 生成器流程控制 /** * 核心生成器函數(shù) * 1. 異步獲取種子 * 2. 基于種子異步生成3個(gè)隨機(jī)數(shù) * 3. 返回最終數(shù)組 */ function* randomFlow() { const seed yield requestSeed(); updateStatus(已獲取隨機(jī)種子: seed); const numbers []; for (let i 0; i 3; i) { const num yield generateNumberBySeed(seed i); numbers.push(num); updateStatus(正在生成第 (i 1) 個(gè)隨機(jī)數(shù)...); } return numbers; } /** * 生成器自動(dòng)執(zhí)行器 */ function run(generator) { const it generator(); function step(prevValue) { const result it.next(prevValue); if (result.done) { return result.value; } Promise.resolve(result.value) .then(res step(res)) .catch(err { console.error(異步流程出錯(cuò):, err); it.throw(err); }); } return step(); } // 頁面交互 const btn document.getElementById(generateBtn); const list document.getElementById(resultList); const status document.getElementById(status); function updateStatus(text) { status.textContent text; } function renderResult(numbers) { list.innerHTML ; numbers.forEach((num, index) { const li document.createElement(li); li.textContent 隨機(jī)數(shù) (index 1) num; list.appendChild(li); }); updateStatus(生成完成); } btn.addEventListener(click, function () { // 避免重復(fù)點(diǎn)擊 btn.disabled true; list.innerHTML ; updateStatus(開始執(zhí)行生成器流程...); run(randomFlow) .then(numbers { renderResult(numbers); }) .catch(err { updateStatus(生成失敗請(qǐng)查看控制臺(tái)); console.error(err); }) .finally(() { btn.disabled false; }); }); /script /body /html4.4 關(guān)鍵代碼解釋4.4.1 模擬異步任務(wù)mockAsync函數(shù)本質(zhì)上是對(duì)setTimeout的Promise封裝。真實(shí)比賽場(chǎng)景中這一步通常是一個(gè)axios請(qǐng)求或fetch()調(diào)用但核心思想是一樣的yield一個(gè)Promise讓生成器暫停等異步結(jié)果返回后繼續(xù)執(zhí)行。requestSeed和generateNumberBySeed都調(diào)用了mockAsync保證了“隨機(jī)數(shù)不是同步產(chǎn)生的”而是通過異步延遲返回。這樣才符合題目的“異步產(chǎn)生隨機(jī)數(shù)”要求。4.4.2 核心生成器流程const seed yield requestSeed();這一行代碼是關(guān)鍵。它做了三件事調(diào)用requestSeed()返回一個(gè)Promise;yield將這個(gè)Promise交給自動(dòng)執(zhí)行器生成器暫停等待異步返回自動(dòng)執(zhí)行器在resolve后調(diào)用next(seed)把種子值傳回seed變量。后面的for循環(huán)同理。每次迭代都會(huì)yield一個(gè)generateNumberBySeed(...)產(chǎn)生的Promise拿到結(jié)果后push到數(shù)組中。整個(gè)過程沒有回調(diào)嵌套代碼順序和同步代碼幾乎一樣。4.4.3 run自動(dòng)執(zhí)行器這次與上一節(jié)稍有不同run函數(shù)返回了step()的返回值而step()在result.done時(shí)返回result.value也就是生成器最終return的數(shù)組。這樣我們就可以在頁面中鏈?zhǔn)秸{(diào)用run(randomFlow).then(numbers { ... });自執(zhí)行器在這里起到了“內(nèi)部驅(qū)動(dòng)”的作用所以外層函數(shù)里不需要手動(dòng)調(diào)用next()。4.5 運(yùn)行與預(yù)期輸出直接用瀏覽器打開index.html點(diǎn)擊“開始異步生成”按鈕可以看到狀態(tài)文字顯示“開始執(zhí)行生成器流程...”大約800毫秒后顯示“已獲取隨機(jī)種子: 某個(gè)1~100的數(shù)”隨后每隔500毫秒顯示一次“正在生成第N個(gè)隨機(jī)數(shù)...”最后列表中出現(xiàn)3個(gè)隨機(jī)數(shù)狀態(tài)變?yōu)椤吧赏瓿伞??？刂婆_(tái)沒有任何異常頁面按鈕在流程執(zhí)行期間處于禁用狀態(tài)流程結(jié)束后恢復(fù)可點(diǎn)擊。這就是一套完整的“生成器 Promise 頁面渲染”的真題模擬實(shí)現(xiàn)。4.6 對(duì)比async/await寫法如果你熟悉async/await會(huì)發(fā)現(xiàn)生成器版本的流程和下面這段異步寫法幾乎一一對(duì)應(yīng)async function randomFlowAsync() { const seed await requestSeed(); const numbers []; for (let i 0; i 3; i) { const num await generateNumberBySeed(seed i); numbers.push(num); } return numbers; }對(duì)比可以看出對(duì)比項(xiàng)Generator 自動(dòng)執(zhí)行器async/await暫停語法yieldawait聲明方式function*async function返回結(jié)果迭代器對(duì)象Promise驅(qū)動(dòng)方式需要手動(dòng)寫執(zhí)行器引擎自動(dòng)驅(qū)動(dòng)兼容性ES6ES2017代碼可讀性門檻稍高寫法靈活直觀、推薦日常使用比賽時(shí)如果題目明確要求用生成器就應(yīng)該寫Generator方案如果沒要求日常項(xiàng)目開發(fā)更推薦async/await。5. 常見問題與排查思路5.1 常見報(bào)錯(cuò)與解決思路問題現(xiàn)象常見原因解決思路點(diǎn)擊按鈕后無任何反應(yīng)沒有調(diào)用next()或生成器沒有正確啟動(dòng)檢查是否通過自執(zhí)行器或手動(dòng)it.next()啟動(dòng)流程yield后面的Promise結(jié)果拿不到?jīng)]有把next(res)的返回值傳回生成器調(diào)用.then(res it.next(res))把結(jié)果傳回去生成的隨機(jī)數(shù)順序錯(cuò)亂可能在.then中直接使用外部變量而不是通過next傳參把結(jié)果統(tǒng)一從next參數(shù)傳回函數(shù)體頁面卡死按鈕無法再次點(diǎn)擊沒有處理按鈕禁用和恢復(fù)邏輯流程結(jié)束后通過.finally()恢復(fù)按鈕it.next()返回{value: undefined}yield后面沒有返回值或返回的是非Promise值保證yield表達(dá)式返回一個(gè)Promise使用for...of遍歷生成器時(shí)異步操作沒有生效for...of只能遍歷同步迭代器不能等待Promise完成使用自執(zhí)行器配合next傳參5.2 排查清單如果你在比賽中遇到生成器相關(guān)代碼運(yùn)行不符合預(yù)期可以按下面順序排查第一步確認(rèn)生成器函數(shù)聲明為function*并且調(diào)用時(shí)返回的是迭代器第二步確認(rèn)yield后面跟的是Promise對(duì)象而不是一個(gè)普通數(shù)字第三步確認(rèn)自執(zhí)行器中是否調(diào)用it.next(prevValue)傳回上一次結(jié)果第四步確認(rèn)異步失敗時(shí)是否調(diào)用it.throw(err)否則錯(cuò)誤會(huì)丟失第五步確認(rèn)最終結(jié)果是通過return返回的而不是只打印到控制臺(tái)第六步確認(rèn)頁面交互事件里是否處理了按鈕防重復(fù)點(diǎn)擊。按這個(gè)順序排查大多數(shù)生成器異步流程問題都能定位。6. 藍(lán)橋杯實(shí)戰(zhàn)最佳實(shí)踐6.1 手寫自執(zhí)行器很有必要雖然比賽可以只寫Generator函數(shù)由自己封裝一個(gè)run函數(shù)來驅(qū)動(dòng)但不要只背代碼要理解自執(zhí)行器的兩個(gè)核心行為result.done為false時(shí)等待yield出的Promise完成完成之后把結(jié)果作為next()參數(shù)傳回生成器。建議在備賽時(shí)手寫三遍自執(zhí)行器直到能默寫出來。這樣即使遇到變種的題目比如yield后面不只有Promise還有普通值也能靈活調(diào)整。6.2 異步任務(wù)統(tǒng)一封裝成Promise在真題模擬中我們用了mockAsync來統(tǒng)一封裝異步任務(wù)。真實(shí)比賽里如果遇到類似“模擬數(shù)據(jù)請(qǐng)求”“定時(shí)器延遲”的場(chǎng)景建議都先封裝成Promise函數(shù)再放到生成器里yield。這樣做有兩個(gè)好處第一讓生成器函數(shù)的代碼保持干凈第二自執(zhí)行器只需要處理Promise一種情況即可邏輯更簡(jiǎn)單。6.3 注意變量命名與代碼注釋藍(lán)橋杯Web應(yīng)用開發(fā)題目的代碼量通常不小閱卷時(shí)對(duì)手寫代碼的清晰度有一定要求。建議生成器函數(shù)統(tǒng)一使用Flow、Task結(jié)尾自執(zhí)行器統(tǒng)一使用run異步任務(wù)統(tǒng)一使用request、fetch、load開頭這樣閱卷人一眼就能理解你的代碼結(jié)構(gòu)。yield的含義本身就是“讓出控制權(quán)”在關(guān)鍵yield行前面加一行注釋說明這一行暫停等待什么數(shù)據(jù)能有效降低后續(xù)維護(hù)成本。6.4 不要忽略錯(cuò)誤處理有些同學(xué)寫生成器異步流程時(shí)只處理了resolve分支沒有處理reject分支。真實(shí)題目中如果要求“異步獲取隨機(jī)數(shù)失敗后用兜底值”就必須在自執(zhí)行器里調(diào)用it.throw(error)把異常交回生成器內(nèi)部處理。在Web頁面中還要注意異步流程期間要禁用按鈕流程結(jié)束無論成功失敗都要恢復(fù)按鈕。否則用戶連點(diǎn)多次會(huì)出現(xiàn)多個(gè)生成器流程同時(shí)執(zhí)行頁面狀態(tài)混亂。6.5 兼容性與運(yùn)行環(huán)境Generator是ES6特性現(xiàn)代瀏覽器和Node.js 12都支持。如果你在比賽環(huán)境中不確定瀏覽器版本可以先在頁面頂部加一段簡(jiǎn)單的兼容性判斷if (typeof function* () {} ! function) { alert(當(dāng)前瀏覽器不支持Generator請(qǐng)更換瀏覽器); }當(dāng)然藍(lán)橋杯機(jī)試環(huán)境通常沒問題但這個(gè)檢查在真實(shí)項(xiàng)目上線時(shí)很有價(jià)值。7. 總結(jié)本文圍繞“用ES6生成器異步產(chǎn)生隨機(jī)數(shù)”這一模擬真題從生成器函數(shù)的基礎(chǔ)語法講到了完整的Web頁面實(shí)現(xiàn)。核心收獲有三個(gè)第一生成器通過yield暫停函數(shù)執(zhí)行通過next()恢復(fù)并傳參這種特性天然適合控制異步流程第二生成器本身不會(huì)自動(dòng)等待異步任務(wù)必須配合一個(gè)自執(zhí)行器把yield出來的Promise結(jié)果通過next傳回去才能實(shí)現(xiàn)類似await的效果第三涉及“異步產(chǎn)生隨機(jī)數(shù)”這類題考察重點(diǎn)不是隨機(jī)算法而是異步流程控制能力平時(shí)可以把Generator Promise的寫法練熟比賽中遇到才能從容應(yīng)對(duì)。下一步你可以嘗試把yield后面改成fetch請(qǐng)求模擬一個(gè)“從接口獲取隨機(jī)數(shù)”的真實(shí)場(chǎng)景或者把生成的隨機(jī)數(shù)進(jìn)一步做可視化展示比如散點(diǎn)圖、柱狀圖。理解了生成器異步控制的核心后這些擴(kuò)展都不會(huì)太難。如果本文對(duì)你有幫助建議收藏備用。備賽期間多動(dòng)手寫幾遍代碼比一直看教程有效得多。 ES6 Generator異步生成隨機(jī)數(shù)：藍(lán)橋杯Web應(yīng)用開發(fā)實(shí)戰(zhàn)解析
上次在群里幫一位準(zhǔn)備藍(lán)橋杯Web應(yīng)用開發(fā)的學(xué)弟看代碼他卡在一道“用生成器異步產(chǎn)出數(shù)據(jù)”的題上很久。題目本身不算難但他把重點(diǎn)全放在“怎么生成隨機(jī)數(shù)”上忽略了出題人真正想考察的ES6生成器流程控制能力。這其實(shí)也是很多備賽同學(xué)的共同問題ES6的Generator平時(shí)用得少真到比賽里遇到“異步 生成器”的組合容易不知道從哪下手。本文就圍繞“用ES6生成器異步產(chǎn)生隨機(jī)數(shù)”這一真題改編方向從生成器基礎(chǔ)語法講起逐步拆解“生成器 Promise”的異步流程控制寫法并給出一個(gè)可直接運(yùn)行的Web頁面案例。無論你是藍(lán)橋杯Web應(yīng)用開發(fā)的備賽選手還是想補(bǔ)一補(bǔ)ES6異步編程短板的開發(fā)者這篇都可以作為一份比較完整的實(shí)操筆記。1. 藍(lán)橋杯Web應(yīng)用開發(fā)考點(diǎn)里的ES6生成器1.1 為什么真題會(huì)考生成器藍(lán)橋杯Web應(yīng)用開發(fā)方向?qū)avaScript的考察很少停留在“寫個(gè)變量、調(diào)個(gè)函數(shù)”的層面更偏向ES6新特性在現(xiàn)代Web項(xiàng)目中的真實(shí)用法。從前幾年的出題趨勢(shì)來看Promise、async/await、Generator、模塊化、解構(gòu)賦值、箭頭函數(shù)這些ES6語法都會(huì)出現(xiàn)在不同難度的題目里。生成器和異步扯上關(guān)系是因?yàn)镴avaScript本身是單線程語言異步任務(wù)要靠事件循環(huán)機(jī)制完成。Generator函數(shù)雖然不能像async/await那樣原生支持異步但它的“暫停”特性非常適合配合Promise做流程控制。藍(lán)橋杯這類考試不愿意考死記硬背而是把“異步產(chǎn)生隨機(jī)數(shù)”這種帶有延遲、網(wǎng)絡(luò)請(qǐng)求特征的小場(chǎng)景包裝成題目考察選手對(duì)JavaScript異步模型的理解程度。1.2 真題中常見的考核形式如果我們要給“用ES6生成器異步產(chǎn)生隨機(jī)數(shù)”做一個(gè)真題模擬大概會(huì)是這樣一種風(fēng)格提供一個(gè)Web頁面要求點(diǎn)擊按鈕后通過異步任務(wù)獲取一個(gè)隨機(jī)數(shù)這個(gè)隨機(jī)數(shù)不能直接同步生成必須經(jīng)過“異步延遲”或“模擬接口返回”要求使用ES6生成器函數(shù)控制異步流程把多個(gè)隨機(jī)數(shù)的生成過程串聯(lián)起來形成一種“異步流水線”的效果。和單純調(diào)用Math.random()不同這道題的核心不是“隨機(jī)數(shù)怎么來”而是“異步流程怎么控制”。這一點(diǎn)要提前想清楚否則很容易答偏。2. 生成器函數(shù)基礎(chǔ)function* 與 yield2.1 認(rèn)識(shí)Generator函數(shù)ES6新增了Generator函數(shù)它是一種可以暫停執(zhí)行和恢復(fù)執(zhí)行的函數(shù)。普通函數(shù)一旦開始執(zhí)行就會(huì)一直跑到return結(jié)束Generator函數(shù)則在遇到y(tǒng)ield關(guān)鍵字時(shí)會(huì)主動(dòng)“讓出控制權(quán)”暫停在當(dāng)前位置等待下一次調(diào)用next()再繼續(xù)。定義方式是在函數(shù)名前面加一個(gè)星號(hào)可以寫作function* fn()也可以寫作function *fn()兩種寫法都合法。調(diào)用Generator函數(shù)時(shí)函數(shù)體不會(huì)立刻執(zhí)行而是返回一個(gè)迭代器對(duì)象。只有調(diào)用這個(gè)迭代器的next()方法函數(shù)才會(huì)真正開始執(zhí)行。來看一個(gè)最簡(jiǎn)單的例子function* count() { console.log(開始執(zhí)行); yield 1; console.log(第一次恢復(fù)); yield 2; console.log(第二次恢復(fù)); return 3; } const iterator count(); console.log(函數(shù)調(diào)用后尚未執(zhí)行函數(shù)體); console.log(iterator.next()); console.log(iterator.next()); console.log(iterator.next());執(zhí)行結(jié)果如下函數(shù)調(diào)用后尚未執(zhí)行函數(shù)體 開始執(zhí)行 { value: 1, done: false } 第一次恢復(fù) { value: 2, done: false } 第二次恢復(fù) { value: 3, done: true }從輸出可以看到幾個(gè)重要特征調(diào)用count()時(shí)函數(shù)體沒有執(zhí)行只返回了迭代器對(duì)象每次調(diào)用next()函數(shù)會(huì)執(zhí)行到下一個(gè)yield或return為止next()返回的對(duì)象包含value和done兩個(gè)屬性done為false表示還有后續(xù)流程done為true表示整個(gè)函數(shù)執(zhí)行完畢。2.2 next()傳參把數(shù)據(jù)從外部“喂”進(jìn)生成器Generator函數(shù)不只是簡(jiǎn)單的暫停還能在恢復(fù)時(shí)接收外部傳入的數(shù)據(jù)。上一次yield表達(dá)式的返回值就是下一次next()傳入的參數(shù)。這一點(diǎn)是生成器做異步流程控制的關(guān)鍵。function* calc() { const a yield 請(qǐng)輸入a; const b yield 請(qǐng)輸入b; return a b; } const it calc(); console.log(it.next()); // { value: 請(qǐng)輸入a, done: false } console.log(it.next(10)); // { value: 請(qǐng)輸入b, done: false } console.log(it.next(20)); // { value: 30, done: true }第一次調(diào)用next()時(shí)函數(shù)執(zhí)行到第一個(gè)yield暫停此時(shí)還沒有變量接收返回值。第二次調(diào)用next(10)時(shí)10會(huì)作為第一個(gè)yield表達(dá)式的返回值賦給a然后繼續(xù)執(zhí)行到第二個(gè)yield暫停。第三次調(diào)用next(20)時(shí)20賦給b最終返回30。這個(gè)“外部向函數(shù)內(nèi)部傳值”的能力讓Generator函數(shù)可以從異步任務(wù)中拿到結(jié)果再繼續(xù)執(zhí)行。比如yield一個(gè)Promise等這個(gè)Promise異步完成之后通過next(result)把結(jié)果傳回函數(shù)體內(nèi)部。2.3 yield*在生成器里調(diào)用另一個(gè)生成器yield*用于在一個(gè)Generator函數(shù)中委托另一個(gè)可迭代對(duì)象。它可以理解為“展開”操作把被委托對(duì)象產(chǎn)生的所有值逐個(gè)產(chǎn)出。function* inner() { yield A; yield B; } function* outer() { yield start; yield* inner(); yield end; } for (const value of outer()) { console.log(value); } // start // A // B // end在真題里yield*出現(xiàn)頻率不高但如果你對(duì)生成器有一定掌握可以在代碼里用它做模塊拆分把“隨機(jī)數(shù)生成流程”和“頁面渲染流程”分開組織代碼結(jié)構(gòu)會(huì)更清晰。3. 生成器異步流程控制的核心原理3.1 為什么需要生成器控制異步流程在實(shí)際開發(fā)中異步操作通常嵌套在回調(diào)函數(shù)里。一旦要連續(xù)發(fā)起多個(gè)異步請(qǐng)求就會(huì)形成“回調(diào)地獄”setTimeout(() { console.log(第一步); setTimeout(() { console.log(第二步); setTimeout(() { console.log(第三步); }, 1000); }, 1000); }, 1000);這種代碼難以閱讀也難以維護(hù)。Promise通過.then()鏈?zhǔn)秸{(diào)用緩解了回調(diào)嵌套問題但本質(zhì)上仍然是“回調(diào)的變體”。async/await在ES2017引入用同步寫法寫異步邏輯解決了大部分問題。而Generator是夾在Promise和async/await之間的過渡方案。它通過yield暫停和next()恢復(fù)配合Promise的then回調(diào)完全可以實(shí)現(xiàn)類似async/await的效果。藍(lán)橋杯真題為了考察ES6的深度有時(shí)會(huì)刻意要求用Generator來寫異步流程。3.2 Generator Promise 的標(biāo)準(zhǔn)套路我們約定這樣一個(gè)異步任務(wù)傳入一個(gè)數(shù)字經(jīng)過1秒延遲后返回這個(gè)數(shù)字加1的結(jié)果。function asyncAdd(num) { return new Promise(resolve { setTimeout(() { resolve(num 1); }, 1000); }); }用Generator來串聯(lián)三次asyncAddfunction* task() { const a yield asyncAdd(1); console.log(第一次結(jié)果:, a); const b yield asyncAdd(a); console.log(第二次結(jié)果:, b); const c yield asyncAdd(b); console.log(第三次結(jié)果:, c); return c; } function run(generator) { const iterator generator(); function step(prevValue) { const result iterator.next(prevValue); if (result.done) { return result.value; } // result.value 是一個(gè) Promise Promise.resolve(result.value) .then(value { step(value); }) .catch(err { iterator.throw(err); }); } step(); } run(task);核心邏輯如下調(diào)用task()獲得迭代器第一次執(zhí)行iterator.next()函數(shù)體運(yùn)行到第一個(gè)yield asyncAdd(1)暫停返回一個(gè)Promise我們?cè)趕tep函數(shù)里拿到這個(gè)Promise調(diào)用.then()等待它完成異步完成后把結(jié)果作為iterator.next(value)的參數(shù)傳回去函數(shù)從暫停處恢復(fù)a就拿到了異步返回的值循環(huán)這個(gè)過程直到done為true。這個(gè)過程是不是很像await事實(shí)上async/await底層就可以理解為Generator 自動(dòng)執(zhí)行器的語法糖。上面的run函數(shù)就是一個(gè)手寫的最小版“自動(dòng)執(zhí)行器”。3.3 手動(dòng)寫一個(gè)可復(fù)用的run函數(shù)為了方便比賽時(shí)使用可以把上面的run函數(shù)封裝成一個(gè)通用方法。它能自動(dòng)驅(qū)動(dòng)一個(gè)內(nèi)部yield Promise的生成器函數(shù)function run(generator) { const it generator(); function handle(iteratorResult) { if (iteratorResult.done) { return; } const value iteratorResult.value; if (value instanceof Promise) { value .then(res handle(it.next(res))) .catch(err it.throw(err)); } else { handle(it.next(value)); } } handle(it.next()); }把這個(gè)函數(shù)放在代碼開頭后面任何一個(gè)需要“生成器 異步”的流程都可以直接使用。4. 真題模擬用ES6生成器異步產(chǎn)生隨機(jī)數(shù)4.1 題目設(shè)計(jì)與評(píng)分點(diǎn)我們把真題模擬成如下需求。題目描述開發(fā)一個(gè)Web頁面頁面上有一個(gè)按鈕。點(diǎn)擊按鈕后需要按照以下流程執(zhí)行模擬一次異步接口請(qǐng)求返回一個(gè)1到100之間的隨機(jī)數(shù)種子根據(jù)第一步的種子再發(fā)起一次異步請(qǐng)求生成3個(gè)10到99之間的隨機(jī)整數(shù)將最終生成的3個(gè)隨機(jī)數(shù)依次渲染到頁面列表中整個(gè)過程必須由Generator函數(shù)控制不能直接使用async/await不能直接在同步代碼中調(diào)用Math.random()生成最終結(jié)果。評(píng)分點(diǎn)可以拆成這樣是否定義并正確使用Generator函數(shù)是否把異步任務(wù)封裝成Promise;是否理解next()傳參能不能把上一次異步結(jié)果傳到下一次流程頁面是否能正常交互并渲染結(jié)果是否具備基本的錯(cuò)誤處理。注意“能計(jì)算出隨機(jī)數(shù)”只是加分項(xiàng)重點(diǎn)考察的是“異步流程控制”。如果你用async/await實(shí)現(xiàn)了能跑通但沒按要求用Generator在某些嚴(yán)格評(píng)分規(guī)則下會(huì)扣分。4.2 創(chuàng)建項(xiàng)目結(jié)構(gòu)這個(gè)案例不需要復(fù)雜工程一個(gè)HTML文件就可以完成全部演示。為了講解方便我們創(chuàng)建如下結(jié)構(gòu)generator-random/ └── index.html如果你想在命令行中先測(cè)試核心邏輯也可以拆出一個(gè)main.js用Node.js運(yùn)行。本文主要展示W(wǎng)eb頁面版本。4.3 編寫完整HTML頁面打開index.html輸入以下代碼!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title用ES6生成器異步產(chǎn)生隨機(jī)數(shù)/title style .container { max-width: 600px; margin: 50px auto; padding: 24px; border: 1px solid #e0e0e0; border-radius: 8px; font-family: Microsoft YaHei, sans-serif; } button { padding: 10px 20px; font-size: 16px; background-color: #2f54eb; color: #fff; border: none; border-radius: 4px; cursor: pointer; } button:disabled { background-color: #aaa; cursor: not-allowed; } .list { margin-top: 20px; padding: 0; list-style: none; } .list li { padding: 8px 12px; border: 1px solid #f0f0f0; border-radius: 4px; margin-bottom: 8px; background-color: #fafafa; } /style /head body div classcontainer h2ES6 Generator 異步隨機(jī)數(shù)生成器/h2 p點(diǎn)擊按鈕后模擬異步接口返回隨機(jī)數(shù)種子再基于種子生成3個(gè)隨機(jī)整數(shù)。/p button idgenerateBtn開始異步生成/button ul idresultList classlist/ul p idstatus stylecolor: #666;/p /div script // 模擬異步任務(wù) /** * 模擬異步接口延遲 delay 毫秒后返回?cái)?shù)據(jù) */ function mockAsync(data, delay 500) { return new Promise(resolve { setTimeout(() { resolve(data); }, delay); }); } /** * 模擬請(qǐng)求隨機(jī)數(shù)種子 */ function requestSeed() { // 種子范圍 1 ~ 100 const seed Math.floor(Math.random() * 100) 1; return mockAsync(seed, 800); } /** * 根據(jù)種子生成一個(gè)10~99的隨機(jī)整數(shù) */ function generateNumberBySeed(seed) { // 這里為了演示把 seed 參與計(jì)算 const base (seed * 9301 49297) % 233280; const num Math.floor((base / 233280) * 90) 10; return mockAsync(num, 500); } // 生成器流程控制 /** * 核心生成器函數(shù) * 1. 異步獲取種子 * 2. 基于種子異步生成3個(gè)隨機(jī)數(shù) * 3. 返回最終數(shù)組 */ function* randomFlow() { const seed yield requestSeed(); updateStatus(已獲取隨機(jī)種子: seed); const numbers []; for (let i 0; i 3; i) { const num yield generateNumberBySeed(seed i); numbers.push(num); updateStatus(正在生成第 (i 1) 個(gè)隨機(jī)數(shù)...); } return numbers; } /** * 生成器自動(dòng)執(zhí)行器 */ function run(generator) { const it generator(); function step(prevValue) { const result it.next(prevValue); if (result.done) { return result.value; } Promise.resolve(result.value) .then(res step(res)) .catch(err { console.error(異步流程出錯(cuò):, err); it.throw(err); }); } return step(); } // 頁面交互 const btn document.getElementById(generateBtn); const list document.getElementById(resultList); const status document.getElementById(status); function updateStatus(text) { status.textContent text; } function renderResult(numbers) { list.innerHTML ; numbers.forEach((num, index) { const li document.createElement(li); li.textContent 隨機(jī)數(shù) (index 1) num; list.appendChild(li); }); updateStatus(生成完成); } btn.addEventListener(click, function () { // 避免重復(fù)點(diǎn)擊 btn.disabled true; list.innerHTML ; updateStatus(開始執(zhí)行生成器流程...); run(randomFlow) .then(numbers { renderResult(numbers); }) .catch(err { updateStatus(生成失敗請(qǐng)查看控制臺(tái)); console.error(err); }) .finally(() { btn.disabled false; }); }); /script /body /html4.4 關(guān)鍵代碼解釋4.4.1 模擬異步任務(wù)mockAsync函數(shù)本質(zhì)上是對(duì)setTimeout的Promise封裝。真實(shí)比賽場(chǎng)景中這一步通常是一個(gè)axios請(qǐng)求或fetch()調(diào)用但核心思想是一樣的yield一個(gè)Promise讓生成器暫停等異步結(jié)果返回后繼續(xù)執(zhí)行。requestSeed和generateNumberBySeed都調(diào)用了mockAsync保證了“隨機(jī)數(shù)不是同步產(chǎn)生的”而是通過異步延遲返回。這樣才符合題目的“異步產(chǎn)生隨機(jī)數(shù)”要求。4.4.2 核心生成器流程const seed yield requestSeed();這一行代碼是關(guān)鍵。它做了三件事調(diào)用requestSeed()返回一個(gè)Promise;yield將這個(gè)Promise交給自動(dòng)執(zhí)行器生成器暫停等待異步返回自動(dòng)執(zhí)行器在resolve后調(diào)用next(seed)把種子值傳回seed變量。后面的for循環(huán)同理。每次迭代都會(huì)yield一個(gè)generateNumberBySeed(...)產(chǎn)生的Promise拿到結(jié)果后push到數(shù)組中。整個(gè)過程沒有回調(diào)嵌套代碼順序和同步代碼幾乎一樣。4.4.3 run自動(dòng)執(zhí)行器這次與上一節(jié)稍有不同run函數(shù)返回了step()的返回值而step()在result.done時(shí)返回result.value也就是生成器最終return的數(shù)組。這樣我們就可以在頁面中鏈?zhǔn)秸{(diào)用run(randomFlow).then(numbers { ... });自執(zhí)行器在這里起到了“內(nèi)部驅(qū)動(dòng)”的作用所以外層函數(shù)里不需要手動(dòng)調(diào)用next()。4.5 運(yùn)行與預(yù)期輸出直接用瀏覽器打開index.html點(diǎn)擊“開始異步生成”按鈕可以看到狀態(tài)文字顯示“開始執(zhí)行生成器流程...”大約800毫秒后顯示“已獲取隨機(jī)種子: 某個(gè)1~100的數(shù)”隨后每隔500毫秒顯示一次“正在生成第N個(gè)隨機(jī)數(shù)...”最后列表中出現(xiàn)3個(gè)隨機(jī)數(shù)狀態(tài)變?yōu)椤吧赏瓿伞??？刂婆_(tái)沒有任何異常頁面按鈕在流程執(zhí)行期間處于禁用狀態(tài)流程結(jié)束后恢復(fù)可點(diǎn)擊。這就是一套完整的“生成器 Promise 頁面渲染”的真題模擬實(shí)現(xiàn)。4.6 對(duì)比async/await寫法如果你熟悉async/await會(huì)發(fā)現(xiàn)生成器版本的流程和下面這段異步寫法幾乎一一對(duì)應(yīng)async function randomFlowAsync() { const seed await requestSeed(); const numbers []; for (let i 0; i 3; i) { const num await generateNumberBySeed(seed i); numbers.push(num); } return numbers; }對(duì)比可以看出對(duì)比項(xiàng)Generator 自動(dòng)執(zhí)行器async/await暫停語法yieldawait聲明方式function*async function返回結(jié)果迭代器對(duì)象Promise驅(qū)動(dòng)方式需要手動(dòng)寫執(zhí)行器引擎自動(dòng)驅(qū)動(dòng)兼容性ES6ES2017代碼可讀性門檻稍高寫法靈活直觀、推薦日常使用比賽時(shí)如果題目明確要求用生成器就應(yīng)該寫Generator方案如果沒要求日常項(xiàng)目開發(fā)更推薦async/await。5. 常見問題與排查思路5.1 常見報(bào)錯(cuò)與解決思路問題現(xiàn)象常見原因解決思路點(diǎn)擊按鈕后無任何反應(yīng)沒有調(diào)用next()或生成器沒有正確啟動(dòng)檢查是否通過自執(zhí)行器或手動(dòng)it.next()啟動(dòng)流程yield后面的Promise結(jié)果拿不到?jīng)]有把next(res)的返回值傳回生成器調(diào)用.then(res it.next(res))把結(jié)果傳回去生成的隨機(jī)數(shù)順序錯(cuò)亂可能在.then中直接使用外部變量而不是通過next傳參把結(jié)果統(tǒng)一從next參數(shù)傳回函數(shù)體頁面卡死按鈕無法再次點(diǎn)擊沒有處理按鈕禁用和恢復(fù)邏輯流程結(jié)束后通過.finally()恢復(fù)按鈕it.next()返回{value: undefined}yield后面沒有返回值或返回的是非Promise值保證yield表達(dá)式返回一個(gè)Promise使用for...of遍歷生成器時(shí)異步操作沒有生效for...of只能遍歷同步迭代器不能等待Promise完成使用自執(zhí)行器配合next傳參5.2 排查清單如果你在比賽中遇到生成器相關(guān)代碼運(yùn)行不符合預(yù)期可以按下面順序排查第一步確認(rèn)生成器函數(shù)聲明為function*并且調(diào)用時(shí)返回的是迭代器第二步確認(rèn)yield后面跟的是Promise對(duì)象而不是一個(gè)普通數(shù)字第三步確認(rèn)自執(zhí)行器中是否調(diào)用it.next(prevValue)傳回上一次結(jié)果第四步確認(rèn)異步失敗時(shí)是否調(diào)用it.throw(err)否則錯(cuò)誤會(huì)丟失第五步確認(rèn)最終結(jié)果是通過return返回的而不是只打印到控制臺(tái)第六步確認(rèn)頁面交互事件里是否處理了按鈕防重復(fù)點(diǎn)擊。按這個(gè)順序排查大多數(shù)生成器異步流程問題都能定位。6. 藍(lán)橋杯實(shí)戰(zhàn)最佳實(shí)踐6.1 手寫自執(zhí)行器很有必要雖然比賽可以只寫Generator函數(shù)由自己封裝一個(gè)run函數(shù)來驅(qū)動(dòng)但不要只背代碼要理解自執(zhí)行器的兩個(gè)核心行為result.done為false時(shí)等待yield出的Promise完成完成之后把結(jié)果作為next()參數(shù)傳回生成器。建議在備賽時(shí)手寫三遍自執(zhí)行器直到能默寫出來。這樣即使遇到變種的題目比如yield后面不只有Promise還有普通值也能靈活調(diào)整。6.2 異步任務(wù)統(tǒng)一封裝成Promise在真題模擬中我們用了mockAsync來統(tǒng)一封裝異步任務(wù)。真實(shí)比賽里如果遇到類似“模擬數(shù)據(jù)請(qǐng)求”“定時(shí)器延遲”的場(chǎng)景建議都先封裝成Promise函數(shù)再放到生成器里yield。這樣做有兩個(gè)好處第一讓生成器函數(shù)的代碼保持干凈第二自執(zhí)行器只需要處理Promise一種情況即可邏輯更簡(jiǎn)單。6.3 注意變量命名與代碼注釋藍(lán)橋杯Web應(yīng)用開發(fā)題目的代碼量通常不小閱卷時(shí)對(duì)手寫代碼的清晰度有一定要求。建議生成器函數(shù)統(tǒng)一使用Flow、Task結(jié)尾自執(zhí)行器統(tǒng)一使用run異步任務(wù)統(tǒng)一使用request、fetch、load開頭這樣閱卷人一眼就能理解你的代碼結(jié)構(gòu)。yield的含義本身就是“讓出控制權(quán)”在關(guān)鍵yield行前面加一行注釋說明這一行暫停等待什么數(shù)據(jù)能有效降低后續(xù)維護(hù)成本。6.4 不要忽略錯(cuò)誤處理有些同學(xué)寫生成器異步流程時(shí)只處理了resolve分支沒有處理reject分支。真實(shí)題目中如果要求“異步獲取隨機(jī)數(shù)失敗后用兜底值”就必須在自執(zhí)行器里調(diào)用it.throw(error)把異常交回生成器內(nèi)部處理。在Web頁面中還要注意異步流程期間要禁用按鈕流程結(jié)束無論成功失敗都要恢復(fù)按鈕。否則用戶連點(diǎn)多次會(huì)出現(xiàn)多個(gè)生成器流程同時(shí)執(zhí)行頁面狀態(tài)混亂。6.5 兼容性與運(yùn)行環(huán)境Generator是ES6特性現(xiàn)代瀏覽器和Node.js 12都支持。如果你在比賽環(huán)境中不確定瀏覽器版本可以先在頁面頂部加一段簡(jiǎn)單的兼容性判斷if (typeof function* () {} ! function) { alert(當(dāng)前瀏覽器不支持Generator請(qǐng)更換瀏覽器); }當(dāng)然藍(lán)橋杯機(jī)試環(huán)境通常沒問題但這個(gè)檢查在真實(shí)項(xiàng)目上線時(shí)很有價(jià)值。7. 總結(jié)本文圍繞“用ES6生成器異步產(chǎn)生隨機(jī)數(shù)”這一模擬真題從生成器函數(shù)的基礎(chǔ)語法講到了完整的Web頁面實(shí)現(xiàn)。核心收獲有三個(gè)第一生成器通過yield暫停函數(shù)執(zhí)行通過next()恢復(fù)并傳參這種特性天然適合控制異步流程第二生成器本身不會(huì)自動(dòng)等待異步任務(wù)必須配合一個(gè)自執(zhí)行器把yield出來的Promise結(jié)果通過next傳回去才能實(shí)現(xiàn)類似await的效果第三涉及“異步產(chǎn)生隨機(jī)數(shù)”這類題考察重點(diǎn)不是隨機(jī)算法而是異步流程控制能力平時(shí)可以把Generator Promise的寫法練熟比賽中遇到才能從容應(yīng)對(duì)。下一步你可以嘗試把yield后面改成fetch請(qǐng)求模擬一個(gè)“從接口獲取隨機(jī)數(shù)”的真實(shí)場(chǎng)景或者把生成的隨機(jī)數(shù)進(jìn)一步做可視化展示比如散點(diǎn)圖、柱狀圖。理解了生成器異步控制的核心后這些擴(kuò)展都不會(huì)太難。如果本文對(duì)你有幫助建議收藏備用。備賽期間多動(dòng)手寫幾遍代碼比一直看教程有效得多。