配列にはさまざまなメソッドが用意されています。
状況に応じで配列メソッドの使い分けができるようになると、要素の追加や削除を効率的に行うことができるため便利です。

今回は以下のシチュエーションに使用できる配列メソッドを解説していきます。

  • 要素の追加
  • 要素の削除
  • 要素の抜き取り
  • 要素の分割
  • 要素の結合

以下の記事では、メソッドを使わない配列の基本操作を解説しています。
おさらいしたい方は参考にしてみてください。

2021.06.22

2022.05.26

【JavaScriptの基本】配列の操作

JavaScriptでは、複数の値からなるデータを管理するために配列が良く使われます。 オブジェクトと混同してしまいがちですが、用意されているメソッドも多く、配列の操作に慣れておくと便利です。 今回は、配列の操作方法に焦点を当てて解説していきます。 配列の作成と要素へのアクセス 配列を作成す...

要素の追加

配列には、要素を追加できるメソッドが主に2つ用意されています。

pushメソッドとunshiftメソッド

pushメソッドは配列の末尾に新しい要素を追加し、unshiftメソッドは配列の先頭に新しい要素を追加します。
それぞれメソッドの引数に、追加したい値を記述します。

const arr = [1, 2, 3, 4, 5];

console.log(arr.push(6)); // 6
console.log(arr); // [1, 2, 3, 4, 5, 6]

console.log(arr.unshift(0));  // 7
console.log(arr); // [0, 1, 2, 3, 4, 5, 6]

これらの戻り値は、追加された後の配列の要素の長さです。

要素の削除

配列には削除できるメソッドもいくつか用意されています。

popメソッドと shiftメソッド

popメソッドは配列の末尾の要素を、shiftメソッドは配列の先頭の要素を削除します。

const arr = [1, 2, 3, 4, 5];

console.log(arr.pop()); // 5
console.log(arr); // [1, 2, 3, 4]

console.log(arr.shift()); // 1
console.log(arr); // [2, 3, 4]

これらの戻り値は、削除された要素そのものです。

delete演算子

delete演算子を使って、配列の要素を削除することも可能です。
delete演算子と削除したい要素のインデックスを記述します。

const tripList = [
  'Hawaii',
  'Cancun',
  'Santorini',
  'Jeju',
  'Karuizawa'
];

delete tripList[2];
console.log(tripList);  // ['Hawaii', 'Cancun', undefined, 'Jeju', 'Karuizawa']
console.log(tripList.length); // 5

インデックス2番目の要素である'Santorini'が削除されましたが、要素を削除したあとも5つの要素を持っていることが分かります。

単純に1つの要素を削除したい場合は問題ありませんが、空白となった場所を埋めてより短い配列に整理したい場合や、複数の要素を同時に削除したい場合もあるでしょう。
そのような場合には、以下のspliceメソッドを使用すると便利です。

spliceメソッド

配列要素を1つだけ削除したい場合は、上記のdelete演算子を使うのが手っ取り早いですが、spliceメソッドを用いることで、複数の要素を同時に削除することができます。

const tripList = [
  'Hawaii',
  'Cancun',
  'Santorini',
  'Jeju',
  'Karuizawa'
];

const changePlace = tripList.splice(1, 3); 

console.log(changePlace);  // ['Cancun', 'Santorini', 'Jeju'] 削除された配列要素
console.log(tripList);  // ['Hawaii', 'Karuizawa'] 残った配列要素　
console.log(tripList.length); // 2 残った配列要素の数　

tripList.splice(1, 3)により、'Cancun'、 'Santorini'、'Jeju'が削除されました。
splice(1, 3)は、インデックス1から3番目の要素を削除するという意味です。
インデックスを指定することで、どこからどこまでの範囲の要素を削除するか指定することができます。

また、残った要素は'Hawaii'、'Karuizawa'のみとなり、配列要素の数も2つという結果になっているのが確認できます。

spliceメソッドは、削除した要素を他の要素に置き換ることも可能です。

