在 React 中过滤对象数组

作者

在 React 中过滤对象数组

Filter an Array of Objects in React

在 React 中过滤对象数组：

  1. 调用filter()数组上的方法。
  2. 在每次迭代中，检查是否满足特定条件。
  3. 这些Array.filter方法返回一个数组，其中包含满足条件的所有元素
应用程序.js
export default function App() {
  const employees = [
    {id: 1, name: 'Alice', country: 'Canada'},
    {id: 2, name: 'Bob', country: 'Belgium'},
    {id: 3, name: 'Carl', country: 'Canada'},
    {id: 4, name: 'Dean', country: 'Germany'},
  ];

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

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

  // 👇️ [{id: 3, name: 'Carl', country: 'Canada'}]
  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每个对象的属性是否等于
Canada。如果满足条件，我们返回true并且对象被包含在新数组中。

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

第二个示例显示如何使用逻辑 AND (&&) 运算符对多个条件进行筛选。

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

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

应用程序.js
export default function App() {
  const employees = [
    {id: 1, name: 'Alice', country: 'Canada'},
    {id: 2, name: 'Bob', country: 'Belgium'},
    {id: 3, name: 'Carl', country: 'Canada'},
    {id: 4, name: 'Dean', country: 'Germany'},
  ];

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

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

过滤对象数组

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

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

应用程序.js
export default function App() {
  const employees = [
    {id: 1, name: 'Alice', country: 'Canada'},
    {id: 2, name: 'Bob', country: 'Belgium'},
    {id: 3, name: 'Carl', country: 'Canada'},
    {id: 4, name: 'Dean', country: 'Germany'},
  ];

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

  // 👇️ {id: 1, name: 'Alice', country: 'Canada'}
  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。

这就是我们使用逻辑与 (&&) 运算符的原因 – 以确保employee
变量存储真值，因此我们不会尝试访问属性
undefined并获得运行时错误。

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

–

发表评论