在 TypeScript 中使用 forEach() 遍历对象

Iterating over an Object with forEach() in TypeScript

forEach()在 TypeScript 中迭代一个对象：

使用该Object.entries()方法获取键值对数组。
调用forEach()数组上的方法。
该forEach()方法将在每次迭代时使用包含键值对的数组进行调用。

索引.ts


const obj = {
  name: 'Tom',
  country: 'Chile',
};

// ✅ forEach after Object.keys
(Object.keys(obj) as (keyof typeof obj)[]).forEach((key, index) => {
  // 👇️ name Tom 0, country Chile 1
  console.log(key, obj[key], index);
});

// ✅ forEach after Object.entries (better)
Object.entries(obj).forEach(([key, value], index) => {
  // 👇️ name Tom 0, country Chile 1
  console.log(key, value, index);
});

在第一个示例中，我们使用了
Object.keys
方法来获取对象键的数组。

但是，TypeScript 将的返回值类型设置Object.keys()为
string[]。

索引.ts


const obj = {
  name: 'Tom',
  country: 'Chile',
};

// 👇️ string[]
const result = Object.keys(obj);
console.log(Object.keys(obj)); // 👉️ ['name', 'country']

Object.keys()由于并非每个字符串都是对象中的键，因此在我们能够通过键访问对象值之前，我们必须键入的返回值。

我们使用
keyof typeof
将的类型设置为Object.keys()包含的键的数组obj，因此我们可以安全地访问它的值。

索引.ts


const obj = {
  name: 'Tom',
  country: 'Chile',
};

// ✅ forEach after Object.keys
(Object.keys(obj) as (keyof typeof obj)[]).forEach((key, index) => {
  // 👇️ name Tom 0, country Chile 1
  console.log(key, obj[key], index);
});

如果我们不使用
类型断言，我们将在尝试通过键访问对象中的值时出错。

索引.ts


const obj = {
  name: 'Tom',
  country: 'Chile',
};

Object.keys(obj).forEach((key, index) => {
  // ⛔️ Error: No index signature with a parameter
  // of type 'string' was found on
  // type '{ name: string; country: string; }'.
  console.log(key, obj[key], index);
});

TypeScript 告诉我们key有一个类型 ofstring并且对象只有键name和country，所以我们不能使用 anystring来索引对象。

一种更简洁的方法是使用
Object.entries
方法。

索引.ts


const obj = {
  name: 'Tom',
  country: 'Chile',
};

// ✅ forEach after Object.entries
Object.entries(obj).forEach(([key, value], index) => {
  // 👇️ name Tom 0, country Chile 1
  console.log(key, value, index);
});

该Object.entries()方法返回一个键值对数组，我们可以在其上调用该forEach()方法。

索引.ts


const obj = {
  name: 'Tom',
  country: 'Chile',
};

// 👇️ const result: [string, string][]
const result = Object.entries(obj);

// 👇️ [['name', 'Tom'], ['country', 'Chile']]
console.log(result);

该方法在每次迭代forEach时传递一个包含元素的数组- 键和值。2

我们可以使用解构直接获取键和值。

索引.ts


const obj = {
  name: 'Tom',
  country: 'Chile',
};

// ✅ forEach after Object.entries
Object.entries(obj).forEach(([key, value], index) => {
  // 👇️ name Tom 0, country Chile 1
  console.log(key, value, index);
});

我们

在函数的参数列表中使用了解构赋值。

这与下面的代码行非常相似。

索引.ts


const [key, value] = ['name', 'Tom'];

console.log(key); // 👉️ "name"
console.log(value); // 👉️ "Tom"

我们基本上是将数组元素分配给变量（保留顺序）。

–