JavaScript: オブジェクトの奥底まで探る！全てのプロパティ値を取得するテクニック集

2024-06-26

JavaScriptオブジェクトのすべてのプロパティ値を取得する方法（キーを知らない場合）

for...in ループ

最も基本的な方法は、for...inループを使用して、オブジェクトのプロパティをすべて反復処理する方法です。以下のコード例のように、プロパティ名を取得し、そのプロパティ名を使って値を取得します。

const obj = {
  name: "John Doe",
  age: 30,
  occupation: "Software Engineer"
};

for (const prop in obj) {
  console.log(`${prop}: ${obj[prop]}`);
}

このコードは以下の出力を表示します。

name: John Doe
age: 30
occupation: Software Engineer

利点:

シンプルでわかりやすい

プロパティの順序は保証されない
プロトタイプチェーン上のプロパティも取得してしまう可能性がある

Object.keys() メソッドは、オブジェクトのプロパティ名の配列を返します。以下のコード例のように、配列をループ処理して、それぞれのプロパティ名を使って値を取得できます。

const obj = {
  name: "John Doe",
  age: 30,
  occupation: "Software Engineer"
};

const keys = Object.keys(obj);
for (const key of keys) {
  console.log(`${key}: ${obj[key]}`);
}

このコードは、for...in ループと同じ出力を表示します。

for...in ループよりも高速で効率的

const obj = {
  name: "John Doe",
  age: 30,
  occupation: "Software Engineer"
};

const values = Object.values(obj);
for (const value of values) {
  console.log(value);
}

John Doe
30
Software Engineer

プロパティ名の情報が得られない

const obj = {
  name: "John Doe",
  age: 30,
  occupation: "Software Engineer"
};

const entries = Object.entries(obj);
for (const [key, value] of entries) {
  console.log(`${key}: ${value}`);
}

プロパティ名と値を同時に取得できる

JavaScriptオブジェクトからすべてのプロパティ値を取得するには、さまざまな方法があります。それぞれの方法の特徴と使い分けを理解し、状況に応じて適切な方法を選択することが重要です。

補足

上記のコード例は、単純なオブジェクトを例としています。より複雑なオブジェクトの場合は、エラー処理やその他の考慮事項が必要になる場合があります。
オブジェクトのプロパティをループ処理する際には、オブジェクトが変更される可能性があることに注意する必要があります。

[JavaScriptオブジェクトのプロパティ一覧を取得する方法を現役エンジニアが解説【初心者向け]](

// サンプルコード

// オブジェクトを作成
const obj = {
  name: "John Doe",
  age: 30,
  occupation: "Software Engineer"
};

// `for...in` ループを使用してプロパティと値を出力
console.log("**for...in ループ**");
for (const prop in obj) {
  console.log(`${prop}: ${obj[prop]}`);
}

// `Object.keys()` メソッドを使用してプロパティと値を出力
console.log("\n**Object.keys() メソッド**");
const keys = Object.keys(obj);
for (const key of keys) {
  console.log(`${key}: ${obj[key]}`);
}

// `Object.values()` メソッドを使用して値を出力
console.log("\n**Object.values() メソッド**");
const values = Object.values(obj);
for (const value of values) {
  console.log(value);
}

// `Object.entries()` メソッドを使用してキーと値を出力
console.log("\n**Object.entries() メソッド**");
const entries = Object.entries(obj);
for (const [key, value] of entries) {
  console.log(`${key}: ${value}`);
}

**for...in ループ**
name: John Doe
age: 30
occupation: Software Engineer

**Object.keys() メソッド**
name: John Doe
age: 30
occupation: Software Engineer

**Object.values() メソッド**
John Doe
30
Software Engineer

**Object.entries() メソッド**
name: John Doe
age: 30
occupation: Software Engineer

このサンプルコードでは、4つの方法すべてを使用して、オブジェクト obj のすべてのプロパティ値を取得しています。それぞれの方法の出力が同じであることを確認できます。

JavaScriptオブジェクトのすべてのプロパティ値を取得するその他の方法

Generator関数を使用して、オブジェクトのプロパティをイテレータとして取得することができます。以下のコード例のように、yield キーワードを使用して、プロパティ名と値を順番に返します。

const obj = {
  name: "John Doe",
  age: 30,
  occupation: "Software Engineer"
};

function getAllProperties(obj) {
  for (const prop in obj) {
    yield `${prop}: ${obj[prop]}`;
  }
}

const generator = getAllProperties(obj);
for (const entry of generator) {
  console.log(entry);
}

name: John Doe
age: 30
occupation: Software Engineer

メモリ効率が良い

コードが少し複雑になる

Proxyオブジェクトを使用して、オブジェクトのプロパティアクセスをインターセプトし、すべてのプロパティ値を取得することができます。以下のコード例のように、getトラップを使用して、プロパティにアクセスするたびにログを出力します。

const obj = {
  name: "John Doe",
  age: 30,
  occupation: "Software Engineer"
};

const handler = {
  get: function(target, prop, receiver) {
    console.log(`Accessing property: ${prop}`);
    return Reflect.get(target, prop, receiver);
  }
};

const proxy = new Proxy(obj, handler);

console.log(proxy.name); // プロパティにアクセスするとログが出力される
console.log(proxy.age);
console.log(proxy.occupation);

Accessing property: name
John Doe
Accessing property: age
30
Accessing property: occupation
Software Engineer

オブジェクトのプロパティアクセスを柔軟に制御できる

パフォーマンスが低下する可能性がある

ライブラリを使用する

lodashなどのライブラリには、オブジェクトのプロパティを処理するための便利なユーティリティ関数が含まれています。以下のコード例は、lodash.forInを使用して、オブジェクト obj のすべてのプロパティと値を出力する方法を示しています。

const obj = {
  name: "John Doe",
  age: 30,
  occupation: "Software Engineer"
};

const _ = require('lodash');

_.forIn(obj, (value, key) => {
  console.log(`${key}: ${value}`);
});