> 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/iterator/iterable.md).

# iterable iterator

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

{% hint style="success" %}
an [iterator](/web/js/iteration/iterator.md) that is itself [iterable](/web/js/iteration/iterable.md).  (an <mark style="color:yellow;">**iterator**</mark> can easily be [**iterable**](/web/js/iteration/iterable.md) by simply <mark style="color:yellow;">**returning itself**</mark> in its [**"make-iterator" method**](/web/js/iteration/iterable/make-iterator-method.md))
{% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="danger" %}
[iterator](/web/js/iteration/iterator.md)s [only iterate once](/web/js/iteration/iterator/iterators-only-iterate-once.md)❗️
{% endhint %}

{% hint style="success" %} <mark style="color:yellow;">**iterable iterators**</mark>：

* array.[keys()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/keys), map.[entries()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/entries), ...
* [str.matchAll()](/web/js/val/prim/str/method/str.matchall.md) - iterable iterator of <mark style="color:yellow;">**all matches**</mark>.&#x20;
* [Broken mention](broken://pages/wdsR1aBto2o3YMiF3HsH)s returned by [generator function](/web/js/iteration/generator/func.md).
* [iterator](/web/js/iteration/iterator.md) of <mark style="color:orange;">**all**</mark> [built-in](/web/js/val/builtin.md) [iterable](/web/js/iteration/iterable.md) data types.
  {% endhint %}
  {% endtab %}

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

* [Broken mention](broken://pages/wdsR1aBto2o3YMiF3HsH)s are iterable iterators.
* [make iterator iterable](/web/js/iteration/iterator/make-iterable.md)
* <mark style="color:yellow;">**examples**</mark>：
  * [words in sentence](/web/js/val/prim/str/method/str.matchall/words-in-sentence.md) - [str.matchAll()](/web/js/val/prim/str/method/str.matchall.md) returns an iterable iterator.
  * [\*list()](/web/js/iteration/generator/examples/list.md)
  * [\*integers()](/web/js/iteration/generator/examples/integers.md)
    {% 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&amp;token=6c6da705-70d0-4fd6-97b8-5663b3d61f2d" alt="" class="gitbook-drawing">
{% endtab %}

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

```javascript
let array = [1, 2, 3];                         // Array is iterable

// ⭐️ make an iterator
let iterator = array[Symbol.iterator]();

// first iteration result
let head = iterator.next();                    // { value: 1, done: false }

// ----------------------------
//     ⭐️ iterable iterator
// ----------------------------

// the iterator of a built-in iterable object is itself "iterable", i.e. it can:
// ⭐️ 1. spread itself into array elements or function arguments.
// ⭐️ 2. make an iterator for itself. (in fact, the iterator === itself)

// ⭐️ 1. spread itself into array elements
let tail = [...iterator];                      // [ 2, 3 ] ⭐️ 

// ⭐️ 2. make an iterator for itself
let it = iterator[Symbol.iterator]();

// ⭐️ 2. the iterator of the `iterator` is the `iterator` itself.
it === iterator;        // true❗
```

{% endtab %}

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

* [iterator protocol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterator_protocol)
  {% endtab %}
  {% endtabs %}