JavaScriptオブジェクトのループ処理：for-inループ vs. Object.keys()

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]);
}

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

注意点: for-in ループはオブジェクト自身のプロパティだけでなく、プロトタイプチェーン上のプロパティもループ処理します。オブジェクト自身のプロパティのみをループ処理したい場合は、hasOwnProperty() メソッドを使用する必要があります。

for (const key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(key, obj[key]);
  }
}

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]);
}

このコードは for-in ループと同様の動作になりますが、プロパティ名の配列を取得してからループ処理するため、より効率的です。

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…of ループ

ES6で導入された for…of ループを使用すると、オブジェクトのすべてのプロパティ値をループ処理できます。

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

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

このコードは Object.values() メソッドと同様の動作になりますが、より簡潔に記述できます。

JavaScriptオブジェクトをループ処理するには、いくつかの方法があります。それぞれの方法のメリットとデメリットを理解し、状況に合わせて使い分けることが重要です。

// オブジェクトを作成
const obj = {
  name: "John Doe",
  age: 30,
  city: "Tokyo",
  hobbies: ["読書", "映画鑑賞", "旅行"],
};

// 1. `for-in` ループ
console.log("**for-in ループ**");
for (const key in obj) {
  console.log(key, obj[key]);
}

// 2. `Object.keys()` メソッド
console.log("**Object.keys() メソッド**");
const keys = Object.keys(obj);
for (const key of keys) {
  console.log(key, obj[key]);
}

// 3. `Object.values()` メソッド
console.log("**Object.values() メソッド**");
const values = Object.values(obj);
for (const value of values) {
  console.log(value);
}

// 4. `Object.entries()` メソッド
console.log("**Object.entries() メソッド**");
const entries = Object.entries(obj);
for (const [key, value] of entries) {
  console.log(key, value);
}

// 5. `for…of` ループ
console.log("**for…of ループ**");
for (const value of obj) {
  console.log(value);
}

// オブジェクトの配列を作成
const objects = [
  {
    name: "John Doe",
    age: 30,
    city: "Tokyo",
  },
  {
    name: "Jane Doe",
    age: 25,
    city: "Osaka",
  },
];

// オブジェクトの配列をループ処理
console.log("**オブジェクトの配列をループ処理**");
for (const obj of objects) {
  console.log(obj.name, obj.age, obj.city);
}

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

**for-in ループ**
name John Doe
age 30
city Tokyo
hobbies ["読書", "映画鑑賞", "旅行"]

**Object.keys() メソッド**
name John Doe
age 30
city Tokyo
hobbies ["読書", "映画鑑賞", "旅行"]

**Object.values() メソッド**
John Doe
30
Tokyo
["読書", "映画鑑賞", "旅行"]

**Object.entries() メソッド**
name John Doe
age 30
city Tokyo
hobbies ["読書", "映画鑑賞", "旅行"]

**for…of ループ**
John Doe
30
Tokyo
["読書", "映画鑑賞", "旅行"]

**オブジェクトの配列をループ処理**
John Doe 30 Tokyo
Jane Doe 25 Osaka

JavaScriptオブジェクトをループ処理するその他の方法

forEach() メソッドは、配列やオブジェクトの要素をループ処理するために使用できます。

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

obj.forEach((value, key) => {
  console.log(key, value);
});

ジェネレータを使用すると、ループ処理をより柔軟に記述できます。

function* objectEntries(obj) {
  for (const key in obj) {
    yield [key, obj[key]];
  }
}

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

for (const [key, value] of objectEntries(obj)) {
  console.log(key, value);
}

このコードは Object.entries() メソッドと同様の動作しますが、ジェネレータを使用しているので、ループ処理を途中で中断したり、再開したりすることができます。

Lodashなどのライブラリを使用すると、オブジェクトをループ処理するための便利なメソッドが提供されます。

const _ = require("lodash");

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

_.forEach(obj, (value, key) => {
  console.log(key, value);
});