const tripList = [
  'Hawaii',
  'Cancun',
  'Santorini',
  'Jeju',
  'Karuizawa'
];

const changePlace = tripList.splice(1, 3, 'Bali', 'Rome', 'Montreal'); 

console.log(changePlace); // ['Cancun', 'Santorini', 'Jeju']
console.log(tripList);  // ['Hawaii', 'Bali', 'Rome', 'Montreal', 'Karuizawa']

splice(1, 3, 'Bali', 'Rome', 'Montreal')のように、削除したい要素のインデックスと置き換えたい値を引数に記述します。

これで'Cancun'、 'Santorini'、'Jeju'の代わりに、'Bali'、'Rome'、'Montreal'に置き換えることができました。

要素の抜き取り

配列メソッドには、要素を一部分を抜き取るものも用意されています。

sliceメソッド

sliceメソッドは、配列の要素を部分的に抜き取ることができます。

const arr = ['I', 'like', 'JavaScript', 'so', 'much'];

const sliceArr = arr.slice(3);

console.log(sliceArr);  // ['so', 'much']

slice(3)のように、sliceの引数にインデックスを指定すると、0から数えて3番目以降の要素の切り抜きができます。

sliceに第2引数を指定すると以下のような結果になります。

const arr = ['I', 'like', 'JavaScript', 'so', 'much'];

const sliceArr = arr.slice(0, 3);

console.log(sliceArr);  // ['I', 'like', 'JavaScript']

slice(0, 3)のように、第1引数と第2引数を記述し、要素の切り取り範囲を指定することができます。
注意点は、第2引数である終了位置の要素は含まれないことです。
そのため、0から2番目の要素'I'、'like'、'JavaScript'が切り取り対象となります。

要素の分割と結合

配列には、要素の分割と結合を行うためのメソッドも用意されています。

splitメソッド

splitメソッドは、文字列を分割し、配列に格納します。

const str = 'I, like, JavaScript, so, much';

const splitArr = str.split(',');

console.log(splitArr);  // ['I', 'like', 'JavaScript', 'so', 'much']

split(' , ')のように、文字列をカンマごとに区切り、一つずつ配列の要素として格納させます。

また、splitメソッドは、第2引数を記述することで、分割する要素の長さを指定することもできます。

const str = 'I, like, JavaScript, so, much';

const splitArr = str.split(',', 3);

console.log(splitArr);  // ['I', 'like', 'JavaScript']

split(' , ', 3)と第2引数を記述することで、終了インデックスを指定します。この時、余分な要素は無視されます。

joinメソッド

joinメソッドは、配列の要素を繋げて、文字列を返します。

上記のsplitで分割した要素をさらにjoinで結合し、文字列で返す流れをみてみましょう。

const str = 'I, like, JavaScript, so, much';

let result = str.split(',');  // 分割

console.log(result);  // ['I', 'like', 'JavaScript', 'so', 'much']

result = result.join(''); // 結合

console.log(result);  // 'I like JavaScript so much';

split(' , ')で文字列を分割し配列に格納しています。
そのあとに、join(' ')を行うことで、カンマごとに分割されている要素を繋ぎ、文字列を生成しています。
joinの引数には、join(' / ')やjoin(' – ')など、文字列の間に表示したい任意の記号を使うことも可能です。

まとめ

今回は、以下の配列メソッドを取り扱ってきました。

// ポイント
* 要素の追加は、pushメソッドとunshiftメソッド
* 要素の削除は、popメソッドとshiftメソッド
* 要素の抜き取りは、sliceメソッド
* 要素の分割は、splitメソッド
* 要素の結合は、joinメソッド

これらのメソッドは、効率的に配列操作を行うために役に立ちます。今後使用できそうなシチュエーションがあれば、ぜひ使ってみてください。

配列メソッドの関連記事

・配列メソッド -追加・削除・抜き取り・分割・結合（当記事）
・配列メソッド -検索
・配列メソッド -並び替え
・配列メソッド -繰り返し
・配列メソッド -新しい配列
・配列メソッド -forEach・map・filterの違い