> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/js/iteration.md).

# iteration

[JS](/web/js.md) ⟩ iteration

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

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

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

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

{% tab title="🗺️ 圖解" %} <img src="/files/wJwFqzHQLyJDeKPLxv02" 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 %}