JavaScriptには様々な変数の型が存在します。有名なところでは文字列や数字、真偽値などがありますが、そうした変数を複数格納できるのが配列です。最も基本的な定義は []
で行われます。
リストを作ったり、クラウドのデータベースからデータを一覧で取得した際にも配列がよく使われます。それだけに、この配列を操作する方法をマスターすれば、コーディングがとても簡単になるでしょう。
この記事では便利な配列操作方法について解説します。
初期化
配列の初期化は []
を利用して行います。
この場合 ary
は空の配列になります。
初期化する際に値をあらかじめ指定する場合には ,
で値を区切ります。
配列の要素にアクセスする際には数字を使います。最初が0なので注意してください。
配列に値を追加する
既存の配列に値を追加する際には push
メソッドを使います。 push
は一番最後に追加します。
一番先頭に追加する場合には unshift
を使います。
配列から値を削除する
既存の配列から値を削除する際には pop
メソッドを使います。 pop
メソッドは最後の要素を削除します。
一番先頭の要素を削除する場合には shift
を使います。
配列を検索して、マッチしたデータだけ新しい配列を作る
filter
関数を使うと、配列を検索してマッチしたデータだけで新しい配列を作ります。trueを返すとその要素が使われます。それ以外の場合には除外されます。以下の例は偶数だけを抽出するものです。
上記のコードは次のようにも書けます。
配列を順番に処理する
forEach
関数を使うと、配列を要素ごとに順番に処理します。結果は返ってこないので注意してください。以下は集計するコードです。
なお、forEachはasync/awaitを使って順番に処理することはできませんので注意してください。以下のコードで、順番に0〜9が出力されて欲しいのですが、実際には実行するたびに異なる順番で出力されるでしょう。
もし順番に処理をして、その結果を別な配列として受け取りたい場合には、map
メソッドを使います。
さらに配列の値同士を計算したい時には reduce
メソッドを使います。
要素を順番に処理する for of
配列に含まれている要素へ順番にアクセスしたい場合には for of
が使えます。
逆に添え字にアクセスしたい時には for in
を使います。
検索して最初にマッチしたデータを取り出す
find
は filter
に似ていますが、最初のデータだけ返ってくる点が異なります。データが見つかると処理が終了するので、filterよりも高速です。filterは配列が返ってきますが、findは最初の要素だけ返ってきます。
配列のコピー
JavaScriptではオブジェクトを別な配列に入れても、メモリ空間は共有されています。そのため、別な配列を変更すると、両方の配列に反映されてしまいます。これは場合によっては意図しない動作になってしまうでしょう。
これを防ぐには slice
メソッドか、 [...]
を使います。
配列の一部を取り除く、要素を追加する
ReactやVueなどの仮想DOMを使っているフレームワークにおいて、配列操作を画面に反映する際によく使われるのが splice
メソッドです。
最初に紹介したpushメソッドと同じような操作は次のようになります。
splice
メソッドは次の引数を取ります。
- 要素を削除、または追加する場所を指定
- 要素を削除する個数を指定
- 追加する要素(オプション。複数指定可能)
最後の引数は複数指定できるので、まとめて追加も可能です。
削除する場合には、次のように指定します。
配列を空にする場合には splice(0)
を使います。
配列の値が条件にマッチしているかチェックする
配列の内容がすべて条件にマッチするかチェックする場合には every
メソッドを使います。
一つでもマッチしていればOKという場合には some
メソッドを使います。つまり some
でfalseが返ってくるということは、すべてが条件にマッチしていないということなので、every
メソッドの反転版とも言えます。
まとめ
他にもソートする sort
や 入れ子の配列を展開する flat
などもあります。配列を操作する際にforやwhileを使っているとコード量が増えやすいですし、JavaScriptの仕様で便利なメソッドが多数用意されています。ぜひ使いこなしてください。