ES6 的 for..of 和 Generator，從偽數組 jQuery 對象說起

Harriet666 發布于2019-08-21 10:39 / 1994人閱讀

摘要：引用自可迭代對象和迭代器不以規矩，不成方圓為了使某個對象成為可迭代對象象，它必須實現方法，也就是說，它得有一個是的屬性。的遍歷，絕對應該用。

pseudo
英 ["sju:d??] 美 ["su:do?]
adj.假的，虛偽的
n.[口]假冒的人，偽君子
pseudo-array
英 [s"ju:d???r"e?] 美 [s"ju:d???r"e?]
[計] 偽數組

jQuery 對象是偽數組 兩個事實

不管以前知道不知道，至少馬上會知道

jQuery 對象是一個偽數組。

var $obj = jQuery();
Array.isArray($obj);    // false

jQuery.fn 是 jQuery.prototype 的簡寫

jQuery.fn === jQuery.prototype;    // true

提出問題

既然 jQuery 對象是偽數組，那 ES6 的 for...of 想用在 jQuery 對象上就不會那么順利。畢竟 jQuery 還沒有按 ES6 重寫。

那么，想用 for..of 遍歷 jQuery 對象中的 DOM 引用，就自己實現吧——這得從 iterable 和 iterator 開始。

The for...of statement creates a loop Iterating over iterable objects (including Array, Map, Set, arguments object and so on), invoking a custom iteration hook with statements to be executed for the value of each distinct property.

引用自：for...of statement | MDN

iterable（可迭代對象）和 iterator（迭代器） 不以規矩，不成方圓

為了使某個對象成為可迭代對象象，它必須實現 @@iterator 方法，也就是說，它得有一個 key 是 Symbol.iterator 的屬性。說人話，就是必須得實現這么個東東：

jQuery.fn[Symbol.iterator] = ....

而這個所謂的 @@iterator 方法，返回的是一個迭代器。迭代器這活也不是隨便誰都能干的，它必須得有一個 next() 方法，而這個 next() 方法每次調用，都返回下一個迭代對象。

當然迭代對象也是有標準的，它必須是這么個結構：

{
    done: "(boolean)，true 表示迭代完成，false 表示還有下一個",
    value: "這個才是正主，for...of 迭代出來的值"
}

注意 done 這個小坑，其它語言中通常是用 hasNext() 或者 hasMore() 之類的來判斷是否有下一個值，而 javascript 是用 done 來判斷，它們的邏輯意思正好相反，所以千萬注意不要給錯了值。

注：Symbol 是 ES6 中引入的新的鍵類型。之前的鍵類型只能是字符串，而在 ES6 中，有兩種了。關于 Symbol，可以參閱【探秘ES6】系列專欄（八）：JS的第七種基本類型Symbols 和 Symbol - JavaScript | MDN

實現

知道了規矩，實現起來就好辦了

jQuery.fn[Symbol.iterator] = function() {
    return (function(_this) {
        var index = 0;
        return {
            next: function() {
                return {
                    done: index >= _this.length,
                    value: _this[index++]
                };
            }
        };
    })(this);
};

測試

for (var dom in $("div")) {
    console.log(dom);
}

正確執行，通過……話雖如此，代碼寫起來好累。所以，其實應該用 Generator……

Generator

ES6 的又一新特性，Generator 對象（生成器對象），簡直就是為迭代而生的。每個生成器對象都符合上面提到的 iterable 和 iterator 兩個規矩。換句話說，生成器對象既是一個可迭代對象，又是一個迭代器，而它作為可迭代對象的時候，返回的迭代器就是它自己。

然而生成器對象并不是 new 出來的，而是通過 generator function（生成器函數）生成的；生成器函數得自己寫，又不能 new Generator()，那么這個生成器對象從哪里來呢？當然是生成器函數生成的，而且這會用到新語法，以及新的關鍵字 yield。

generator function（生成器函數）和 yield

生成器函數的定義與普通函數略有不同，形式上的區別是，它在 function 關鍵字后加了一個 * 號，就像這樣：

function *aGenerator() { ... }

生成器函數在內容上的區別就是，它的內容其實并不是它自己的內容，而是描述了它產生生成器對象的行為。

有點亂，來捋一捋：

生成器函數返回一個生成器對象

生成器對象是一個迭代器

生成器對象也是一個可迭代對象，每次迭代返回自己（這句暫時忽略）

迭代器有一個 next() 方法用來返回迭代值（以及判斷是否完成迭代）

捋清楚了，來說生成器函數的內容——其實就是干上面最后一條描述的事情：描述每次迭代返回的值，以及是否完成迭代。這是與普通 function 完全不同的語法，它是怎么做到的呢？憑空說起來太吃力，先上代碼

function *aGenerator() {
    yield 1;
    yield 2;
    yield 3;
}

每次 yield，就相當于一次通過 next() 返回值，也就上面提到的迭代對象的 value 屬性。那么 done 屬性如何確定呢？如果從生成器函數返回，就 done 了。這有兩種情況，一種是自然執行完所有語法，函數結束返回；另一種是在函數體中調用 return 返回。

新問題：眼看例中 3 個 yield 語句排在一起，不是“啪啪啪”一下子就搞完了？最后就 next() 出來一個 3 了事？

