JavaScriptの配列操作を覚えよう (JavaScript基礎構文)

JavaScriptには様々な変数の型が存在します。有名なところでは文字列や数字、真偽値などがありますが、そうした変数を複数格納できるのが配列です。最も基本的な定義は [] で行われます。

const ary = [];

リストを作ったり、クラウドのデータベースからデータを一覧で取得した際にも配列がよく使われます。それだけに、この配列を操作する方法をマスターすれば、コーディングがとても簡単になるでしょう。

この記事では便利な配列操作方法について解説します。

初期化

配列の初期化は [] を利用して行います。

const ary = [];

この場合 ary は空の配列になります。

ary.length;
// => 0

初期化する際に値をあらかじめ指定する場合には , で値を区切ります。

const ary = ['文字です', 100, true, new Date];

配列の要素にアクセスする際には数字を使います。最初が0なので注意してください。

ary.length;
// => 4
ary[0];
// => 文字です

配列に値を追加する

既存の配列に値を追加する際には push メソッドを使います。 push は一番最後に追加します。

const ary = ['文字です', 100, true, new Date];
ary.push('新しい値');
ary
// => ['文字です', 100, true, new Date, '新しい値']

一番先頭に追加する場合には unshift を使います。

const ary = ['文字です', 100, true, new Date];
ary.unshift('新しい値');
ary
// => ['新しい値', '文字です', 100, true, new Date]

配列から値を削除する

既存の配列から値を削除する際には pop メソッドを使います。 pop メソッドは最後の要素を削除します。

const ary = ['文字です', 100, true, new Date];
ary.pop();
ary
// => ['文字です', 100, true]

一番先頭の要素を削除する場合には shift を使います。

const ary = ['文字です', 100, true, new Date];
ary.shift();
ary
// => [100, true, new Date]

配列を検索して、マッチしたデータだけ新しい配列を作る

filter 関数を使うと、配列を検索してマッチしたデータだけで新しい配列を作ります。trueを返すとその要素が使われます。それ以外の場合には除外されます。以下の例は偶数だけを抽出するものです。

const ary = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
const ary2 = ary.filter(i => {
  if (i % 2 === 0) {
    return true;
  } else {
    return false;
  }
});
ary2;
// => [0, 2, 4, 6, 8]

上記のコードは次のようにも書けます。

const ary = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
const ary2 = ary.filter(i => i % 2 === 0);
ary2;
// => [0, 2, 4, 6, 8]

配列を順番に処理する

forEach 関数を使うと、配列を要素ごとに順番に処理します。結果は返ってこないので注意してください。以下は集計するコードです。

const ary = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
let sum = 0;
ary.forEach(i => sum += i);
sum;
// => 45

なお、forEachはasync/awaitを使って順番に処理することはできませんので注意してください。以下のコードで、順番に0〜9が出力されて欲しいのですが、実際には実行するたびに異なる順番で出力されるでしょう。

// 処理を待つための関数
const sleep = msec => new Promise(resolve => setTimeout(resolve, msec));
const ary = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
ary.forEach(async (i) => {
  await sleep(Math.random() * i * 500);
  console.log(i);
});

もし順番に処理をして、その結果を別な配列として受け取りたい場合には、map メソッドを使います。

const ary = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
const ary2 = ary.map(a => a * 100);
// => [0, 100, 200, 300, 400, 500, 600, 700, 800, 900]

さらに配列の値同士を計算したい時には reduce メソッドを使います。

const ary = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const ary2 = ary.reduce((previousValue, currentValue) => previousValue * currentValue);
// => 362880

要素を順番に処理する for of

配列に含まれている要素へ順番にアクセスしたい場合には for of が使えます。

const ary = ['文字です', 100, true];
for (const val of ary) {
  console.log(val);
}
// => 文字です
// => 100
// => true

逆に添え字にアクセスしたい時には for in を使います。

const ary = ['文字です', 100, true];
for (const val in ary) {
  console.log(val);
}
// => 0
// => 1
// => 2

検索して最初にマッチしたデータを取り出す

find は filter に似ていますが、最初のデータだけ返ってくる点が異なります。データが見つかると処理が終了するので、filterよりも高速です。filterは配列が返ってきますが、findは最初の要素だけ返ってきます。

const ary = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
ary.find(i => i > 0 && i % 3 === 0);
// => 3

配列のコピー

JavaScriptではオブジェクトを別な配列に入れても、メモリ空間は共有されています。そのため、別な配列を変更すると、両方の配列に反映されてしまいます。これは場合によっては意図しない動作になってしまうでしょう。

const ary = ['文字です', 100, true];
const ary2 = ary;
ary2.push('テスト');
ary;
// => ['文字です', 100, true, 'テスト'];

これを防ぐには slice メソッドか、 [...] を使います。

const ary = ['文字です', 100, true];
const ary2 = ary.slice();
const ary3 = [...ary];
ary2.push('追加')
ary3.push('追加テキスト')

ary;
// => ['文字です', 100, true]
ary2;
// => ['文字です', 100, true, '追加']
ary3;
// => ['文字です', 100, true, '追加テキスト']

配列の一部を取り除く、要素を追加する

ReactやVueなどの仮想DOMを使っているフレームワークにおいて、配列操作を画面に反映する際によく使われるのが splice メソッドです。

最初に紹介したpushメソッドと同じような操作は次のようになります。

const ary = ['文字です', 100, true];
ary.splice(ary.length, 0, '追加');
ary;
// => ['文字です', 100, true, '追加']

splice メソッドは次の引数を取ります。

要素を削除、または追加する場所を指定
要素を削除する個数を指定
追加する要素（オプション。複数指定可能）

最後の引数は複数指定できるので、まとめて追加も可能です。

const ary = ['文字です', 100, true];
ary.splice(ary.length, 0, '追加', 'テキスト');
ary;
// => ['文字です', 100, true, '追加', 'テキスト']

削除する場合には、次のように指定します。

const ary = ['文字です', 100, true];
ary.splice(1, 1);
ary;
// => ['文字です', true]

配列を空にする場合には splice(0) を使います。

const ary = ['文字です', 100, true];
ary.splice(0);
ary;
// => []

配列の値が条件にマッチしているかチェックする

配列の内容がすべて条件にマッチするかチェックする場合には every メソッドを使います。

const ary = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
ary.every(value => value >= 0);
// => true
ary.every(value => value > 0);
// => false

一つでもマッチしていればOKという場合には some メソッドを使います。つまり some でfalseが返ってくるということは、すべてが条件にマッチしていないということなので、every メソッドの反転版とも言えます。

const ary = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
ary.some(value => value >= 0);
// => true
ary.some(value => value > 10);
// => false

まとめ

他にもソートする sort や入れ子の配列を展開する flat などもあります。配列を操作する際にforやwhileを使っているとコード量が増えやすいですし、JavaScriptの仕様で便利なメソッドが多数用意されています。ぜひ使いこなしてください。

初期化