JavaScript：作成・取得・追加・削除・各要素への処理など、配列に関する基本操作のまとめ

JavaScriptで複数のデータを取り扱いたいときに使う配列には多くのメソッドが用意されており、それらを単独または複数組み合わせて使用することで配列に様々な処理・操作を行うことができます。
ただ、JavaScriptを勉強し始めたとかこれから配列について勉強するという場合に、とりあえず漠然とメソッドを覚えてと言われても抵抗がある人もいると思うので、どんな処理ができるかやどんなメソッドがあるのかが少しでもわかりやすいように、**「この処理をしたいときにこのメソッドを使う」**のような形で基本操作としてよく使われるものをまとめて紹介します。

ここで紹介している方法の一部は「この処理を行うなら絶対にこれを使う」ということではなく、あくまで「この処理を行う方法のひとつとしてこれを使う」というものになります。
紹介している内容の一部はブラウザによって非対応のものもあります。
自身の環境で動作確認をしたい場合は、Babelを利用したり対応しているブラウザで確認してください。

作成（定義）

空の配列を作成

要素がない空の配列を作成したい場合は、下記のようにリテラルで作成できます。

const array = [];
console.log(array); // []

もしくは、下記のようにnew Array()を用いる方法もあり、場合によってはこちらの方が良いこともありはしますが、最近だと基本的には上のリテラルを利用していることが多いです。

const array = new Array();
console.log(array); // []

要素ありの配列を作成

既に要素がある状態の配列を作成したい場合は[]内に要素を記述し、下記のようにカンマ区切りで記述することで複数の要素がある配列になります。

const array = ['red', 'blue', 'yellow'];
console.log(array); // ['red', 'blue', 'yellow']

new Array()を用いる場合も同じようにカンマ区切りで記述していきます。

const array = new Array('red', 'blue', 'yellow');
console.log(array); // ['red', 'blue', 'yellow']

任意の要素数がある配列を作成

上とは違い、明確に指定したいものはないが特定の要素数がある配列を作成する方法です。
このサンプルコードの場合は5つの要素を持つ配列を作成しつつ、ひとまず値はfill()を使用して0にしたものです。

const array = [...Array(5)].fill(0);
console.log(array); // [0, 0, 0, 0, 0]

new Array()を用いる場合は下記のように記述します。

const array = new Array(5).fill(0);
console.log(array); // [0, 0, 0, 0, 0]

取得

要素数を取得

配列の要素数はlengthプロパティを用いて取得できます。

const array = ['red', 'blue', 'yellow', 'green', 'orange'];
console.log(array.length); // 5

特定インデックスの要素を取得

配列内にある特定インデックスの要素を取得したい場合は、配列名のあとにブラケット記法でそのインデックス数を記述します。
インデックスは0始まりになるので、例えば下記サンプルコードのような配列では最初にあるredが0になり、1を指定した場合は配列内で2番目にあるblueが取得されます。

const array = ['red', 'blue', 'yellow', 'green', 'orange'];
console.log(array[1]); // blue

先頭要素を取得

配列の先頭にある要素は、上でも紹介したようにインデックス数に0を指定することで取得できます。

const array = ['red', 'blue', 'yellow', 'green', 'orange'];
console.log(array[0]); // red

末尾要素を取得

配列の末尾にある要素は、array.length - 1とすることで配列の最大数を求められるので、それをインデックスに指定することで取得できます。

const array = ['red', 'blue', 'yellow', 'green', 'orange'];
console.log(array[array.length - 1]); // orange

ちなみに、別の方法としてslice()メソッドを用いてarray.slice(-1)[0]と記述することでも末尾要素を取得できます。

複数の要素を取得

配列から複数の要素を取得したい場合はslice()メソッドを使用し、引数に開始位置を記述します。例えば下記のようにslice(2)と記述した場合は3番目から最後までを取得でき、slice(-2)のように負の値を記述した場合は末尾から2番目までを取得できます。

const array = ['red', 'blue', 'yellow', 'green', 'orange'];
console.log(array.slice(2));  // ['yellow', 'green', 'orange']
console.log(array.slice(-2)); // ['green', 'orange']

また、第2引数を記述することで終了前の位置を指定することができ、第1引数と組み合わせることで指定した範囲内にある要素を取得できます。
例えば下記のslice(1, 4)であれば先頭から2番目〜4番目までを取得となり、slice(1, -1)のように負の値を記述した場合は終了前の位置は末尾から2番目という指定になります。

