for...inループからスプレッド構文まで！JavaScriptオブジェクトのプロパティ表示テクニック

2024-04-05

JavaScriptオブジェクトのプロパティを一覧表示する方法

for...in ループを使う

これは最も基本的な方法です。for...in ループを使ってオブジェクトのプロパティを一つずつループし、プロパティ名を表示します。

const person = {
  name: "山田太郎",
  age: 30,
  address: "東京都渋谷区"
};

for (const prop in person) {
  console.log(prop); // "name", "age", "address" を順番に出力
}

注意点:

for...in ループは、オブジェクトのプロパティだけでなく、プロトタイプチェーン上のプロパティもすべて出力します。
プロパティ名の出力順序は保証されていません。

Object.keys() メソッドは、オブジェクトのすべてのプロパティ名の配列を返します。

const person = {
  name: "山田太郎",
  age: 30,
  address: "東京都渋谷区"
};

const props = Object.keys(person);
console.log(props); // ["name", "age", "address"]

// 配列の要素を使ってプロパティにアクセス
console.log(person[props[0]]); // "山田太郎"

const person = {
  name: "山田太郎",
  age: 30,
  address: "東京都渋谷区"
};

const props = Object.getOwnPropertyNames(person);
console.log(props); // ["name", "age", "address"]

// 配列の要素を使ってプロパティにアクセス
console.log(person[props[0]]); // "山田太郎"

シンボルプロパティは返しません。

スプレッド構文を使う

ES6以降では、スプレッド構文を使ってオブジェクトのプロパティを配列に変換できます。

const person = {
  name: "山田太郎",
  age: 30,
  address: "東京都渋谷区"
};

const props = [...Object.keys(person)];
console.log(props); // ["name", "age", "address"]

// 配列の要素を使ってプロパティにアクセス
console.log(person[props[0]]); // "山田太郎"

ライブラリを使う

Lodashなどのライブラリを使うと、より簡単にオブジェクトのプロパティを一覧表示できます。

const _ = require("lodash");

const person = {
  name: "山田太郎",
  age: 30,
  address: "東京都渋谷区"
};

const props = _.keys(person);
console.log(props); // ["name", "age", "address"]

// 配列の要素を使ってプロパティにアクセス
console.log(person[props[0]]); // "山田太郎"

ライブラリを使う場合は、ライブラリのインストールと読み込みが必要です。

JavaScriptオブジェクトのプロパティを一覧表示するには、いくつかの方法があります。どの方法を使うかは、状況によって使い分けてください。

const person = {
  name: "山田太郎",
  age: 30,
  address: "東京都渋谷区"
};

// 1. for...in ループを使う
console.log("**for...in ループ**");
for (const prop in person) {
  console.log(prop);
}

// 2. Object.keys() メソッドを使う
console.log("**Object.keys() メソッド**");
const props = Object.keys(person);
console.log(props);

// 3. Object.getOwnPropertyNames() メソッドを使う
console.log("**Object.getOwnPropertyNames() メソッド**");
const ownProps = Object.getOwnPropertyNames(person);
console.log(ownProps);

// 4. スプレッド構文を使う
console.log("**スプレッド構文**");
const spreadProps = [...Object.keys(person)];
console.log(spreadProps);

// 5. ライブラリを使う
console.log("**ライブラリを使う**");
const _ = require("lodash");
const lodashProps = _.keys(person);
console.log(lodashProps);

出力例:

**for...in ループ**
name
age
address

**Object.keys() メソッド**
["name", "age", "address"]

**Object.getOwnPropertyNames() メソッド**
["name", "age", "address"]

**スプレッド構文**
["name", "age", "address"]

**ライブラリを使う**
["name", "age", "address"]

JavaScriptオブジェクトのプロパティを一覧表示するその他の方法

const person = {
  name: "山田太郎",
  age: 30,
  address: "東京都渋谷区"
};

const props = Reflect.ownKeys(person);
console.log(props); // ["name", "age", "address"]

オブジェクトのデバッガーを使用する

ブラウザの開発者ツールには、オブジェクトのデバッガー機能が備わっています。デバッガーを使用すると、オブジェクトのプロパティを一覧表示したり、プロパティの値を変更したりすることができます。

JSON.stringify() メソッドは、オブジェクトをJSON文字列に変換します。JSON文字列を解析することで、オブジェクトのプロパティを一覧表示することができます。

const person = {
  name: "山田太郎",
  age: 30,
  address: "東京都渋谷区"
};

const json = JSON.stringify(person);
const props = JSON.parse(json);
console.log(props); // {name: "山田太郎", age: 30, address: "東京都渋谷区"}