【JavaScript】配列から「0」「undefined」nullや空文字列などの値を削除する方法

JavaScriptの配列から「0」「false」「undefined」「null」そして空文字列（""）といったfalsyな値を削除したい場合、splice()メソッドを使うのが基本的なアプローチです。ここでは、forループとsplice()を組み合わせて不要な値を取り除く方法を解説します。

対象となる配列

例として、次のような配列があったとしましょう。

var allValues = [10, false, 100, 150, '', undefined, 450, null];

forループとsplice()を使った実装例

以下が、forループとsplice()を使った完全なコードです。

コード

var allValues = [10, false, 100, 150, '', undefined, 450, null];
console.log("元の配列=");
console.log(allValues);
for (var index = 0; index < allValues.length; index++) {
    if (!allValues[index]) {
        allValues.splice(index, 1);
        index--;
    }
}
console.log("false、undefined、null、''などを削除した後=");
console.log(allValues);

このコードのポイントは以下の3点です。

• !allValues[index]：否定演算子（!）により、falsyな値（false、0、空文字列、null、undefined、NaN）を一括して判定できます。
• splice(index, 1)：該当する要素を配列から1つ取り除きます。
• index--：要素を削除すると後続の要素が前に詰められるため、インデックスを1つ戻すことでチェック漏れを防ぎます。

プログラムの実行方法

上記のプログラムを実行するには、Node.js環境で次のコマンドを使用します。ここではファイル名をdemo88.jsとしています。

node demo88.js

実行結果

実行すると、コンソールに次の出力が表示されます。

PS C:\Users\Amit\JavaScript-code> node demo88.js
Actual Array=
[ 10, false, 100, 150, '', undefined, 450, null ]
After removing false,undefined,null or ''..etc=
[ 10, 100, 150, 450 ]

ご覧のとおり、数値以外のfalsyな値がすべて取り除かれ、[10, 100, 150, 450]というクリーンな配列が得られました。

補足：filter()を使ったよりシンプルな方法

ES5以降の環境では、filter()メソッドとBooleanコンストラクタを組み合わせることで、さらに簡潔に書けます。

var allValues = [10, false, 100, 150, '', undefined, 450, null];
var cleanedValues = allValues.filter(Boolean);
console.log(cleanedValues); // [ 10, 100, 150, 450 ]

filter(Boolean)はfalsyな値をすべて除去するため、splice()を使う場合と同じ結果になります。元の配列を変更せずに新しい配列を作りたい場合は、こちらの方法がおすすめです。一方、既存の配列そのものを直接編集したいケースでは、splice()を使う方法が有効です。