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

JavaScriptでオブジェクトのプロパティ数を数える2つの方法(forループとObject.keys()の違い)

JavaScriptオブジェクトに含まれるプロパティの数を数える方法を、2つの異なるアプローチとともにわかりやすく解説します。

JavaScriptオブジェクトのプロパティ数を取得するには、主に以下の2つの方法があります。

  • for ループを使う方法
  • Object.keys() メソッドを使う方法

それぞれの使い方と違いを見ていきましょう。

forループを使ってオブジェクトのプロパティ数を数える

まず、次のような dog オブジェクトを用意します。

const dog = {
  name: "Naya",
  age: 2,
  color: "black",
  Breed: "Rottweiler mix",
}

この dog オブジェクトのプロパティ数を数えるには、まず初期値 0 を持つ変数 count を宣言します。

let count = 0

次に、dog オブジェクトをループ処理し、プロパティが見つかるたびに count 変数に 1 を加算していきます。

for (let properties in dog) {
  count = count + 1
}

最後に console.log() で結果を出力してみましょう。

console.log(count)
// 結果: 4

コードが正しく書けていれば、4 という結果が得られます。

Object.keys()を使ってオブジェクトのプロパティ数を数える

もうひとつの方法として、JavaScript標準の Object.keys() メソッドを使うこともできます。このメソッドは、オブジェクト上のすべての列挙可能なプロパティ(詳細は後述)を数えます。

先ほどの dog オブジェクトを再利用し、今度は dog オブジェクトを Object.keys() に渡して、length プロパティで配列の長さを取得します。

const dog = {
  name: "Naya",
  age: 2,
  color: "black",
  Breed: "Rottweiler mix",
}

let count = Object.keys(dog).length

console.log(count)
// 結果: 4

ご覧のとおり、結果は同じです。しかし、本当に常に同じなのでしょうか?

答えは「場合による」です。文脈によって結果が変わることがあります。

forループとObject.keys()の違い

for ループと Object.keys() の違いは次のとおりです。

  • for ループは、オブジェクト自身のプロパティだけでなく、そのオブジェクトの外部からリンクされた(継承された)プロパティもカウントします。
  • デフォルトでは、Object.keys() メソッドはオブジェクト自身の列挙可能なプロパティのみをカウント(列挙)し、リンクされたプロパティは対象外です。

なお、「列挙(enumeration)」とは「数え上げる」という意味の用語です。

ここでいう「リンクされたプロパティ」とは何でしょうか?具体的な例で確認してみましょう。

先ほどの Object.keys() の例をベースに、今度は __proto__ プロパティを使って、dog オブジェクトを animal オブジェクトにリンク(継承)させてみます。

// 新しいオブジェクト
let animal = {
  fourLegs: true,
}

const dog = {
  name: "Naya",
  age: 2,
  color: "black",
  Breed: "Rottweiler mix",
}

// dogオブジェクトをanimalオブジェクトにリンク
dog.__proto__ = animal

var count = Object.keys(dog).length
console.log(count)
// 結果: 4

doganimal の合計プロパティ数は5つのはずですが、リンクしたのに結果が4になるのはなぜでしょうか?

それは、Object.keys() がオブジェクト自身の(列挙可能な)プロパティのみをカウントし、リンクされたプロパティは含めないためです。したがって、上記の例では animal オブジェクト側の fourLegs プロパティはカウントされません。

次に、同じ例を for ループでカウントしてみましょう。

const animal = {
  fourLegs: true,
}

const dog = {
  name: "Naya",
  age: 2,
  color: "black",
  Breed: "Rottweiler mix",
}

// dogオブジェクトをanimalオブジェクトにリンク
dog.__proto__ = animal

let count = 0

for (properties in dog) {
  count = count + 1
}

console.log(count)
// 結果: 5

今度はすべての5つのプロパティがカウントされました。Object.keys() とは異なり、for ループではオブジェクトのすべてのプロパティが対象となり、リンクされた(継承元の)オブジェクトのプロパティも含まれるためです。

このように、どちらのアプローチを選ぶかで結果が変わるため、用途に応じて使い分けることが重要です。

まとめ

  • オブジェクトのプロパティ数を数える方法は2つあります。for ループを使う方法と、Object.keys() メソッドを使う方法です。
  • リンクされた(継承された)オブジェクトのプロパティもカウントに含めたい場合は、for ループを使用します。
  • オブジェクト自身の列挙可能なプロパティのみを数えたい場合は、Object.keys() を使用します。
  1. JavaScriptでオブジェクトのプロパティを削除する方法をわかりやすく解説

    JavaScriptでオブジェクトのプロパティを削除するには、delete演算子を使用します。delete演算子は、指定したオブジェクトからプロパティそのものを取り除き、削除に成功した場合はtrueを返します。以下に、オブジェクトのプロパティを削除するサンプルコードを示します。サンプルコード<!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0

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

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