const array = ['red', 'blue', 'yellow', 'green', 'orange'];
console.log(array.slice(1, 4));  // [’blue’, ’yellow’, ’green’]
console.log(array.slice(1, -1)); // [’blue’, ’yellow’, ’green’]

要素をランダム取得

Math.random()と配列の要素数で出したランダムな値をインデックスに利用して取得しています。

const array = ['red', 'blue', 'yellow', 'green', 'orange'],
      random = Math.floor(Math.random() * array.length);
console.log(array[random]); // red, blue, yellow, green, orangeのいずれか

最大値・最小値を取得

配列内の最大値・最小値を取得したい場合は、apply()メソッドと最大値ならMath.max()、最小値ならMath.min()をそれぞれ用います。

const array = [7, 4, 1, 5, 6, 2, 8, 3, 10, 9],
      maxNum = Math.max.apply(null, array),
      minNum = Math.min.apply(null, array);
console.log(`Max: ${maxNum}`); // Max: 10
console.log(`Min: ${minNum}`); // Min: 1

もしくは、スプレッド構文を用いることで若干ではありますがシンプルな記述で取得できます。

const array = [7, 4, 1, 5, 6, 2, 8, 3, 10, 9],
      maxNum = Math.max(...array),
      minNum = Math.min(...array);
console.log(`Max: ${maxNum}`); // Max: 10
console.log(`Min: ${minNum}`); // Min: 1

追加

先頭に要素追加

配列の先頭に要素を追加したい場合は、unshift()メソッドを使用します。
例えば下記のように記述することで配列の先頭にgreenが追加され、複数追加したい場合はarray.unshift('green', 'orange', 'pink');のようにカンマ区切りで記述します。

const array = ['red', 'blue', 'yellow'];
array.unshift('green');
console.log(array); // ['green', 'red', 'blue', 'yellow']

末尾に要素追加

配列の末尾に要素を追加したい場合は、push()メソッドを使用します。
例えば下記のように記述することで配列の末尾にgreenが追加され、複数追加したい場合はarray.push('green', 'orange', 'pink');のようにカンマ区切りで記述します。

const array = ['red', 'blue', 'yellow'];
array.push('green');
console.log(array); // ['red', 'blue', 'yellow', 'green']

先頭・末尾以外で要素を追加

先頭や末尾ではなく配列内の途中に要素を追加したい場合は、splice()メソッドを使用します。
使用時はsplice(開始位置, 取り除く要素数, 追加する要素)のように引数を記述し、例えば下記はredの後にgreenを追加した場合の記述になります。
また、該当箇所に複数追加したい場合は第4引数からカンマ区切りで追記していき、array.splice(1, 0, 'green', 'orange', 'pink');とすればredの後にgreen, orange, pinkの3つが追加されます。

const array = ['red', 'blue', 'yellow'];
array.splice(1, 0, 'green');
console.log(array); // ['red', 'green', 'blue', 'yellow']

削除

空にする

lengthプロパティで0を指定するだけで空にできます。

const array = ['red', 'blue', 'yellow', 'green', 'orange'];
array.length = 0;
console.log(array); // []

もしくは、対象となる配列が再代入できるのであれば新しい空配列を代入するのでも可能です。

let array = ['red', 'blue', 'yellow', 'green', 'orange'];
array = [];
console.log(array); // []

先頭要素を削除

配列の先頭にある要素を削除したい場合は、shift()メソッドを使用します。

const array = ['red', 'blue', 'yellow', 'green', 'orange'];
array.shift();
console.log(array); // ['blue', 'yellow', 'green', 'orange']

また、shift()は削除した要素が返り値になります。

const array = ['red', 'blue', 'yellow', 'green', 'orange'],
      shifted = array.shift();
console.log(shifted); // red
console.log(array);   // ['blue', 'yellow', 'green', 'orange']

末尾要素を削除

配列の末尾にある要素を削除したい場合は、 pop()メソッドを使用します。

const array = ['red', 'blue', 'yellow', 'green', 'orange'];
array.pop();
console.log(array); // ['red', 'blue', 'yellow', 'green']

また、pop()は削除した要素が返り値になります。

