TypeScript辞書ループ処理解説

JavaScriptとTypeScriptにおける辞書のループ処理

JavaScriptとTypeScriptでは、辞書（オブジェクト）の要素をループ処理するためのさまざまな方法があります。以下では、代表的な手法を解説します。

for...inループ

• TypeScript
  

  interface Person {
      name: string;
      age: number;
      city: string;
  }
  
  const person: Person = {
      name: "Alice",
      age: 30,
      city: "Tokyo"
  };
  
  for (const key in person) {
      console.log(key + ": " + person[key]);
  }
  

• JavaScript
  

  const person = {
      name: "Alice",
      age: 30,
      city: "Tokyo"
  };
  
  for (const key in person) {
      console.log(key + ": " + person[key]);
  }
  

説明

• ループ内で、プロパティ名を使ってオブジェクトの値にアクセスできます。
• for...inループは、オブジェクトのプロパティ名（キー）をループします。

Object.keys()メソッド

• 返された配列をfor...ofループで回すことで、プロパティ名にアクセスできます。
• Object.keys()メソッドは、オブジェクトのすべてのプロパティ名を配列として返します。

Object.entries()メソッド (TypeScriptのみ)

• for...ofループで回すことで、プロパティ名と値を同時にデストラクタリングして使用できます。
• Object.entries()メソッドは、オブジェクトの各プロパティ名と値をペアにした配列の配列を返します。

注意

• Object.keys()とObject.entries()は、オブジェクト自身のプロパティのみを対象とします。
• for...inループは、オブジェクトのプロトタイプチェーン上のプロパティもループします。

TypeScript辞書ループ処理解説

interface Person {
    name: string;
    age: number;
    city: string;
}

const person: Person = {
    name: "Alice",
    age: 30,
    city: "Tokyo"
};

for (const key in person) {
    console.log(key + ": " + person[key]);
}

interface Person {
    name: string;
    age: number;
    city: string;
}

const person: Person = {
    name: "Alice",
    age: 30,
    city: "Tokyo"
};

for (const key of Object.keys(person)) {
    console.log(key + ": " + person[key]);
}

Object.entries()メソッド

interface Person {
    name: string;
    age: number;
    city: string;
}

const person: Person = {
    name: "Alice",
    age: 30,
    city: "Tokyo"
};

for (const [key, value] of Object.entries(person)) {
    console.log(key + ": " + value);
}

interface Person {
    name: string;
    age: number;
    city: string;
}

const person: Person = {
    name: "Alice",
    age: 30,
    city: "Tokyo"
};

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

forEach()メソッド

interface Person {
    name: string;
    age: number;
    city: string;
}

const person: Person = {
    name: "Alice",
    age: 30,
    city: "Tokyo"
};

Object.entries(person).forEach(([key, value]) => {
    console.log(key + ": " + value);
});

• Object.entries()メソッドでオブジェクトをキーと値のペアの配列に変換し、forEach()メソッドを使用して各ペアに対して処理を行います。

reduce()メソッド

interface Person {
    name: string;
    age: number;
    city: string;
}

const person: Person = {
    name: "Alice",
    age: 30,
    city: "Tokyo"
};

const result = Object.entries(person).reduce((acc, [key, value]) => {
    acc[key] = value;
    return acc;
}, {});

console.log(result);