迹忆客 专注技术分享

在 React 中过滤对象数组：

1. 在数组上调用 filter() 方法。
2. 在每次迭代中，检查是否满足某个条件。
3. Array.filter 方法返回一个包含所有满足条件的元素的数组

export default function App() {
  const employees = [
    {id: 1, name: 'Jiyik', country: 'China'},
    {id: 2, name: 'Fql', country: 'China'},
    {id: 3, name: 'Carl', country: 'Canada'},
    {id: 4, name: 'Dean', country: 'Germany'},
  ];

  // 👇️ filter with 1 condition
  const filtered = employees.filter(employee => {
    return employee.country === 'China';
  });
  // 👇️ [{id: 1, name: 'Jiyik', country: 'China'},
  //     {id: 3, name: 'Fql', 'country: 'China'}]
  console.log(filtered);

  // 👇️ filter with 2 conditions
  const filtered2 = employees.filter(employee => {
    return employee.country === 'China' && employee.id === 2;
  });

  // 👇️ [{id: 3, name: 'Fql', country: 'China'}]
  console.log('filtered2: ', filtered2);

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

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

我们传递给 Array.filter 方法的函数将被数组中的每个元素调用。

filter() 方法返回一个新数组，该数组仅包含回调函数为其返回真值的元素。

第一个示例检查每个对象的 country 属性是否等于 China。 如果满足条件，我们返回 true 并且对象被包含在新数组中。

如果条件从未满足，则 Array.filter 函数返回一个空数组。

第二个示例展示了如何使用逻辑 AND (&&) 运算符来过滤多个条件。

我们可以根据需要多次链接逻辑 AND (&&) 运算符，并且必须满足所有条件才能将元素包含在新数组中。

注意 ，过滤后可以直接调用 map() 方法。

export default function App() {
  const employees = [
    {id: 1, name: 'Jiyik', country: 'China'},
    {id: 2, name: 'Fql', country: 'China'},
    {id: 3, name: 'Carl', country: 'Canada'},
    {id: 4, name: 'Dean', country: 'Germany'},
  ];

  return (
    <div>
      {employees
        .filter(employee => {
          return employee.country === 'China';
        })
        .map(employee => {
          return (
            <div key={employee.id}>
              <h2>name: {employee.name}</h2>
              <h2>country: {employee.country}</h2>

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

filter() 方法返回一个数组，因此我们可以在之后立即调用 map()。

如果我们只需要筛选满足数组中某个条件的单个对象，请使用 Array.find() 方法。

export default function App() {
  const employees = [
    {id: 1, name: 'Jiyik', country: 'China'},
    {id: 2, name: 'Fql', country: 'China'},
    {id: 3, name: 'Carl', country: 'Canada'},
    {id: 4, name: 'Dean', country: 'Germany'},
  ];

  const employee = employees.find(obj => {
    return obj.country === 'China';
  });

  // 👇️ {id: 1, name: 'Jiyik', country: 'China'}
  console.log(employee);

  return (
    <div>
      {employee && (
        <div>
          <h2>Name: {employee.name}</h2>
          <h2>Country: {employee.country}</h2>
        </div>
      )}
    </div>
  );
}

我们传递给 Array.find 的函数被数组中的每个元素调用，直到它返回一个真实值或遍历所有元素。

一旦回调函数返回一个真值，相应的数组元素就会从 Array.find 中返回。

如果回调函数从不返回真值，则 Array.find 返回 undefined。

这就是我们使用逻辑 AND (&&) 运算符的原因 - 以确保员工变量存储真实值，因此我们不会尝试访问未定义的属性并获得运行时错误。

即使该数组包含 2 个其 country 属性等于 China 的对象，也仅返回第一个对象并且 Array.find 方法短路。