> 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 %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://lochiwei.gitbook.io/web/js/iteration.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.