# iteration

[JS](https://lochiwei.gitbook.io/web/js) ⟩ iteration

{% hint style="success" %} <mark style="color:yellow;">**three types**</mark> that are related to <mark style="color:purple;">**iteration**</mark>：

* [iterable](https://lochiwei.gitbook.io/web/js/iteration/iterable "mention") - object that <mark style="color:yellow;">**can**</mark> [**make iterators**](https://lochiwei.gitbook.io/web/js/iteration/iterable/make-iterator-method) to loop over itself.
* [iterator](https://lochiwei.gitbook.io/web/js/iteration/iterator "mention") - object that <mark style="color:yellow;">**can**</mark> [**produce the next iteration result**](https://lochiwei.gitbook.io/web/js/iteration/iterator/next).
* [iteration-result](https://lochiwei.gitbook.io/web/js/iteration/iteration-result "mention") - object that holds the [**result**](https://lochiwei.gitbook.io/web/js/iteration/iteration-result) <mark style="color:yellow;">**of**</mark>**&#x20;**<mark style="color:orange;">**each step**</mark> of the iteration.
  {% endhint %}

{% tabs %}
{% tab title="🔴 主題" %}

* <mark style="color:yellow;">**custom extension**</mark>
  * [iterable+ext](https://lochiwei.gitbook.io/web/js/iteration/iterable+ext "mention")
* [loop](https://lochiwei.gitbook.io/web/js/grammar/statement/loop "mention") <mark style="color:yellow;">**statements for iterations**</mark>
  * [for](https://lochiwei.gitbook.io/web/js/grammar/statement/loop/for/for "mention") / [in](https://lochiwei.gitbook.io/web/js/grammar/statement/loop/for/in "mention") / [of](https://lochiwei.gitbook.io/web/js/grammar/statement/loop/for/of "mention") / [await](https://lochiwei.gitbook.io/web/js/grammar/statement/loop/for/await "mention")
  * [while](https://lochiwei.gitbook.io/web/js/grammar/statement/loop/while "mention"), [do...while](https://lochiwei.gitbook.io/web/js/grammar/statement/loop/do...while "mention")
* [iterable](https://lochiwei.gitbook.io/web/js/iteration/iterable "mention")
  * [make-iterator-method](https://lochiwei.gitbook.io/web/js/iteration/iterable/make-iterator-method "mention")
  * [only-iterate-once](https://lochiwei.gitbook.io/web/js/iteration/iterable/only-iterate-once "mention")
  * [make-iterables](https://lochiwei.gitbook.io/web/js/iteration/iterable/make-iterables "mention")
  * [make-iterable](https://lochiwei.gitbook.io/web/js/iteration/iterator/make-iterable "mention")
  * [custom](https://lochiwei.gitbook.io/web/js/iteration/iterable/custom "mention")
* [iterator](https://lochiwei.gitbook.io/web/js/iteration/iterator "mention")
  * [next](https://lochiwei.gitbook.io/web/js/iteration/iterator/next "mention") - iterators must implement next() method.&#x20;
  * [make-iterator-method](https://lochiwei.gitbook.io/web/js/iteration/iterable/make-iterator-method "mention") of an [iterable](https://lochiwei.gitbook.io/web/js/iteration/iterable "mention") - iterables can make iterators.
  * [iterators-only-iterate-once](https://lochiwei.gitbook.io/web/js/iteration/iterator/iterators-only-iterate-once "mention") - iterators only iterate once.
  * [iterable](https://lochiwei.gitbook.io/web/js/iteration/iterator/iterable "mention") - an **iterator** that is itself [iterable](https://lochiwei.gitbook.io/web/js/iteration/iterable "mention").
  * [make-iterable](https://lochiwei.gitbook.io/web/js/iteration/iterator/make-iterable "mention")
  * [iteratorprototype](https://lochiwei.gitbook.io/web/js/iteration/iterator/iteratorprototype "mention") - [prototype](https://lochiwei.gitbook.io/web/js/val/obj/proto) of all <mark style="color:orange;">**built-in**</mark>**&#x20;**<mark style="color:yellow;">**iterators**</mark>.
  * [iterator](https://lochiwei.gitbook.io/web/js/iteration/iterator/iterator "mention") - <mark style="color:yellow;">**extension**</mark> for (<mark style="color:orange;">**built-in**</mark>) <mark style="color:yellow;">**iterators**</mark>.
* [iteration-result](https://lochiwei.gitbook.io/web/js/iteration/iteration-result "mention")
* [iteration](https://lochiwei.gitbook.io/web/js/iteration "mention")
  * **three types** that are related to the [iteration](https://lochiwei.gitbook.io/web/js/iteration "mention").
    * [iterable](https://lochiwei.gitbook.io/web/js/iteration/iterable "mention") - object that <mark style="color:yellow;">**can be**</mark>**&#x20;**<mark style="color:orange;">**iterated**</mark>.
    * [iterator](https://lochiwei.gitbook.io/web/js/iteration/iterator "mention") - object that <mark style="color:yellow;">**performs the**</mark>**&#x20;**<mark style="color:orange;">**iteration**</mark>.
    * [iteration-result](https://lochiwei.gitbook.io/web/js/iteration/iteration-result "mention") - object that holds the <mark style="color:yellow;">**result of**</mark>**&#x20;**<mark style="color:orange;">**each step**</mark> of the iteration.
  * [generator](https://lochiwei.gitbook.io/web/js/iteration/generator "mention") - objects returned by [func](https://lochiwei.gitbook.io/web/js/iteration/generator/func "mention").
  * [func](https://lochiwei.gitbook.io/web/js/iteration/generator/func "mention") - return [Broken link](https://lochiwei.gitbook.io/web/js/broken-reference "mention").
  * [examples](https://lochiwei.gitbook.io/web/js/iteration/generator/examples "mention")
    {% endtab %}

{% tab title="⭐️ 重點" %}
{% hint style="info" %}
to iterate an [iterable](https://lochiwei.gitbook.io/web/js/iteration/iterable "mention") object (<mark style="color:red;">**the hard way**</mark>)：

1. call [iterable](https://lochiwei.gitbook.io/web/js/iteration/iterable "mention") object's [<mark style="color:yellow;">**iterator method**</mark>](https://lochiwei.gitbook.io/web/js/iteration/iterable/make-iterator-method) to get an [iterator](https://lochiwei.gitbook.io/web/js/iteration/iterator "mention").
2. call the [iterator](https://lochiwei.gitbook.io/web/js/iteration/iterator "mention")'s <mark style="color:blue;">**next()**</mark> method repeatedly until the [iteration-result](https://lochiwei.gitbook.io/web/js/iteration/iteration-result "mention") is <mark style="color:yellow;">**done**</mark>.
   {% endhint %}
   {% endtab %}

{% tab title="🗺️ 圖解" %} <img src="https://2527454625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MfvEFZnSBhKT6fJmus0%2Fuploads%2FLDbsdTPR3ENAv8P81akq%2Fiteration-related-types.svg?alt=media&#x26;token=6c6da705-70d0-4fd6-97b8-5663b3d61f2d" alt="" class="gitbook-drawing">
{% endtab %}

{% tab title="💈範例" %}
:floppy\_disk: replit：[iterator](https://replit.com/@pegasusroe/iterator#index.js)

```javascript
let iterable = [1, 2, 3];

// ⭐️ iterate an iterable "the hard way"
let iterator = iterable[Symbol.iterator]();  // ⭐️ 1. make an iterator
let result = iterator.next();                // ⭐️ 2. first result

while (!result.done) {
    console.log(result.value);
    result = iterator.next();                // call next() repeatedly
}

// ⭐️ the easy way
for (const i of iterable) { console.log(i) } // 1, 2, 3
```

{% endtab %}

{% tab title="📘 手冊" %}

* [ ] [Statements and declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) ⟩ [iterations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements#iterations)
* [ ] [Iterators and generators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators)
  * [ ] [iterable protocol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol)
  * [ ] [Generator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator)
* [ ] [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration)
  * [ ] [for...of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of)
* [ ] [Symbol.iterator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator) ( = makeIterator in Swift )
  {% endtab %}

{% tab title="📗 參考" %}

* [ ] ExploringJS ⟩ [21. Iterables and Iterators](https://exploringjs.com/es6/ch_iteration.html) ⭐️
* [ ] JavaScript: The Definitive Guide ⟩ 12. Iterators and Generators
* [ ] JS.info ⟩&#x20;
  * [ ] [iterables](https://javascript.info/iterable)
  * [ ] [Generators](https://javascript.info/generators)
* [ ] 2ality ⟩ [JavaScript needs more helper functions for iteration (map, filter, etc.)](https://2ality.com/2021/08/iteration-helpers.html)
* [x] [認識 JavaScript Iterable 和 Iterator](https://jiepeng.me/2018/04/19/iterable-and-iterator-in-javascript)
  {% endtab %}
  {% endtabs %}