const array = ['red', 'blue', 'yellow', 'green', 'orange'],
      popped = array.pop();
console.log(popped); // orange
console.log(array);  // ['red', 'blue', 'yellow', 'green']

先頭・末尾以外で要素を削除

先頭や末尾ではなく配列内の途中にある要素を削除したい場合は、splice()メソッドを使用します。
例えば下記の配列からgreenを削除したい場合は、「先頭から4番目の要素を1つだけ削除」という指定になるので、先頭から4番目の要素を指定するために第1引数へ3を、要素を1つだけ削除するために第2引数へ1をそれぞれ記述します。

const array = ['red', 'blue', 'yellow', 'green', 'orange'];
array.splice(3, 1);
console.log(array); // ['red', 'blue', 'yellow', 'orange']

要素を複数削除

配列内で削除したい要素が複数あり且つそれらが連続で並んでいる場合は、splice()メソッドを使用します。
例えば下記の配列でblue, yellow, greenの3つを削除したい場合は、「先頭から2番目の要素から3つ削除」という指定になるので、先頭から2番目の要素を指定するために第1引数へ1を、要素を3つ削除するために第2引数へ3をそれぞれ記述します。

const array = ['red', 'blue', 'yellow', 'green', 'orange'];
array.splice(1, 3);
console.log(array); // ['red', 'orange']

重複要素を削除

配列内で重複している要素を削除する方法は他にもいくつかありますが、その中のひとつとして下記はfilter()メソッドとindexOf()メソッドを組み合わせた方法です。

const array = ['red', 'blue', 'blue', 'yellow', 'green', 'yellow', 'blue', 'orange', 'red'],
      result = array.filter((value, index, self) => self.indexOf(value) === index);
console.log(result); // ['red', 'blue', 'yellow', 'green', 'orange']

もしくは、スプレッド構文とSet()を組み合わせることで下記のようにより短い記述で可能です。

const array = ['red', 'blue', 'blue', 'yellow', 'green', 'yellow', 'blue', 'orange', 'red'],
      result = [...new Set(array)];
console.log(result); // ['red', 'blue', 'yellow', 'green', 'orange']

falsyな値を削除

0, false, undefinedなどのfalsyな値と呼ばれるものを配列から削除したい場合は、filter()メソッドを使用して下記のように記述します。

const array = ['red', '', ' ', 0, 9, true, false, NaN, undefined],
      result = array.filter(Boolean);
console.log(array);  // ['red', '', ' ', 0, 9, true, false, NaN, undefined]
console.log(result); // ['red', ' ', 9, true]

検索

要素のインデックスを検索

配列内に特定の要素があるかを調べて且つ要素がある場合にそのインデックスを取得したい場合は、indexOf()メソッドまたはlastIndexOf()メソッドを使用します。
indexOf()は配列の中から最初に見つかる要素のインデックスが、lastIndexOf()は配列の中から最後に見つかる要素のインデックスがそれぞれ返り値になります。

const array = ['red', 'blue', 'yellow', 'green', 'blue', 'orange'],
      searchFirst = array.indexOf('blue'),
      searchLast = array.lastIndexOf('blue');
console.log(`First: ${searchFirst}`); // First: 1
console.log(`Last: ${searchLast}`);   // Last: 4

要素の存在有無を検索

単純に配列内に特定の要素があるかどうか検索したい場合は、includes()メソッドを使用します。

const array = ['red', 'blue', 'yellow', 'green', 'orange'];
console.log(array.includes('blue')); // true

条件を満たす要素を検索

配列から指定した条件を満たす要素を検索したい場合は、find()メソッドを使用します。
find()は配列で条件を満たした最初の要素を返し、例えば下記は「配列内の数値の中で30より大きい値」という条件で検索しているので70と100についても条件を満たしていますが、最初に条件を満たした50が返り値となります。

const array = [10, 20, 50, 70, 100],
      result = array.find(element => element > 30);
console.log(result); // 50

また、取得したいのが要素ではなくインデックスだった場合は、返り値がインデックスになるfindIndex()メソッドを使用します。

const array = [10, 20, 50, 70, 100],
      result = array.findIndex(element => element > 30);
console.log(result); // 2

条件を満たす要素の存在有無を検索

配列から指定した条件を満たす要素があるかどうか検索したい場合は、some()メソッドを使用します。
some()は条件を満たす要素が1つでも存在すればtrueを返します。

