迹忆客 专注技术分享

在 React 中查找数组中的对象：

1. 在数组上调用 find() 方法，并传递给它一个函数。
2. 该函数应返回对相关属性的相等检查。
3. find() 方法返回数组中满足条件的第一个值。

const App = () => {
  const arr = [
    {id: 1, country: 'Austria'},
    {id: 2, country: 'Germany'},
    {id: 3, country: 'Austria'},
  ];

  // ✅ Find first object that matches condition
  const found = arr.find(obj => {
    return obj.id === 1;
  });

  // 👇️ {id: 1, country: 'Austria'}
  console.log(found);

  // -----------------------

  // ✅ Find multiple objects that satisfy condition
  const filtered = arr.filter(obj => {
    return obj.country === 'Austria';
  });

  // 👇️ [{id: 1, country: 'Austria'}, {id: 3, country: 'Austria'}]
  console.log(filtered);

  return (
    <div>
      {/* 👇️ render single object */}
      {found && (
        <div>
          <h2>id: {found.id}</h2>
          <h2>country: {found.country}</h2>
        </div>
      )}

      <hr />

      {/* 👇️ render array of objects */}
      {filtered.map(obj => {
        return (
          <div key={obj.id}>
            <h2>id: {obj.id}</h2>
            <h2>country: {obj.country}</h2>
          </div>
        );
      })}
    </div>
  );
};

export default App;

代码示例展示了如何：

1. 在数组中查找第一个符合条件的对象
2. 查找满足条件的多个对象

我们传递给 Array.find() 方法的函数会针对数组中的每个元素（对象）进行调用，直到它返回真值或遍历整个数组。

在每次迭代中，我们检查对象的 id 属性是否等于 1。

如果条件返回真，则 find() 方法返回相应的对象并短路。

当我们只需要获取第一个符合特定条件的对象时，这非常方便。

没有浪费的迭代，因为一旦满足条件，find() 方法就会短路并返回对象。

如果我们传递给 find 方法的回调函数从未返回真值，则 find 方法返回 undefined。

const arr = [
    {id: 1, country: 'Austria'},
    {id: 2, country: 'Germany'},
    {id: 3, country: 'Austria'},
  ];

  const notFound = arr.find(obj => {
    return obj.id === 123;
  });
  console.log(notFound); // 👉️ undefined

这就是我们使用逻辑 && 运算符的原因 - 来检查找到的变量是否存储了真值。

使用 filter() 方法在 React 的数组中查找多个满足条件的对象。 filter() 方法接受一个函数作为参数，并返回一个仅包含满足条件的元素的数组。

const App = () => {
  const arr = [
    {id: 1, country: 'Austria'},
    {id: 2, country: 'Germany'},
    {id: 3, country: 'Austria'},
  ];

  // ✅ Find multiple objects that satisfy condition
  const filtered = arr.filter(obj => {
    return obj.country === 'Austria';
  });

  // 👇️ [{id: 1, country: 'Austria'}, {id: 3, country: 'Austria'}]
  console.log(filtered);

  return (
    <div>
      {/* 👇️ render array of objects */}
      {filtered.map(obj => {
        return (
          <div key={obj.id}>
            <h2>id: {obj.id}</h2>
            <h2>country: {obj.country}</h2>
          </div>
        );
      })}
    </div>
  );
};

export default App;

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

如果该函数返回真值，则该元素将添加到 filter() 方法返回的数组中。

请注意 ，无论条件满足多少次，过滤方法都会遍历整个数组。

这样，我们就可以从对象数组中获取满足条件的多个对象。

换句话说，我们过滤数组以仅包含满足条件的对象。

如果我们传递给 filter 方法的回调函数从不返回真值，则 filter 方法返回一个空数组。

我们可以使用 Array.map() 方法在我们的 React 组件中渲染对象数组。