我们只可以在数组上调用 map() 方法。所以我们需要得到对象的键组成的数组，或者值组成的数组。

我们传递给 Array.map 方法的函数被调用，其中包含数组中的每个元素和当前迭代的索引。在上面的例子中，我们使用 index 作为元素上的 key 属性，如果可以的话，更好的方式是使用更加稳定的、独一无二的标识符。

当遍历对象的键时，使用对象的键作为 key 属性是安全可靠的，因为对象中的键保证是唯一的。

export default function App() {
  const employee = {
    id: 1,
    name: 'Bob',
    salary: 123,
  return (
      {/* 👇️ iterate object KEYS */}
      {Object.keys(employee).map(key => {
        return (
          <div key={key}>
              {key}: {employee[key]}
然而，如果遍历对象的值，那么使用对象的值作为key属性是不安全的，除非你可以确保所有的值在对象中都是独一无二的。
由于性能的原因，React需要在内部使用key属性。这有助于库确保只重新渲染已经改变的数组元素。说到这里，你不会看到使用索引和一个稳定的、唯一的标识符之间有任何明显的区别，除非你要处理成千上万的数组元素。
遍历对象的值
在React中，循环遍历对象的值：
使用Object.values() 方法得到对象的值组成的数组。
使用map()方法迭代对象值组成的数组。
export default function App() {
  const employee = {
    id: 1,
    name: 'Bob',
    salary: 123,
  return (
      {/* 👇️ iterate object VALUES */}
      {Object.values(employee).map((value, index) => {
        return (
          <div key={index}>
            <h2>{value}</h2>
Object.values
我们使用Object.values 方法得到对象的值组成的数组。
const employee = {
  id: 1,
  name: 'Bob',
  salary: 123,
// 👇️ [1, 'Bob', 123]
console.log(Object.values(employee));
如果你只想渲染对象的值，你可以使用此方法直接访问它们。
Object.entries
你也可以使用Object.entries 方法来返回对象的键值对数组。
export default function App() {
  const employee = {
    id: 1,
    name: 'Bob',
    salary: 123,
  console.log(Object.entries(employee));
  return (
      {Object.entries(employee).map(([key, value]) => {
        return (
          <div key={key}>
              {key}: {employee[key]}
下面是Object.entries()方法的输出。
const employee = {
  id: 1,
  name: 'Bob',
  salary: 123,
// 👇️ [
//      ['id', 1],
//      ['name', 'Bob'],
//      ['salary', 123],
const result = Object.entries(employee);
console.log(result);
该方法返回一个包含键值对子数组的数组。
Array.forEach()
另一种方法是使用Array.forEach()方法来迭代对象的键，并将JSX元素推送到一个数组中，然后我们进行渲染。
export default function App() {
  const employee = {
    id: 1,
    name: 'Bob',
    salary: 123,
  const results = [];
  Object.keys(employee).forEach(key => {
    results.push(
      <h2 key={key}>
        {key}: {employee[key]}
      </h2>,
  return (
      {results}
Array.forEach()方法在每个键上都会被调用，然而forEach()方法返回undefined，所以我们不能直接在JSX代码中使用它。相反，我们把JSX元素推到一个数组中，然后再进行渲染。
需要注意的是，这是一个比较间接的方法，你不会在React应用程序中经常看到它的使用。