JavaScript | filter()で配列から空値を削除する方法

JavaScript,JavaScript 配列,Other

filterで配列から空値を削除する方法

JavaScriptのfilter()関数のオプションにBooleanを指定して配列から空値を削除する方法の紹介です。

filter(Boolean)の基本

filter()関数の引数にBooleanを指定することで、配列の値から空の値、0、null、undefinedとなっているものを削除して詰めます。

新しい配列 = 配列.filter(Boolean);

filter()関数は結果の配列を返しますが、元の配列に影響はしません。

0が削除されることに注意します。
また、半角スペースや改行コードなどは削除されません。

filter(Boolean)の動作サンンプル

サンプルでは、配列[ “JavaScript", 0, 1, " “, “", undefined, null]を用意して、filter(Boolean)を通しています。

空値、0、undefined、nullのデータが削除された結果を取得しています。

See the Pen JavaScript filter(Boolean) by yochans (@yochans) on CodePen.

サンプルコード

<p id="output_area"></p>
let output_area = document.getElementById('output_area');

let array = [ "JavaScript", 0, 1, " ", "", undefined, null];

let new_array = array.filter(Boolean);

output_area.innerHTML = JSON.stringify(new_array);

※サンプルでは配列をHTML上に見やすく表示する為に、jsonに変換して出力しています。

数値0の値を残したい場合

filter()関数は数値0(ゼロ)を偽値として判別され除外します。

配列内のデータが数値のみの場合であればfilter(Number.isFinite)を利用することで0を含めた数値を残し、空値、文字列などを除外した値を得ることが可能です。

let array = [ 0, 1, 2," ", "", undefined, null];
console.log(array.filter(Number.isFinite));
//[0,1,2]

文字列などと複合している場合、typeofなどを利用して数値かどうか判別して0を削除させない工夫が必要となります。