for...in、Object.keys、forEach... あなたに最適な方法は？

2024-04-02

JavaScriptでオブジェクトのプロパティを反復処理する方法

for...in ループ

最も基本的な方法は、for...in ループを使用する方法です。

const obj = {
  name: "John Doe",
  age: 30,
  city: "Tokyo"
};

for (const key in obj) {
  console.log(`キー: ${key}, 値: ${obj[key]}`);
}

このコードは、obj オブジェクトのすべてのプロパティを反復処理し、プロパティ名と値を出力します。

注意点

for...in ループは、オブジェクト自身のプロパティだけでなく、プロトタイプチェーンから継承されたプロパティもすべて反復処理します。
削除されたプロパティは、ループで処理されません。
ループ処理中にプロパティが追加された場合、そのプロパティはループで処理されない可能性があります。

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

const obj = {
  name: "John Doe",
  age: 30,
  city: "Tokyo"
};

const keys = Object.keys(obj);

for (const key of keys) {
  console.log(`キー: ${key}, 値: ${obj[key]}`);
}

このコードは、Object.keys() メソッドを使用して、obj オブジェクトのすべてのプロパティ名の配列を取得し、その配列をループ処理して、プロパティ名と値を出力します。

Object.keys() メソッドは、プロパティ名の配列を返します。プロパティの値を取得するには、obj[key] のように記述する必要があります。

const obj = {
  name: "John Doe",
  age: 30,
  city: "Tokyo"
};

const values = Object.values(obj);

for (const value of values) {
  console.log(`値: ${value}`);
}

const obj = {
  name: "John Doe",
  age: 30,
  city: "Tokyo"
};

const entries = Object.entries(obj);

for (const [key, value] of entries) {
  console.log(`キー: ${key}, 値: ${value}`);
}

シンプルな方法でオブジェクトのプロパティを反復処理したい場合は、for...in ループを使用できます。
プロパティ名の配列を取得したい場合は、Object.keys() メソッドを使用できます。

オブジェクトのプロパティを反復処理する方法は、他にもいくつかあります。
オブジェクトの構造や処理内容に合わせて、適切な方法を選択してください。

const obj = {
  name: "John Doe",
  age: 30,
  city: "Tokyo"
};

// for...in ループ
for (const key in obj) {
  console.log(`キー: ${key}, 値: ${obj[key]}`);
}

// Object.keys() メソッド
const keys = Object.keys(obj);

for (const key of keys) {
  console.log(`キー: ${key}, 値: ${obj[key]}`);
}

// Object.values() メソッド
const values = Object.values(obj);

for (const value of values) {
  console.log(`値: ${value}`);
}

// Object.entries() メソッド
const entries = Object.entries(obj);

for (const [key, value] of entries) {
  console.log(`キー: ${key}, 値: ${value}`);
}

このコードを実行すると、以下の出力が得られます。

キー: name, 値: John Doe
キー: age, 値: 30
キー: city, 値: Tokyo
キー: name, 値: John Doe
キー: age, 値: 30
キー: city, 値: Tokyo
値: John Doe
値: 30
値: Tokyo
キー: name, 値: John Doe
キー: age, 値: 30
キー: city, 値: Tokyo

forEach() メソッドは、配列の要素を反復処理するメソッドですが、オブジェクトのプロパティを反復処理するのにも使用できます。

const obj = {
  name: "John Doe",
  age: 30,
  city: "Tokyo"
};

obj.forEach((value, key) => {
  console.log(`キー: ${key}, 値: ${value}`);
});

forEach() メソッドは、オブジェクトのすべてのプロパティを反復処理しますが、プロパティ名の順序は保証されません。

for...of ループは、イテレータブルなオブジェクトを反復処理するループです。オブジェクトはイテレータブルなオブジェクトなので、for...of ループを使用してプロパティを反復処理できます。

const obj = {
  name: "John Doe",
  age: 30,
  city: "Tokyo"
};

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

スプレッド構文は、オブジェクトのプロパティを配列に展開するために使用できます。

const obj = {
  name: "John Doe",
  age: 30,
  city: "Tokyo"
};

const keys = Object.keys(obj);
const values = [...keys].map(key => obj[key]);

console.log(keys); // ["name", "age", "city"]
console.log(values); // ["John Doe", 30, "Tokyo"]