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の仕様で便利なメソッドが多数用意されています。ぜひ使いこなしてください。