# iterable iterator

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

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

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="danger" %}
[](https://lochiwei.gitbook.io/web/js/iteration/iterator "mention")s [only iterate once](https://lochiwei.gitbook.io/web/js/iteration/iterator/iterators-only-iterate-once)❗️
{% 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](https://lochiwei.gitbook.io/web/js/val/prim/str/method/str.matchall "mention") - iterable iterator of <mark style="color:yellow;">**all matches**</mark>.&#x20;
* [Broken link](https://lochiwei.gitbook.io/web/js/iteration/iterator/broken-reference "mention")s returned by [func](https://lochiwei.gitbook.io/web/js/iteration/generator/func "mention").
* [](https://lochiwei.gitbook.io/web/js/iteration/iterator "mention") of <mark style="color:orange;">**all**</mark> [built-in](https://lochiwei.gitbook.io/web/js/val/builtin) [iterable](https://lochiwei.gitbook.io/web/js/iteration/iterable "mention") data types.
  {% endhint %}
  {% endtab %}

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

* [Broken link](https://lochiwei.gitbook.io/web/js/iteration/iterator/broken-reference "mention")s are iterable iterators.
* [make-iterable](https://lochiwei.gitbook.io/web/js/iteration/iterator/make-iterable "mention")
* <mark style="color:yellow;">**examples**</mark>：
  * [words-in-sentence](https://lochiwei.gitbook.io/web/js/val/prim/str/method/str.matchall/words-in-sentence "mention") - [str.matchall](https://lochiwei.gitbook.io/web/js/val/prim/str/method/str.matchall "mention") returns an iterable iterator.
  * [list](https://lochiwei.gitbook.io/web/js/iteration/generator/examples/list "mention")
  * [integers](https://lochiwei.gitbook.io/web/js/iteration/generator/examples/integers "mention")
    {% 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：[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 %}