【JavaScript】配列の削除と初期化で使える7つの方法まとめ

今回はJavaScriptの配列について、
要素を削除したり、配列を初期化する方法(メソッド)についてまとめました。

それぞれのメソッドの構文や戻り値をしっかり理解して、
必要に応じた使い方ができるようになりましょう。

配列の要素を削除する

配列の先頭の要素を削除:shift()

構文 : 配列名.shift()
戻り値: 削除した要素。配列が空だった場合はundefinedが返る。

配列のshift()メソッドを実行すると、配列の先頭にある要素が削除されます。
戻り値(実行結果)には削除した要素が返ります。

複数個の要素を一度に削除することはできません。


let array1 = ["a", "b", "c"];

//要素を1つ削除
array1.shift();
console.log(array1); //=["b", "c"]

//戻り値をstr1に代入
let str1 = array1.shift();
console.log(array1); //=["c"]
console.log(str1); //=b

配列の末尾の要素を削除:pop()

構文 : 配列名.pop()
戻り値: 削除した要素。配列が空だった場合はundefinedが返る

配列のpop()メソッドを実行すると、配列の末尾にある要素が削除されます。
戻り値(実行結果)には削除した要素が返ります。

複数個の要素を一度に削除することはできません。


let array1 = ["a", "b", "c"];

//要素を1つ削除
array1.pop();
console.log(array1); //=["a", "b"]

//戻り値をstr1に代入
let str1 = array1.pop();
console.log(array1); //=["a"]
console.log(str1); //=b

配列の指定位置の要素を削除:splice()

splice()メソッドは引数が増えて少し複雑になります。

JavaScriptで配列の追加や結合を行う方法
でも紹介したメソッドですが、
第三引数を記入しないことで、単純な削除を行うことができます。

構文    : 配列名.splice(開始位置,削除する数,要素1[, …[, 要素N]])
第一引数  : 削除/追加する開始位置
第二引数  : 削除する要素の数
第三引数以降: 追加する要素(複数個指定可能)→記入しない
戻り値   : 削除した要素の配列

配列のsplice()メソッドを実行すると、
第一引数で指定した位置から、第二引数で指定した数の要素を削除することができます。
第三引数以降を指定すると、その値が追加されますが、入力しないと削除のみが行われます。

戻り値(実行結果)には、削除した要素が配列形式で返ります。

第一引数の値について
・配列の長さを超える値を指定すると、配列の末尾が指定される。
・負の値を指定すると、配列の末尾から数えた位置が指定されます。


let array1 = ["a", "b", "c", "d", "e", "f"];

//2(3番目)から1個を削除する。
array1.splice(2, 1);
console.log(array1); //=["a", "b", "d", "e", "f"]

//1(2番目)から2個を削除する。
array1.splice(1, 2);
console.log(array1); //=["a", "e", "f"]

//戻り値をarray1_lengthに代入
let array1_length = array1.splice(1, 2); 
console.log(array1); //=["a"]
console.log(array1_length); //=["e", "f"]

配列の指定要素を削除(配列の長さを保つ):delete

delete演算子を使います。

今までのshift()、pop()、splice()はメソッドで、
deleteは演算子であり、書き方が異なるので注意してください。

構文 : delete オブジェクト[プロパティ]

戻り値: プロパティが編集不可の場合falseが返り、それ以外はtrueが返る。

delete演算子を使うと、オブジェクト(配列)からプロパティ(要素)を削除されます。


let array1 = ["a", "b", "c"];

//配列から1(2番目)の要素を削除
delete array1[1]
console.log(JSON.stringify(array1)); //=["a",null,"c"]

delete演算子を使えば、要素を削除しても配列の長さが変わりません。

配列の長さを変えずに中身だけ削除したい場合に使用しましょう。

配列の指定要素を残して他を全て削除:filter()

filter()メソッドを使います。

構文 : 配列名.filter(コールバック関数)
引数(コールバック関数): 残したい要素の条件を指定する関数
戻り値: コールバック関数を実行後の配列

filter()メソッドを実行すると、引数で指定したコールバック関数が配列の全要素に実行されます。
戻り値(実行結果)には、コールバック関数の条件に一致した要素からなる配列が返されます。

今までのメソッドと違い、元々の配列は変更されません。
この点は、要素の結合を行うconcat()メソッドに似ていますね。

コールバック関数の引数には、配列の各要素が代入されます。
また、コールバック関数の戻り値は true or false になるように設定します。
具体例は以下のコードをみてください。

let array1 = ["a", "b", "c", 1, 2, 3, 4, "x", "y", "z"];

//配列から数値を削除して、array2に代入
let array2 = array1.filter(function(value) {
  return isNaN(value); //isNaN=valueが数値でなければtrue
});
console.log(array1); //=["a", "b", "c", 1, 2, 3, 4, "x", "y", "z"] ※変化なし
console.log(array2); //=["a", "b", "c", "x", "y", "z"]

//x,y、偶数値を残してarray3に代入
let array3 = array1.filter(function(value) {
  if(isNaN(value)){ 
    return value=="x" || value=="y"
  }
  else{
    return value%2==0
  }
});
console.log(array3); //=[2, 4, "x", "y"]

複雑なルールに応じて配列を削除したい場合におすすめの方法ですね。

配列を初期化する

空の配列を再代入する:=[]

構文  : 配列名=[]
[]を代入すれば、配列を初期化出来ます。非常にシンプルですね。

let array1 = ["a", "b", "c"];

array1=[];
console.log(array1); //=[]

配列の長さを0にする:length=0

構文 : 配列名.length=0

配列のlengthプロパティを0にすると、配列を何もない初期の状態にすることができます。


let array1 = [1, 2, 3];

//初期化
array1.length=0;
console.log(array1); //=[]

【補足】
配列のlengthプロパティを指定すれば、
・先頭から○つを残して他を削除する。
・配列の要素を○個にする。(空白部分はnullのまま)
ということも可能ですが、使う機会はあまりないと思います。

let array1 = ["a", "b", "c"];

//先頭から2つの要素を残し、他を削除する。
array1.length=2;
console.log(array1); //=["a","b"]

//入れるの長さを5にする。
array1.length=5;
console.log(array1); //=["a","b",null,null,null]

まとめ

先頭を削除したい → shift()
末尾を削除したい → pop()
上記以外の部分を削除したい → splice()
長さを保ったまま削除したい → delete演算子
複雑な条件に応じて削除したい → filter()
配列を初期化したい → []を代入するか、lengthを0にする

と使い分けると良いと思います。

初心者の方へ

配列は非常によく使用することになります。

いきなり全ての方法を完璧に覚える必要はありません。

配列の削除や初期化が必要になった時に、
この記事を振り返って、見ながらで良いので少しずつ使ってみてください。

何度も使うことで、徐々にそれぞれの方法をマスター出来るようになりますよ。

※ shift()、pop()、splice()、初期化はよく使うので今覚えてしまった方が良いかも。

Twitterでもプログラミングの有益情報を配信しています。フォローはこちらから→

おすすめの記事