const array = [10, 20, 50, 70, 100],
      result = array.some(element => element > 30);
console.log(result); // true

また、条件を満たす要素の存在を1つ確認するだけでなく全要素が条件を満たしているか検索したい場合は、every()メソッドを使用します。
every()は配列内の全要素が条件を満たしていればtrueを返します。

const array = [10, 20, 50, 70, 100],
      result = array.every(element => element > 30);
console.log(result); // false

各要素に処理

配列内の各要素に対して何らかの処理を行いたい場合、for文, for...in文, for...of文, forEach()など様々な方法があり、他にも処理内容や出力内容によってとか配列に対してどんなことを行っているかパッと見で把握しやすいなどの理由でmap(), filter(), reduce()を使用することもありますが、ここではそれらの中でとりあえず覚えておきたい方法としてfor文とforEach()を紹介します。

for文

for文は指定した条件がfalseと判断されるまで処理を繰り返し実行させることができ、今回のような配列に使用する場面に限らず、指定した回数だけある処理を実行したいときなどにも使用されます。
使用時はfor (初期化式; 条件式; 加算式)のように記述し、例えば下記のサンプルコードは配列の要素数が変数iの値を超えるまで各要素をログ出力させるというもので、console.log()での出力時にiの値をインデックスに利用することで配列から要素を取得しています。

const array = ['red', 'blue', 'yellow', 'green', 'orange'];
for (let i = 0; i < array.length; i++) {
  console.log(array[i]); // red, blue, yellow, green, orange が順番に出力される
}

forEach()

forEach()は引数に記述したコールバック関数を配列の各要素に対して実行させることができます。
下記はfor文のサンプルコードと同じく配列内の各要素をログ出力させるものになりますが、forEach()の場合はfor文のときに必要だった条件などがない分シンプルな記述になります。
また、このサンプルコードでは現在処理中の要素名を取得したいだけなのでコールバック関数として第1引数のみ記述しましたが、インデックスが必要な場合は第2引数、実行している配列が必要な場合は第3引数を使用します。

const array = ['red', 'blue', 'yellow', 'green', 'orange'];
array.forEach((value) => {
  console.log(value); // red, blue, yellow, green, orange が順番に出力される
});

要素を置換する

配列内にある特定要素を別の要素に置き換えたい場合は、splice()メソッドを使用します。
例えば下記は第1・第2引数によって先頭から3番目にある黄色を削除後に第3引数でyellowが追加されることによって、配列内にある黄色がyellowに置き換わるという動きになります。

const array = ['red', 'blue', '黄色', 'green', 'orange'];
array.splice(2, 1, 'yellow');
console.log(array); // ['red', 'blue', 'yellow', 'green', 'orange']

要素の並びを逆にする

配列内にある要素の並びを逆にしたい場合は、reverse()メソッドを使用します。

const array = ['red', 'blue', 'yellow', 'green', 'orange'];
array.reverse();
console.log(array); // ['orange', 'green', 'yellow', 'blue', 'red']

要素をソートする

配列内にある要素の並びを何らかのルールに沿って並び替えたい場合は、sort()メソッドを使用します。
並び替えのルールは引数に処理や関数を記述することで設定でき、指定しなかった場合は各要素の文字列比較に基づいて辞書順にソートされます。
下記サンプルコードはどちらも処理前の配列では要素が不規則に並べられていますが、前者が数値を基準にして降順に、後者が文字数を基準にして昇順にそれぞれソートしたものになります。

const array = [63, 35, 12, 38, 91, 8, 24, 49, 2, 11],
      result = array.sort((a, b) => b - a);
console.log(result); // [91, 63, 49, 38, 35, 24, 12, 11, 8, 2]

const array = ['blue', 'yellow', 'rainbow', 'red', 'green', 'orange', 'pink'],
      result = array.sort((a, b) => a.length - b.length);
console.log(result); // ["red", "blue", "pink", "green", "yellow", "orange", "rainbow"]

配列を結合する

複数の配列を結合してひとつの配列にしたい場合は、concat()メソッドを使用します。
複数のものを一度にまとめて結合させたい場合は、下記サンプルコードのresult02で行なっているようにカンマ区切りで記述します。

const array01 = ['red', 'blue'],
      array02 = ['yellow', 'green'],
      array03 = ['orange', 'brown'],
      result01 = array01.concat(array02),
      result02 = array01.concat(array02, array03);
