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

JavaScriptでオブジェクトの長さを取得する方法を解説！Object.keys()の活用術

JavaScriptにおいて、lengthプロパティは配列や文字列にのみ適用できる仕様になっています。そのため、オブジェクトに対してlengthプロパティを呼び出すと、undefinedが返されます。

オブジェクトにlengthを使った場合の挙動

<html>
<body>
<script>
    var object = {prop:1, prop:2};
    document.write(object.length);
</script>
</body>
</html>

出力結果

undefined

上記のように、オブジェクトにはlengthプロパティが存在しないため、「undefined」と表示されてしまいます。

一方、配列や文字列に対してlengthプロパティを使用すると、それぞれの長さが正しく表示されます。

配列・文字列の場合のlengthプロパティ

<html>
<body>
<script>
    var string = 'hello';
    var array = [1,2,3];
    var len1 = string.length;
    var len2 = array.length;
    document.write(len1);
    document.write("<br>");
    document.write(len2);
</script>
</body>
</html>

出力結果

5
3

このように、文字列「hello」の長さは「5」、配列[1,2,3]の要素数は「3」と、期待通りの値が得られます。

Object.keys()でオブジェクトの長さを取得する方法

JavaScriptにはObject.keys()という便利なメソッドが用意されています。これはオブジェクトが持つすべてのプロパティ名（キー）を配列として返すものです。そこで、Object.keys()の戻り値である配列に対してlengthプロパティを組み合わせると、オブジェクト内のプロパティの総数、つまりオブジェクトの長さを取得することができます。

サンプルコード

<html>
<body>
<script>
    var object = {one: 1, two:2, three:3};
    document.write(Object.keys(object).length);
</script>
</body>
</html>

出力結果

3

この例では、オブジェクト「object」に「one」「two」「three」の3つのプロパティが定義されているため、「3」という結果が出力されました。

まとめ

  • lengthプロパティは配列と文字列専用であり、オブジェクトに直接使うとundefinedになる。
  • Object.keys(オブジェクト).lengthとすることで、オブジェクトのプロパティ数（長さ）を簡単に取得できる。

オブジェクトのサイズを調べたい場面は実務でも頻繁にあります。ぜひObject.keys()メソッドを覚えておきましょう。

  1. JavaScriptでオブジェクトのサイズ（プロパティ数）を取得する方法

    JavaScriptでは、配列の要素数は length プロパティで簡単に取得できますが、オブジェクトには標準で length プロパティが存在しません。そのため、オブジェクトに含まれるプロパティの数（サイズ）を知りたい場合は、独自の処理を実装する必要があります。対象となるオブジェクトの例たとえば、次のようなオブジェクトを考えてみましょう。const obj = { name: Ramesh, age: 34, occupation: HR Manager, address: Tilak Nagar, New Delhi, experience: 13

  2. JavaScriptでオブジェクトの値を取得する方法：Object.values()と_.values()の違いを解説

    JavaScriptにはObject.values()など、オブジェクトの値を取得するためのメソッドがいくつか用意されています。しかし、これらの標準メソッドでは値を取り出すまでの手順がやや長くなりがちです。そこで便利なのが、JavaScriptライブラリ「Underscore.js」が提供する_.values()メソッドです。このメソッドを使えば、forループを記述することなく、オブジェクトの値を直接取得できます。 Object.values()を使った例 まずは標準メソッドであるObject.values()を使った例です。このメソッドで取得した値を順番に表示するには、for...ofループ