Skip to content

JavaScriptの配列操作一覧[後編]

JavaScriptの反復メソッドについてまとめました。

その他のメソッドについては、これらの記事をご覧ください。

jQueryの$.each()でループを書いている方もいると思いますが、Arrayオブジェクトの持つループのメソッドを使い、より効率的なコードを書いていきましょう。

参考サイト:https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array

また、次の記事では特に便利なメソッドについて紹介しています。

反復メソッド一覧

反復メソッドとは、その名のとおり、配列の要素ひとつずつに対して順番に処理を実行していくメソッドです。

  • Chrome 51.0.2704.103
  • Firefox 47.0
  • Edge 25.10586.0.0
  • IE11 11.0.32

forEach(基本ループ)

要素ごとに関数を実行する。

構造

基本的な繰り返し関数ですね。

map(配列を返す)

callbackの結果からなる新しい配列を返す。

構造

基本的な繰り返し関数ですが、callback の返り値が自動的に配列の要素になっています。

filter(配列を返す)

callbackを満たす要素の配列を新たに作成する。

構造

まさにfilterといった感じの挙動です。

every(要素の判定)

すべての要素がcallbackを満たすかどうかを返す。

構造

偽を返した時点でループが終了します。

some(要素の判定)

いずれかの要素がcallbackを満たすかどうかを返す。

構造

array.every() と同じく、偽を返した時点でループが終了します。

find(特定の要素を取得)

callbackを満たす要素の値を返す。

※IEでは動きません。

構造

値を返した時点でループが終了します。

findIndex(特定の要素のインデックスを取得)

callbackを満たす要素のインデックスを返す。

※IEでは動きません。

構造

値を返した時点でループが終了します。

reduce(連続処理)

直前のループの結果を利用しながら繰り返し処理を行い、最終的な結果を返します。

構造

callback の返り値が次のループでの previousValue になります。

reduceRight(連続処理)

直前のループの結果を利用しながら繰り返し処理を行い、最終的な結果を返します。

構造

これも array.reduce() と同じく、callback の返り値が次のループでの previousValue になります。

array.reduce() とは異なり、配列の末尾から順に処理をします。

entries(イテレータ取得)

配列の key/value を含む Array Iterator を返す。

※IEでは動きません。

構造

keys(イテレータ取得)

配列の key を含む Array Iterator を返す。

※非推奨。IEでは動きません。

構造

values(イテレータ取得)

配列の value を含む Array Iterator を返す。

※非推奨。IE, Firefoxでは動きません。

構造

まとめ

以上が、配列の反復メソッドです。

基本の forEach() を使って手作業で実装すれば他のメソッドは再現できそうですが、わざわざ実装しなくても、便利なメソッドがいろいろあるので活用していきましょう。

Comments are closed.