console.log(result01); // ['red', 'blue', 'yellow', 'green']
console.log(result02); // ['red', 'blue', 'yellow', 'green', 'orange', 'brown']

もしくは、下記のようにスプレッド構文を用いる方法もあります。

const array01 = ['red', 'blue'],
      array02 = ['yellow', 'green'],
      array03 = ['orange', 'brown'],
      result01 = [...array01, ...array02],
      result02 = [...array01, ...array02, ...array03];
console.log(result01); // ['red', 'blue', 'yellow', 'green']
console.log(result02); // ['red', 'blue', 'yellow', 'green', 'orange', 'brown']

配列を分割する

例えば配列内の要素を均等に複数の配列へ分割したいとか特定の条件有無で各要素を異なる配列に分割したいといった場合は、計算や条件分岐なども必要になってくるので他の方法を用いる必要がありますが、単純且つどこで分割させるかが明確なものなら配列から複数の要素を取得できるslice()メソッドでも可能です。

const array = ['red', 'blue', 'yellow', 'green', 'orange'],
      result01 = array.slice(0, 3),
      result02 = array.slice(3);
console.log(result01); // ['red', 'blue', 'yellow']
console.log(result02); // ['green', 'orange']

配列を複製する

配列を複製したい場合は、Array.from()を使用します。

const array = ['red', 'blue', 'yellow', 'green', 'orange'],
      array02 = Array.from(array);

もしくは、下記のようにスプレッド構文を用いることでより少ない記述で複製できます。

const array = ['red', 'blue', 'yellow', 'green', 'orange'],
      array02 = [...array];

別の配列を作成する

配列に何らかの処理を加えた別の配列を作成したい場合は、map()メソッドを使用します。
map()は引数に記述した関数による処理を配列内の各要素に対して行いつつ新たな配列を作成できるもので、配列内の各要素に処理を加えていくという点でいえばfor文やforEach()など他にも方法がありますが、最終的に配列を作成したいのであればmap()が適しています。

const array = [13, 2, 27, 5, 8, 19],
      result = array.map((value) => value * 2);
console.log(result); // [26, 4, 54, 10, 16, 38]

配列をオブジェクトに変換する

方法は他にもいくつかありますが、比較的少なめな記述で行えるものとして下記のようにreduce()を用いることで配列をオブジェクトに変換できます。

const array = ['red', 'blue', 'yellow', 'green', 'orange'];
const object = array.reduce((acc, value, index) => {
  acc[index] = value;
  return acc;
}, {});

console.log(object);
// {
//   0: 'red',
//   1: 'blue',
//   2: 'yellow',
//   3: 'green',
//   4: 'orange'
// }

もしくは、下記のようにスプレッド構文を用いることでより少ない記述で変換できます。

const array = ['red', 'blue', 'yellow', 'green', 'orange'],
      object = {...array};

console.log(object);
// {
//   0: 'red',
//   1: 'blue',
//   2: 'yellow',
//   3: 'green',
//   4: 'orange'
// }

要素を結合して文字列にする

配列内にある要素を結合して文字列に変換したい場合は、join()メソッドを使用します。
join()は引数で各要素を区切る文字列を指定することができ、下記サンプルコードのresult01のように引数なしで使用した場合は各要素をカンマ区切りした状態で結合、result02のように空文字を指定した場合は各要素間の区切りなしで結合します。

const array = ['red', 'blue', 'yellow', 'green', 'orange'],
      result01 = array.join(),
      result02 = array.join(''),
      result03 = array.join(' / ');
console.log(result01); // red,blue,yellow,green,orange
console.log(result02); // redblueyellowgreenorange
console.log(result03); // red / blue / yellow / green / orange

長々と書いてきましたが、ここで紹介している方法の一部は「この処理を行うなら絶対にこれを使う」ということではなく、あくまで**「この処理を行う方法のひとつとしてこれを使う」**というものになります。
どのようなメソッドがあるのかある程度わかってくると「この処理は○○でもできそう」とか「□□よりも△△の方が記述がシンプルになりそう」などの発見も出てくると思いますし、ここで紹介した以外にも便利なメソッドはいくつかあるので、特にこれから配列を覚えたいと思っている人は自身でもいろいろ試してみてください :)