JavaScriptの配列メソッド、どれを使えばいいのか?まとめ

2021年2月16日JavaScript

たくさん配列のメソッドがあるけど、どれを使えばいいのか?に対しては、何をしたいのかをまず決める必要があります。
配列のメソッドで「何をしたいのか」をカテゴライズしたので、それに合わせて選択しましょう。

配列のメソッドのカテゴリー:「何をしたいのか」ベース

  • オリジナルの配列を変更したい
  • 新しい配列を作りたい
  • 配列のインデックス・要素を探したい
  • 配列に入っているか確かめたい
  • 配列を値に変更したい
  • 配列の文字列にしたい
  • 配列をループさせたい

オリジナルの配列を変更したい

オリジナルに要素を追加したい

push()メソッド(end)

push()メソッドは、配列の最後に追加できます。

unshift()メソッド(start)

unshift()メソッドは、配列の最初に追加できます。

splice()メソッド(any)

splice()メソッドは、配列の途中(どこでも)追加できます。

オリジナルの要素を削除したい

pop()メソッド(end)

pop()メソッドは、配列の最後の要素を削除します。

shift()メソッド(start)

shift()メソッドは、配列の最初の要素を削除します。

splice()メソッド(any)

splice()メソッドは、配列の途中(どこでも)削除できます。

その他

reverse()メソッド

reverse()メソッドは配列の要素の順序を反転させます。

sort()メソッド

sort()メソッドは昇順・降順などソートできます。

fill()メソッド

fill()メソッドは、空の配列に数字を埋めたりすることができます。

新しい配列を作りたい

オリジナルを加工したい

map()メソッド→加工したい

map()メソッドは、オリジナルの配列を計算して新しい配列を作成します。

filter()メソッド→条件合致の要素を抽出したい

filter()メソッドは条件を使ってオリジナルの配列から条件に合った要素で新しい配列を作成します。

slice()メソッド→部分コピーを作りたい

slice()メソッドはオリジナルの配列に影響を与えることなく指定した部分を浅いコピーをして新しい配列を作成します。

concat()メソッド→つなげたい

concat()メソッドはオリジナルの配列に別の配列をつなげて新しい配列を作成します。

flat()メソッド→ネスト化された配列のネストを取り除きたい

flat()メソッドは、ネスト化された配列をフラットにします。

flatMap()メソッド→加工+ネスト化された配列のネストを取り除きたい

flatMap()メソッドは、flat()メソッド+Map()メソッドで加工してネスト化された配列をフラットにします。

配列のインデックス・要素を探したい

配列の特定の要素のインデックス番号を知りたい

indexOf()メソッド→値を指定してインデックス番号取得したい

indexOf()メソッドは、値を指定することで、配列の特定の要素のインデックス番号を取得できます。

findIndex()メソッド→条件を指定してインデックス番号取得したい

findIndex()メソッドは条件を指定して、それに合致した要素のインデックス番号を取得できます。

特定の要素を見つけたい

find()メソッド→特定の要素を知りたい

find()メソッドは、特定の要素を見つけることができます。

配列に入っているか確かめたい

includes()メソッド→値が配列に入っているか確かめたい

includes()メソッドは、値を指定して配列にそれが入っているか確かめられます。

some()メソッド→条件で合うものがあればtrueを返したい

some()メソッドは条件を指定して、配列の中に一つでも条件に合うものがあればtrueを返します。

every()メソッド→全要素が条件に合えばtrueを返したい

every()メソッドは条件を指定して、配列の中の要素すべてが条件に合えばtrueを返します。

配列を値に変更したい

reduce()メソッド→計算して最終的に一つの値にしたい

reduce()メソッドは、オリジナルの配列を計算して最終的に一つの値にまとることができます。

配列の文字列にしたい

join()メソッド→文字列にしたい

join()メソッドは配列を文字列にできます。

ただ配列をループさせたい

forEach()メソッド→ただループしたい

forEach()メソッドはただループさせたいときに使います。