ES6---對yield和yield*的理解

sourcenode 發布于2019-08-23 11:29 / 2829人閱讀

摘要：概念和都是配合進行使用的。雖然有些混亂，但是如果打斷點來看的話會更加清晰。是表達式，因此又返回值，其語法如下是可遍歷對象，可以是數組，也可以是另外一個函數的執行表達式，等等其實說簡單點，就是將多個語句根據某種規則合并為一個，示例如下

概念

yield和yield*都是配合Generator進行使用的。

yield

yield是關鍵字，其語法如下：

[rv] = yield [expression];

expression：是Generator函數返回的遍歷器對象調用next方法是所得到的值；

rv：是遍歷其對象調用next方法是傳遞給next方法的參數

這里要簡單的說一下next方法，其語法如下：

gen.next(value)

value：傳遞給Generator函數的值，也就是上文中的rv

這里比較有意思的就是傳遞給next方法的值value，下面通過例子來看一下：

function* _testYieldExpression(){
    let value = "";
    value = yield "yield value";
    console.info(`1 value is: ${value}`);//輸出1

    value = yield "yield value";
    console.info(`2 value is: ${value}`);//輸出2
    return "over";
}

let _testIterator = _testYieldExpression();
let _res = _testIterator.next();
console.info(`1:no params to next, result is: ${_res.value}`);//輸出3

_res = _testIterator.next("params from next");
console.info(`2:params to next, result is: ${_res.value}`);//輸出4

_res = _testIterator.next();
console.info(`3:params to next, result is: ${_res.value}`);//輸出    512345678910111213141516171819

輸出如下：

1:no params to next, result is: yield value
1 value is: params from next
2:params to next, result is: yield value
2 value is: undefined
3:params to next, result is: over12345

注釋中標記了幾個輸出語句，

輸出1

是在第二次調用next方法是執行，可以看到，此時的value值是傳遞給next方法的參數，但是在_testYieldExpression函數中可以看到value = yield yield value，所以可以理解為，在第一次執行next函數的時候，語句yield yield value沒有返回值，并且沒有賦值給value，而在第二次調用next時，才將next函數的參數賦值給value。雖然有些混亂，但是如果打斷點來看的話會更加清晰。

yield*

yield*是表達式，因此又返回值，其語法如下：

yield* [[expression]];

expression：是可遍歷對象，可以是數組，也可以是另外一個Generator函數的執行表達式，等等

其實說簡單點，就是將多個yield語句根據某種規則合并為一個，示例如下：

function* g3() {
  yield* [1, 2];
  yield* "34";
  yield* Array.from(arguments);
}

var iterator = g3(5, 6);

console.log(iterator.next()); // {value: 1, done: false}
console.log(iterator.next()); // {value: 2, done: false}
console.log(iterator.next()); // {value: "3", done: false}
console.log(iterator.next()); // {value: "4", done: false}
console.log(iterator.next()); // {value: 5, done: false}
console.log(iterator.next()); // {value: 6, done: false}
console.log(iterator.next()); // {value: undefined, done: true}

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97032.html

深入理解 Generator 函數

摘要：同時，迭代器有一個方法來向函數中暫停處拋出一個錯誤，該錯誤依然可以通過函數內部的模塊進行捕獲處理。本文翻譯自：Diving Deeper With ES6 Generators 由于個人能力有限，翻譯中難免有紕漏和錯誤，望不吝指正issue ES6 Generators:完整系列 The Basics Of ES6 Generators Diving Deeper With E...

jzzlee 2019-08-20 18:34 評論0 收藏0
ES6學習筆記之Generator函數

摘要：調用函數后和普通函數不同的是，該函數并不立即執行，也不返回函數執行結果，而是返回一個指向內部狀態的對象，也可以看作是一個遍歷器對象。第一個只是用來啟動函數內部的遍歷器，傳參也沒有多大意義。之前斷斷續續接觸到了一些ES6的知識，異步編程方面聽得比較多的就是Promise，直到最近比較系統地學習了ES6的新特性才發現Generator這個神奇的存在，它可以實現一些前所未有的事情，讓我頓時...

cjie 2019-08-21 14:52 評論0 收藏0
ES6 之 Iterator&Generator

摘要：可迭代對象就具有屬性，它是一種與迭代器密切相關的對象。它通過指定的函數可以返回一個作用于附屬對象的迭代器。迭代器特點每次調用方法時，返回一個數組，數組中兩個元素，分別表示鍵和值。示例之輸出輸出輸出之迭代器特點返回集合中存在的每一個鍵。 Iterator由來不推薦Iterator方法。 Iterator 函數是一個 SpiderMonkey 專有特性，并且會在某一時刻被刪除。有一點，需...

xietao3 2019-08-23 18:40 評論0 收藏0
理解 es5 開始有的 yield 和 es6 開始有的 aysnc/await

摘要：始最近的業余時間在看相關的書也在極客時間上買了前端相關的專欄對于一個非的人來說時時會有一種感覺社區是真的激進和浮燥這幫規則的制定者似乎從來也不知道克制為何物有很多時候固有的東西是可以處理好的但是偏偏喜歡人為制造一些概念和語法糖人為的建起一座始最近的業余時間在看 js 相關的書, 也在極客時間上買了前端相關的專欄, 對于一個非 jser 的人來說, 時時會有一種感覺: js 社區是真...

NicolasHe 2019-08-23 16:07 評論0 收藏0
深入理解Generator

摘要：如果你已經理解基礎可以直接跳過這部分和語法部分，直接看深入理解的部分。的參數可以傳入一個參數，來作為上一次的表達式的返回值，就像我們上面說的會讓等于。這篇文章旨在幫你真正了解Generator，文章較長，不過如果能花時間耐心看完，相信你已經能夠完全理解generator 為什么要用generator 在前端開發過程中我們經常需要先請求后端的數據，再用拿來的數據進行使用網頁頁面渲染等操...

Euphoria 2019-08-26 11:43 評論0 收藏0