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

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

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

配列の基本操作をおさらいしたい方は、以下を参考にしてみてください。

要素の追加

配列には、要素を追加できるメソッドが主に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

実行結果
JavaScript splice

「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']

実行結果
JavaScript slice

「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']

実行結果
JavaScript slice

「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']

実行結果
JavaScript join

「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';

実行結果
JavaScript split

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

まとめ

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

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

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

Javascript関連記事