非也，yield 返回值與 return 不同。yield 反回值（也就是 next()）之后會將代碼暫停在那個位置，等下一次 next() 的時候，繼續執行，到下一個 yield 再暫停……如此直到顯示或隱匿的 return。

改進的 jQuery.fn[Symbol.iterator]

jQuery.fn[Symbol.iterator] = function*() {
    for (var i = 0; i < this.length; i++) {
        yield this[i];
    }
};

比上一個實現簡單了不少吧，但是你以為這是最簡單的么……

巧妙的實現 更簡單的實現

除了可以用 yield 返回值之外，還可以用 yield *返回可迭代對象。這時，控制權會暫時交給這個可迭代對象，由它接替實現 next()，直到 done，再由當前生成器函數中的下一個 yield 接手繼續。形象一點的理解——這個過程有點像樹型結構的深度遍歷。

因為原生數組也是可迭代對象，所以可以取個巧

jQuery.fn[Symbol.iterator] = function*() {
    yield *[].slice.call(this);
};

最簡單的實現

上面說了一通，用了 N 種方法，無非是講解 ES6 的新特性而已。要為 jQuery 實現 for...of 遍歷，最簡單的方法其實是拿來主義：

jQuery.fn[Symbol.iterator] = [][Symbol.iterator];

最后的提醒

jQuery 對象是一個偽數組，它的每一個元素都是一個 DOM（或原對象）而不是被封裝的 jQuery 對象，所以，用 for..of 遍歷的時候，和用 jQuery.fn.each() 遍歷一樣，如果想繼續在每個元素上使用 jQuery 的特性，就要記得用 jQuery() 包裝。

// for...of
for (var dom in $("span")) {
   var $span = $(dom);
}

// jQuey.fn.each
$("span").each(function() {
    var $span = $(this);
});

鄭重致歉

其實，我不小心又騙了大家。jQuery 壓根沒有實現 for...of 的必要，即使沒有 ES6，用 for...in 遍歷 jQuery 對象也是一件很悲催的事情，不信你試試。

jQuery 的遍歷，絕對應該用 jQuery.fn.each()。

但是，看在我要以此為例來說 ES6 的幾樣新特性的份上，原諒我吧！^_^!

參考

ECMAScript 6 Features

Iteration protocls - JavaScript | MDN

Generator - JavaScript | MDN

GPU云服務器云服務器 for...of Jquery對象數組 js 創建數組和對象 php的對象轉數組

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

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

集合數據處理（C#、JavaScript 和 Java）

摘要：系列公用委托都用于委托帶有返回值的的方法，所有都是最后一個參數代表返回值類型。的字面對象據稱也是哈希實現。 Java 丟了好多年，最近在揀起來，首先當然是了解這么多年來它的變化，于是發現了 Java 8 的java.util.stream。在學習和試驗的過程中，相比較于 C# 和 javascript，有那么些心得，作文以記之。早些時間寫過一篇《ES6 的 for..of 和 Ge...

zacklee 2019-08-14 14:39 評論0 收藏0
集合數據處理（C#、JavaScript 和 Java）

摘要：系列公用委托都用于委托帶有返回值的的方法，所有都是最后一個參數代表返回值類型。的字面對象據稱也是哈希實現。 Java 丟了好多年，最近在揀起來，首先當然是了解這么多年來它的變化，于是發現了 Java 8 的java.util.stream。在學習和試驗的過程中，相比較于 C# 和 javascript，有那么些心得，作文以記之。早些時間寫過一篇《ES6 的 for..of 和 Ge...

sherlock221 2019-08-22 10:38 評論0 收藏0
從forEach到迭代器

摘要：本文從使用對數組進行遍歷開始說起，粗略對比使用進行遍歷的差異，并由此引入中可迭代對象迭代器的概念，并對其進行粗略介紹。說到這里，就繼續說一下迭代器關閉的情況了。確實，符合可迭代協議和迭代器協議的。本文從使用 forEach 對數組進行遍歷開始說起，粗略對比使用 forEach , for...in , for...of 進行遍歷的差異，并由此引入 ES6 中可迭代對象/迭代器的概...

rockswang 2019-08-23 12:36 評論0 收藏0
JavaScript 設計模式（五）：迭代器模式

摘要：文章內容分兩部分前半部分為迭代器模式概念后半部分為中迭代器上半部分開始迭代器模式提供一種方法順序訪問一個聚合對象中的各個元素，而又不需要暴露該對象的內部表示。下半部分開始的迭代器迭代器等同于遍歷器。執行該函數，會返回一個遍歷器對象。 showImg(https://segmentfault.com/img/bVbuyaZ?w=800&h=600); 文章內容分兩部分：前半部分為迭...

zhou_you 2019-08-23 18:26 評論0 收藏0
【JS基礎】從JavaScript中的for...of說起(上) - iterator 和 gene

摘要：當這個迭代器的方法被首次后續調用時，其內的語句會執行到第一個后續出現的位置為止，后緊跟迭代器要返回的值。在這個回調函數里，我們使用第一個請求返回的，再次發起一個請求。寫在前面本文首發于公眾號：符合預期的CoyPan 后續文章：【JS基礎】從JavaScript中的for...of說起(下) - async和await 先來看一段很常見的代碼： const arr = [1, 2, ...

wslongchen 2019-08-23 16:48 評論0 收藏0