在 React 中过滤对象数组

React 4月前 55

在 React 中过滤对象数组：

在数组上调用 filter() 方法。
在每次迭代中，检查是否满足某个条件。
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>
  );
}

在 React 中过滤对象数组

我们传递给 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>
  );
}

在 React 中过滤对象数组

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>
  );
}