> 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/grammar/op/assign/destruct/iterable.md).

# destructuring iterable

[JS](/web/js.md) ⟩ [operator](/web/js/grammar/op.md) ⟩ [assignment](/web/js/grammar/op/assign.md) ⟩ [destructuring](/web/js/grammar/op/assign/destruct.md) ⟩ iterable

{% hint style="success" %}

```javascript
let [a, ...rest] = "abc"    // rest = ['b', 'c']
for (const [i, value] of arr.entries()) { ... }
```

{% endhint %}

{% tabs %}
{% tab title="💾 程式" %}
💾 程式：[replit](https://replit.com/@pegasusroe/JS-array-destructuring)

```javascript
// ⭐ works with any "iterable"
let [one, two, three] = new Set([1, 2, 3]);   // 1, 2, 3

// ⭐ "rest" (array)
let [a, b, ...rest] = "abcdef"     // a="a", b="b", rest=[ 'c', 'd', 'e', 'f' ]

// ----------------- ⭐ loop over key-value pairs -----------------

// 🔸 1. iterate over object properties
//  use `Object.entries()` for ordinary objects
for (let [key, value] of Object.entries(obj)) {
  log(`${key}: ${value}`);          // "name: John", "surname: Smith"
}

// 🔸 2. iterate over `Map`
for (let [key, value] of aMap) {
  log(`${key}: ${value}`);          // "name: John", "age: 30"
}
```

{% endtab %}

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

* [x] JS.info ⟩ [array destructuring](https://javascript.info/destructuring-assignment#array-destructuring)
  {% endtab %}

{% tab title="👥 相關" %}

* [nested destructuring](/web/js/grammar/op/assign/destruct/nested.md)
* destructuring [iterable](/web/js/iteration/iterable.md).
  {% endtab %}

{% tab title="⬇️ 應用" %}

* [A1NotationToRowColumn()](/web/appendix/gas/classes/range/a1-notation/a1notationtorowcolumn.md) - <mark style="color:blue;">`"AA3"`</mark> to <mark style="color:blue;">`[ "AA", "3" ]`</mark>.
  {% endtab %}
  {% endtabs %}