JS オブジェクトの反復処理

1. 一般的なメソッド

JavaScriptには、オブジェクトを操作・反復するための強力なメソッド（Method）が用意されています。

// ソースオブジェクトからターゲットオブジェクトへプロパティをコピーする
Object.assign(target, source)

// 既存のオブジェクトをプロトタイプとして新しいオブジェクトを作成する
Object.create(object)

// オブジェクトの [キー, 値] ペアの配列を返す
Object.entries(object)

// キー/値のリスト（配列）からオブジェクトを作成する
Object.fromEntries()

// オブジェクトのキー（プロパティ名）の配列を返す
Object.keys(object)

// オブジェクトのプロパティ値の配列を返す
Object.values(object)

// コールバック関数に従ってオブジェクトの要素をグループ化する
Object.groupBy(object, callback)

2. JavaScript Object.assign()

Object.assign() メソッドは、1つまたは複数のソースオブジェクト（Source Object）からターゲットオブジェクト（Target Object）へプロパティをコピーします。

// ターゲットオブジェクトの作成
const person1 = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

// ソースオブジェクトの作成
const person2 = {firstName: "Anne", lastName: "Smith"};

// ソースをターゲットに割り当て（上書きコピー）
Object.assign(person1, person2);

3. JavaScript Object.entries()

ECMAScript 2017では、オブジェクトに Object.entries() メソッドが追加されました。
Object.entries() は、オブジェクトに含まれるキー/値ペアの配列を返します。

const person = {
  firstName : "John",
  lastName : "Doe",
  age : 50,
  eyeColor : "blue"
};

let text = Object.entries(person);

Object.entries() を使うと、ループ内でオブジェクトを簡単に扱うことができます。

const fruits = {Bananas: 300, Oranges: 200, Apples: 500};

let text = "";
for (let [fruit, value] of Object.entries(fruits)) {
  text += fruit + ": " + value + "<br>";
}

また、Object.entries() を使用すると、オブジェクトから Map への変換も容易になります。

const fruits = {Bananas: 300, Oranges: 200, Apples: 500};

const myMap = new Map(Object.entries(fruits));

Object.entries() は、2017年3月以降、すべてのモダンブラウザでサポートされています。

4. JavaScript Object.fromEntries()

fromEntries() メソッドは、キー/値ペアのリスト（反復可能オブジェクトなど）から新しいオブジェクトを作成します。

const fruits = [
  ["apples", 300],
  ["pears", 900],
  ["bananas", 500]
];

const myObj = Object.fromEntries(fruits);

5. JavaScript Object.values()

Object.values() は Object.entries() と似ていますが、オブジェクトの「値」のみを格納した一次元配列を返します。

const person = {
  firstName : "John",
  lastName : "Doe",
  age : 50,
  eyeColor : "blue"
};

let text = Object.values(person);

Object.values() は、2017年3月以降、すべてのモダンブラウザでサポートされています。

6. JavaScript Object.groupBy()

ES2024では、JavaScriptに Object.groupBy() メソッドが導入されました。
Object.groupBy() メソッドは、コールバック関数から返される文字列に基づいて、オブジェクトの要素をグループ化します。
このメソッドは、元のオブジェクトを変更しません。

// 配列の作成
const fruits = [
  {name: "apples", quantity: 300},
  {name: "bananas", quantity: 500},
  {name: "oranges", quantity: 200},
  {name: "kiwi", quantity: 150}
];

// 要素をグループ化するためのコールバック関数
function myCallback({ quantity }) {
  return quantity > 200 ? "ok" : "low";
}

// 数量（quantity）でグループ化を実行
const result = Object.groupBy(fruits, myCallback);

6.1 ブラウザのサポート状況

Object.groupBy() は ECMAScript 2024 の新機能です。2024年3月以降の主要なブラウザでサポートされています。

ES2024 の機能は比較的新しいため、古いブラウザをサポートする必要がある場合は、代替コード（ポリフィル / Polyfill）の使用を検討してください。

6.2 Object.groupBy() と Map.groupBy() の違い

両者の主な違いは返り値の型です。

• Object.groupBy()：要素を JavaScript オブジェクトにグループ化します。
• Map.groupBy()：要素を Map オブジェクトにグループ化します。

7. JavaScript Object.keys()

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

// オブジェクトの作成
const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

// キーの取得
const keys = Object.keys(person);

8. JavaScript for...in ループ

JavaScript の for...in ステートメントは、オブジェクトのプロパティを順に反復（ループ）処理します。

for (let 変数 in オブジェクト) {
  // 実行するコード
}

for...in ループ内のコードブロックは、各プロパティに対して一度ずつ実行されます。

オブジェクトのプロパティを反復処理する例：

const person = {
  fname: " John",
  lname: " Doe",
  age: 25
};

for (let x in person) {
  txt += person[x];
}