遍历 TypeScript 中对象的键和值

Question

在普通的 JavaScript 中，我们可以迭代 object 道具和值，如下所示：

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

在 TypeScript 中，此语法错误，因为 TS 编译器显示以下消息：

“元素隐式具有‘任何’类型，因为‘字符串’类型的表达式不能用于索引对象类型”。

是否有另一种方法不使用 Map<string, T> 来执行此操作并获取每个键的值？ 我在使用 React 和 TS 构建应用程序时遇到了这个问题，我在 state 中有一个 object，我需要这样做：

const stateJSX: HTMLParagraphElement[] = Object.keys(obj).map(key => <p>`${key}: ${obj[key]}`<p>);

我想看看其他人的方法和想法：）谢谢。

Answer 1

使用Object.entries遍历键和值：

Object.entries(obj).map(([key, value]) => `${key}: ${value}`)

Answer 2

使用 'Object.entries' Object.entries(obj).forEach(([key, value]) => console.log( ${key}: ${value} ))

Answer 3

您可以在keyof运算符的帮助下轻松使用它：

const test = <T extends Record<string, unknown>>(obj: T) => {
 return (Object.keys(obj) as Array<keyof T>).map(key => obj[key])
}

您应该确保 TS，该key变量可以用作obj参数的索引

Answer 4

Object.keys()

要使用Object.keys() ，（如原始问题所示），您可以添加一个类型转换，指示 object 是可索引类型：

for (const key of Object.keys(obj)) {
  console.log(`${key}: ${(obj as {[key: string]: string})[key]}`);
}

或者在key上使用类型转换：

for (const key of Object.keys(obj)) {
  console.log(`${key}: ${obj[key as keyof typeof obj]}`);
}

Object.entries()

Object.entries()可以在没有map()的情况下使用，如下所示：

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