JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで配列からfalsyな値を削除する方法【_.compact()の使い方】

JavaScriptのライブラリ underscore.js には、配列からすべてのfalsyな値を取り除くための _.compact() メソッドが用意されています。ここでいうfalsyな値とは、NaN、undefined、空文字列（""）、false、0 のことです。このメソッドは、falsyな値がすべて除去された新しい配列を返します。元の配列は変更されないため、安全に利用できます。

構文

_.compact( array );

引数として配列を1つ受け取り、falsyな値が取り除かれた新しい配列を戻り値として返します。

使用例

次の例では、配列に含まれる NaN、false、空文字列、undefined がすべて除去され、有効な値だけが出力されます。

<html>
<body>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/0.10.0/lodash.min.js"></script>
</head>
<body>
    <script>
        document.write(_.compact(["zero", 1, NaN, false, 2, '', 3, undefined]));
    </script>
</body>
</html>

出力

zero,1,2,3

なお、falsyな値が引用符（" "）で囲まれている場合、それは文字列として扱われるため、falsyな値とは見なされません。

次の例では、0 が引用符で囲まれた文字列 "0" として配列に含まれているため、falsyな値として除去されず、そのまま出力に表示されます。同様に 'NaN' も文字列なので除去されません。

使用例

<html>
<body>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/0.10.0/lodash.min.js"></script>
</head>
<body>
    <script>
        document.write(_.compact(["0", 1, 'NaN', false, 2, '', 3, undefined]));
    </script>
</body>
</html>

出力

0,1,NaN,2,3

補足：ライブラリを使わない方法

外部ライブラリを使用せず、標準の Array.prototype.filter() メソッドと Boolean コンストラクタを組み合わせることでも、同じ結果を得られます。

const arr = ["zero", 1, NaN, false, 2, '', 3, undefined];
const result = arr.filter(Boolean);
console.log(result); // ["zero", 1, 2, 3]

モダンなJavaScript開発では、この filter(Boolean) の書き方が広く使われています。状況に応じて使い分けるとよいでしょう。

  1. JavaScriptのArray.values()メソッドとは？使い方とサンプルコードを徹底解説

    JavaScriptのArray.values()メソッドとは？ JavaScriptのArray.values()メソッドは、対象の配列に含まれるすべての値を格納したイテレーターオブジェクトを返します。ES2015（ES6）以降で利用可能なこのメソッドは、for...ofループやスプレッド構文（[...arr]）と組み合わせることで、配列の各要素を効率的に取り出せます。 なお、keys()やentries()がインデックス情報も一緒に返すのに対し、values()は純粋に「値」だけを順番に提供する点が大きな特徴です。 基本構文 arr.values() 引数は不要で、戻り値として新しいArr

  2. 複数の値でJavaScript配列の要素を検索する方法

    JavaScriptである配列（arr）が、別の配列（arr1）の複数の値・すべての要素を含んでいるかどうかを確認したい場面はよくあります。そんなときは、every()メソッドとincludes()メソッドを組み合わせることで、シンプルに判定できます。以下はそのサンプルコードです。 コード例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content=