Skip to content

厳選5種! JavaScript 配列の便利メソッド

JavaScript の配列が持つメソッドのうち、とくによく利用するもの5種類を紹介します。

メソッドにどのようなものがあるのかについては、これらの記事を参考にしてください。

シャローコピー:slice

関連するメソッド:concat, Array.from, …array

シャローコピーを作成するために頻繁に利用します。

中でもsliceメソッドを使ったものはシンプルに記述することができます。

関連記事:JavaScript の配列のシャローコピーに使えるメソッド3つ(+ 1つ)とその使い分け

要素の存在確認:some, find, findIndex

関連するメソッド:includes, indexOf, lastIndexOf, every

includes, indexOf, lastIndexOf が引数で値を渡すのに対し、some, find, findIndex は関数を渡すので、より柔軟な判定が可能です。

たとえば探したい要素がオブジェクトである場合などでは、some, find, findIndex を使うことになります。

ただし、使えるときには includes, indexOf, lastIndexOf を使ったほうがシンプルに記述でき処理も早くなります。

並べ替え:sort, reverse

変更メソッドである点に注意が必要です。

元の配列を変更したくない場合には、slice メソッドを挟むなどして、シャローコピーしてから実行する必要があります。

findIndex などと組み合わせることで、基準となる配列を利用したソートも可能です。

反復処理:forEach, filter, map

配列をもとに HTML の文字列を作るなど、よく利用します。

要素の結合や集計:reduce

関連するメソッド:join

要素の結合には join を使える場面もあり、join のほうがシンプルに記述できます。

ただ、reduce のほうが柔軟な指定が可能であるうえ、Chrome では reduce のほうが処理が速い場合もあり、積極的に活用していきたいメソッドです。(※ パフォーマンスは個人の環境での調査です)

reduce を使う場合の注意点として、初期値を設定していないと配列の length が 0 の場合にエラーが発生します。

配列に似たオブジェクトを配列に変換する:Array.from

HTMLCollection や NodeList を配列化し、map や filter といった Array.prototype.method を使えるようにします。

ちなみに、NodeList にはすでに forEach のメソッドが用意されているので、各要素に対して addEventListener を実行するだけであれば変換は不要です。(※ HTMLCollection には用意されていません。)

実装サンプル

See the Pen Array Method Sample by okaka (@okaka) on CodePen.light

ソースコードを下に載せておきます。

 

Comments are closed.