配列の空要素を削除する

配列から空要素だけ削除

配列にある空要素を一括で削除するときはfilterメソッドを実行します。

以下の例では、空要素を含む配列が入っている変数testに対してfilterメソッドを使って空要素を削除します。

JS コード例

let test = [ 'cat', 'dog', null, ,'penguin', false, undefined, 0, 'lion'];

let clean = test.filter(Boolean);
console.log(clean);
// (4) ["cat", "dog", "penguin", "lion"]

filterメソッドには要素を削除するか判定するメソッド（条件式）を渡します。
上の例ではBoolenaのコンストラクタ関数を渡して判定式を実行します。
filterメソッドの中では、次のように要素の値を1つずつBooleanのコンストラクタ関数を実行していき、戻り値がtrueの要素のみ空じゃない要素として配列に残しています。

JS コード例

console.log(Boolean('cat')); // true
console.log(Boolean('dog')); // true
console.log(Boolean(null)); // false
console.log(Boolean()); // false
console.log(Boolean('penguin')); // true
console.log(Boolean(false)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean(0)); // false
console.log(Boolean('lion')); // true

filterメソッドは戻り値として空要素を削除した配列を返しますが、元の配列を直接変更することはありません。
そのため、上の例のように戻り値を受け取る変数を用意します。

空要素を削除する方法は他にもありますが、以下のアロー演算子を使った方法はIE11では未対応のため構文エラーになってしまいます。
上記のBooleanのコンストラクタ関数を使った方法についてはIE環境でも正常に動作するため、特別な理由がない限りはこの方法をお勧めします。

JS コード例

// パターン1： v => v
test = [ 'cat', 'dog', null, ,'penguin', false, undefined, 0, 'lion'];
clean = test.filter(v => v);
console.log(clean);
// (4) ["cat", "dog", "penguin", "lion"]

// パターン2： v => !!v
test = [ 'cat', 'dog', null, ,'penguin', false, undefined, 0, 'lion'];
clean = test.filter(v => !!v);
console.log(clean);
// (4) ["cat", "dog", "penguin", "lion"]

特定の要素だけ削除

filterメソッドで配列に残す要素を細かく指定したいときは、削除を判定する関数を独自に用意します。
以下の例では、値に論理値falseを持つ要素は削除しないようにしています。

まず、filterメソッドに渡すcheckEmpty関数を用意します。

JS コード例

function checkEmpty(element) {
  return element !== undefined && element !== 0 && element !== null;
}

続いて、filterメソッドを実行して配列の空要素を削除します。

JS コード例

let test = [ 'cat', 'dog', null, ,'penguin', false, undefined, 0, 'lion'];
let clean = test.filter(checkEmpty);
console.log(clean);
// (5) ["cat", "dog", "penguin", false, "lion"]

値にfalseを持つ要素は削除されなくなりました。
以上のように、削除する関数を用意することで配列に残す要素は指定することができます。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。