迹忆客 专注技术分享

在 React 中循环对象数组：

1. 使用 map() 方法迭代数组。
2. 我们传递给 map() 的函数会为数组中的每个元素调用。
3. 该方法返回一个新数组，其中包含传入函数的结果。

export default function App() {
  const employees = [
    {id: 1, name: 'Alice', country: 'Austria'},
    {id: 2, name: 'Jiyik', country: 'China'},
    {id: 3, name: 'Carl', country: 'Canada'},
    {id: 4, name: 'Dean', country: 'Denmark'},
    {id: 5, name: 'Ethan', country: 'Egypt'},
  ];

  return (
    <div>
      {employees.map(employee => {
        return (
          <div key={employee.id}>
            <h2>name: {employee.name}</h2>
            <h2>country: {employee.country}</h2>

            <hr />
          </div>
        );
      })}
    </div>
  );
}

我们传递给 Array.map 方法的函数会为数组中的每个元素调用。

在每次迭代中，我们将最外层元素的 key 属性设置为唯一值，并渲染对象的值。

解构对象的属性#

我们还可以解构对象的属性，使我们的代码更易于阅读。

export default function App() {
  const employees = [
    {id: 1, name: 'Alice', country: 'Austria'},
    {id: 2, name: 'Jiyik', country: 'China'},
    {id: 3, name: 'Carl', country: 'Canada'},
    {id: 4, name: 'Dean', country: 'Denmark'},
    {id: 5, name: 'Ethan', country: 'Egypt'},
  ];

  return (
    <div>
      {employees.map(({id, name, country}) => {
        return (
          <div key={id}>
            <h2>name: {name}</h2>
            <h2>country: {country}</h2>

            <hr />
          </div>
        );
      })}
    </div>
  );
}

我们解构了对象参数的参数，因此我们不必访问对象上的每个属性。

或者，我们可以使用 Array.forEach 方法。

使用 forEach() 遍历对象数组

这是一个三步过程：

1. 使用 forEach() 方法迭代数组。
2. 声明一个空数组来存储 JSX 元素。
3. 在每次迭代中，将对象的 JSX 推送到数组中。

export default function App() {
  const employees = [
    {id: 1, name: 'Alice', country: 'Austria'},
    {id: 2, name: 'Jiyik', country: 'China'},
    {id: 3, name: 'Carl', country: 'Canada'},
    {id: 4, name: 'Dean', country: 'Denmark'},
    {id: 5, name: 'Ethan', country: 'Egypt'},
  ];

  const results = [];

  employees.forEach(employee => {
    results.push(
      <div key={employee.id}>
        <h2>name: {employee.name}</h2>
        <h2>country: {employee.country}</h2>

        <hr />
      </div>,
    );
  });

  return (
    <div>
      {results}
    </div>
  );
}

这个例子达到了同样的结果。

我们传递给 forEach() 方法的函数被数组中的每个元素（对象）调用。

我们不是直接渲染对象的值，而是将每个对象的 JSX 标记推送到结果数组中。

最后一步是呈现结果数组。

使用 for...of 遍历对象数组

我们还可以使用 for...of 循环遍历对象数组。

export default function App() {
  const employees = [
    {id: 1, name: 'Alice', country: 'Austria'},
    {id: 2, name: 'Jiyik', country: 'China'},
    {id: 3, name: 'Carl', country: 'Canada'},
    {id: 4, name: 'Dean', country: 'Denmark'},
    {id: 5, name: 'Ethan', country: 'Egypt'},
  ];

  const results = [];

  for (const employee of employees) {
    results.push(
      <div key={employee.id}>
        <h2>name: {employee.name}</h2>
        <h2>country: {employee.country}</h2>

        <hr />
      </div>,
    );
  }

  return (
    <div>
      {results}
    </div>
  );
}

for...of 循环也可用于迭代对象数组。

当我们必须使用 break 关键字过早退出循环时，我们可以使用 for...of 而不是 forEach() 方法。

break 关键字不能在 forEach() 方法中使用，但在 for...of 循环中受支持。