UXPに備えてモダンなJSの書き方に慣れる(ECMA2015以降に追加されたArrayメソッド等)
ECMA5で大幅に追加されたArrayメソッドですがECMA2015以降も目覚ましい進化を遂げています。前回までに載せられなかったものを今回説明します。
for of
for inと似ていますがfor ofは反復可能なオブジェクトをインデックス順に反復処理をします。ただし返す値は各配列の値のみとなります。
for inと違ってObject objectには使えません。
反復可能なオブジェクトなら配列以外にもECMA2015より追加されたMap、ArrayオブジェクトでなくてもHTMLCollectionやArgumentsオブジェクトも使用可能です。
ここまで見た感じfor inとfor ofはそこまで大きな違いはありません。しかし以下はどうでしょうか。
なんとfor inの場合はArray.prototypeまで遡ってfooメソッドまで取得してしまいました。対してfor ofはあくまで反復可能なオブジェクトの要素のみ返すのでプロパティも返しません。しかしfor inによってprototypeを遡ってプロパティの取得を避けたい場合はどうすれば良いでしょうか？
hasOwnPropertyで事前にそのオブジェクト自身のプロパティーかどうか確かめた上で列挙することによりprototypeプロパティの列挙を止めることが可能です。もっともfor ofならその必要もなくあくまで反復可能な値のみ取り出すのでArray型オブジェクトにプロパティを追加しても無視してあくまで配列の要素のみ取り出します。しかしfor ofではオブジェクトのプロパティの列挙はできません。実は前々回のObjectメソッドでプロパティの列挙をprototypeを遡らずに列挙することが可能です。
もしくはObject.values,keys,entriesはそれ自体オブジェクトのプロパティとキーを配列型のオブジェクトとして返すのでそこからfor ofで列挙することも可能です。
Array.fill
Array.fillメソッドは特定の値で配列の特定の範囲を埋めてしまうメソッドです。引数に単一の値を渡した場合はその値で配列の全ての値を埋めてしまいます。
第二引数と第三引数にnumber型の値を渡すことで第二引数のインデックスから第三引数のインデックスの範囲のみを特定の値で埋めることが可能です。
とりあえず特定の長さの配列を作りたい時などundefinedで値が埋まっているとundefinedそれ自体がエラーの原因になりやすいのでそういう時はfillメソッドで特定の型の値で埋めてしまうのがいいでしょう。
Array.find
Array.findメソッドは最初に条件にあった配列内の値そのものを取り出します。注意したいのが複数条件にあったものがある場合も一つしか取り出さないのでこれで複数の値が特定の条件に合うかどうかはわかりません。
条件に合うものが一つもない場合はundefinedが返ってきます。
値そのものではなく値が配置されているindexが知りたい場合はfindIndexメソッドを使用します。
indexOfメソッドと似ていますがindexOfメソッドが値そのものを単に比較するのに対してfindIndexとfindメソッドは関数式で帰ってきた値を元に取得するのでプリミティブ型の特定の値があるか探す場合はindexOfでindexを、もしくは単にプリミティブ型の特定の値があるかないかboolean型で返して欲しい場合はincludesメソッド、関数による比較などが必要な場合はfind,findIndexがいいでしょう。
flat , flatmapメソッド
flatメソッドはネスト化された配列をその名の通り浅く（フラット化）します。
引数に何も渡さなければ一階層分を浅く、引数を渡すことで渡された値分の階層を浅くします。
元々の配列がネストされてなかった場合は何も変わりません。シャローコピーを返すみたいです。
対してflatMapですがこれもその名のmapメソッドとflatメソッドを同時に実行します。ただし順としてはmap->flatなので注意。
使いどころが難しそうです。正直これだというサンプルが思い浮かびませんがオブジェクトなんかで特定のプロパティをそのまま配列かしたい時などは役立つそうです。