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

JavaScriptでオブジェクトの列挙可能なプロパティ値を配列として取得する方法

JavaScriptでは、Object.keys() や for...in ループなどを使ってオブジェクトからキーや値を取り出すことができますが、これらの方法だけでは値を配列として直接取得することはできません。配列形式のデータは、フィルタリングやマップ処理など、さまざまな場面で非常に便利です。

そこで活躍するのが Object.values() メソッドです。このメソッドを使うと、オブジェクトが持つ列挙可能なプロパティの値を要素とする配列を受け取ることができます。

構文

Object.values(obj);

Object.values() は引数としてオブジェクトを受け取り、そのオブジェクトのプロパティ値だけを集めた新しい配列を返します。

サンプルコード1

次の例では、数値を値に持つオブジェクトを Object.values() に渡し、プロパティ値が配列として表示されます。また、Array.isArray() を使って、戻り値が本当に配列であるかどうかも確認しています。

<html>
<body>
<script>
    var obj = {"one":1,"two": 2,"three": 3};
    document.write(Array.isArray(Object.values(obj)));
    document.write("</br>");
    document.write(Object.values(obj));
</script>
</body>
</html>

出力

true
1,2,3

true と表示されていることから、Object.values() の戻り値が正しく配列になっていることが分かります。

サンプルコード2

次の例では、文字列を含むオブジェクトに対して同じメソッドを使用しています。Array.isArray() によって結果が配列かどうかを判定し、その後にプロパティ値の一覧を出力しています。

<html>
<body>
    <script>
        var object = {"name":"Elon","company":"Tesla","age":"47","property":"1 Billion dollars"};
        document.write(Array.isArray(Object.values(object)));
        document.write("</br>");
        document.write(Object.values(object));
    </script>
</body>
</html>

出力

true
Elon,Tesla,47,1 Billion dollars

このように Object.values() を使えば、キー名を意識せずにオブジェクトの値だけを簡単に配列として扱うことができます。取得した配列は map() や filter()、forEach() などの配列メソッドと組み合わせることで、より柔軟なデータ操作が可能になります。

  1. JavaScriptで配列の要素を同じ配列内に複製する方法

    JavaScriptでは、concat()メソッドとsort()メソッドを組み合わせることで、既存の配列の要素を同じ配列内に複製することができます。ここでは、実際に動作するサンプルコードを使って、その手順をわかりやすく解説します。 コード例 以下は、配列の要素を同じ配列内に複製するためのコード例です。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" cont

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

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