この記事は以下の書籍を参考にして執筆しました。

入門JavaScriptプログラミング

イテラブルとはなにか

ES2015で追加されたiterableプロトコルに従うオブジェクトのこと。
String,Array,Set,Maoなど
これらのオブジェクトwhすべて共通のぷとロコルに従うため同じ挙動をする。

for..of文

for (var i = 0; i < myArray; i++) {
  car item = myArray[i];
  //処理
}

このコードはfor..ofで書くとこうなる

for(const item of myArray){
  //処理
}

for..ofによりイテラブルの値をループで処理できるようになった。

for..inとfor..ofの比較

const obj = {
  series: 'Get Programing',
  publicher: 'Manning'
}
const arr = ['Get Programing', 'Manning']

for (var name in obj) {
  console.log(name) //series,publicher
}
for (var name of arr) {
  console.log(name) //Get Programing,Manning
}

for..inはオブジェクトのプロパティを列挙する。

スプレッド演算子

イテラブルがスプレッド演算子が使用できる。

const num=[1,2,3,4,5,6,7,8,9]
const min=Math.min.apply(null,num)

これをスプレット演算子で書くとこうなる。

const num=[1,2,3,4,5,6,7,8,9]
const min=Math.min.(..num)

ポイント

num配列が単一の引数としてMath.minに渡される。
配列のすべての値が別々の引数として渡される。

配列だけでなく文字列を含めたすべてのイテラブルでうまくいく。

スプレッド演算子がレスト演算子と同じ。

イテラブルを配列リテラルに展開

const surname = 'Isaacks'
const letters = [...surname]
console.log(letters)//["I", "s", "a", "a", "c", "k", "s"]

スプレッドをイミュータブルなプッシュとして使用する

スプレッドを使用すれば既存の配列を新しい配列にコピーした上で新しい要素を追加できる。

function additem(item){
  return [...cart,item]
}

pushを使うとこうなる。

function addItem(tem){
  const newCart=cart.slice(0)
  newCart.push(item)
  return newCart
}

アローを使うともっと簡潔に

const addItem=item=>[...cart,item];

配列のシャローコピー

配列で何らかの分割処理をしたいが
元の配列を変更したくない、という場合に便利

function processItem(items) {
  copy = [...items];
  //itemsを分割するのではなく、copyを分割する。
}

シャローコピー
コピー元とコピー先が同じメモリ上のデータを参照している。

ディープコピー
コピー元とコピー先が別々のデータを参照している。

イテレータ：イテラブルの内部を調べる

@@iteratorプロパティを持ちiteratorプロトコルに従うオブジェクトはすべてイテラブル。
イテレータはnextメソッドを持つオブジェクト。
nextメソッドは以下の2つのプロパティを持つ

プロパティ	説明
done	イテレータが反復処理を終えたかどうか
value	イテレータが生成する次の値

スプレッド演算子とfor..ofはdoneプロパティにtrueが設定され、値がもう残っていないことを示すまでイテレータでnextメソッドを繰り返し呼び出す。

@@iteratorとして使用できる関数の作成

オブジェクトをイテラブルにするには、新しいイテレータオブジェクトを返す@@iteratorメソッドを定義しなければいけない。

これから作る関数は以下のような機能を持っている。

nextメソッドを持つ新しいオブジェクトを返す
nextメソッドはdoneとvalueの2つのプロパティを持つ

function primesIterator() {
  const primes = [2, 3, 5]
  return {
    next() {
      const value = primes.shift();
      const done = !value;
      return {
        value,
        done
      }
    }
  }
}

次にこの関数をイテレータとして使用するいてラブルを作成する。

const primesIterable = {
  [Symbol.iterator]: primesIterator
};

const myPrimes = [...primesIterable]; //[2,3,5]

これで作成できるが、nextメソッドとdoneプロパティを持つオブジェクトを返す関数---ジェネレータ関数を使うともっと簡潔

ジェネレータ関数はイテレータであると同時にイテラブル。

つまり、ジェネレレータ関数を直接反復処理できるし、別々のオブジェクトをイテラブルにするための@@iteratorメソッドとしても使用できる。

function* primesIterator() {
  yield 2;
  yield 3;
  yield 5;
}

const primesIterable = {
  [Symbol.iterator]: primesIterator
};

const myPrimes = [...primesIterable]; //[2,3,5]

【javascript】イテラブル