2021-07-15

JavaScript: 配列から空の要素を削除するにはfilter()が簡単

JavaScriptで、配列から空要素を削除する場合は、 filter()メソッドを使うと便利です。

filter()メソッドは、配列から特定条件の要素を抽出・削除するためのメソッドです。

filter()を使わない場合は、ループを使って1つずつチェックする方法もあります。

filter()を使った空要素の削除

filter()メソッドを使う場合は、次のようなコードとなります。

let arr = ['a', '', 'b', '', 'c'];

console.log(arr); // Array(5) [ "a", "", "b", "", "c" ]

let arr2 = arr.filter(function(s){return s !== '';});

console.log(arr2); // Array(3) [ "a", "b", "c" ]

1行のコードで空要素が削除できるので便利です。

配列をループさせて空要素を削除

filter()を使わない場合は、 次のように配列をループさせて1つずつチェックします。

let arr = ['a', '', 'b', '', 'c'];

console.log(arr); // Array(5) [ "a", "", "b", "", "c" ]

let arr2 = [];

for (let i = 0; i < arr.length; i++){
	if (arr[i] !== ''){
		arr2.push(arr[i]);
	}
}

console.log(arr2); // Array(3) [ "a", "b", "c" ]

ループ＋splice() を使って削除

上の例では別の配列にpush()して新たな配列を作りましたが、

別の配列を作らずに、splice()メソッドを使って要素を削除する方法もあります。

splice()メソッドは、要素を削除して要素間を詰めます。

同じ削除でもdelete演算子を使うと、要素間を詰めないので注意が必要です。

以下はループ＋splice()メソッドを使ったサンプルコードです。

配列の最後から先頭へとループを回しています。

let arr = ['a', '', 'b', '', 'c'];

console.log(arr); // Array(5) [ "a", "", "b", "", "c" ]

for (let i = arr.length - 1; i >= 0  ; i--){
	if (arr[i] === ''){
		arr.splice(i, 1); // 1つ削除
	}
}

console.log(arr); // Array(3) [ "a", "b", "c" ]