【JavaScript】「配列に値を追加する方法」と「配列の値の削除する方法」

1. はじめに

JavaScriptでの配列はリストの内容を格納したり、様々な処理を実現するのに重要な役割を果たします。

配列は定義してお終いというのはあまりなく配列に値を追加したり、削除したりすることは多いです。

今回はJavaScriptで「配列に値を追加する方法」と「配列の値の削除する方法」を紹介します。

2. 配列に値を追加する方法

pushメソッドを使用する

まずは最も基本的な方法のpushメソッドです。
配列の末尾に値を追加することができます。

let array= [1, 2, 3];
array.push(4);
console.log(array); // [1, 2, 3, 4]

concatメソッドを使用する

concatは連結の意味を持ちます。テキストの連結などでよく使われますが配列でconcatメソッドを使うと末尾に値を簡単に追加することができます。

let array = [1, 2, 3];
array = array.concat(4);
console.log(array); // [1, 2, 3, 4]

配列のインデックスを指定して値を代入する

配列[配列のインデックス]として最後+1の要素に値を入れることでJavaScriptは値を配列に追加することができます。
JavaやC言語でこの書き方はエラーになってしまいますがJavaScriptでは可能なので短く視認性の良いソースコードが書ける方法です。

let array= [1, 2, 3];
array[array.length] = 4;
console.log(array); // [1, 2, 3, 4]

3. 配列から値を削除する方法

popメソッドを使用する

配列のpopメソッドは末尾の要素を削除することができます。

let array= [1, 2, 3, 4];
array.pop();
console.log(array); // [1, 2, 3]

shiftメソッドを使用する

配列のshiftメソッドは末尾の要素を削除することができます。

let array= [1, 2, 3, 4];
array.shift();
console.log(array); // [2, 3, 4]

指定したインデックスの要素を削除する

配列で先頭、末尾ではなく途中のインデックスを削除することは多いでしょう。 配列のspliceメソッドを使うことで指定のインデックスの値を削除できます。

let array= [1, 2, 3, 4];
let indexToRemove = 2;
array.splice(indexToRemove, 1);
console.log(array); // [1, 2, 4]

filterメソッドを使用して特定の値を削除する

配列の値の削除にはfilterメソッドを使う方法もあります。 これは条件に合致する値のみの配列を取得できるため一括の配列操作に適しています。

let array= [1, 2, 3, 4];
let valueToRemove = 3;
array= array.filter(function (value) {
    return value !== valueToRemove;
});
console.log(array); // [1, 2, 4]