在 React 中删除数组中的重复项

作者

在 React 中从数组中删除重复项

Remove duplicates from an Array in React

要从 React 中的数组中删除重复项，请将数组传递给Set
构造函数，例如[...new Set(arr)]. a 中的每个值Set都必须是唯一的，因此任何重复项都会被自动删除。

应用程序.js
const App = () => {
  const fruits = ['apple', 'apple', 'banana', 'banana', 'kiwi'];

  const withoutDuplicates = [...new Set(fruits)];

  // 👇️ ['apple', 'banana', 'kiwi']
  console.log(withoutDuplicates);

  return (
    <div>
      {withoutDuplicates.map(fruit => {
        return (
          <div key={fruit}>
            <h2>{fruit}</h2>
          </div>
        );
      })}
    </div>
  );
};

export default App;
如果您需要从对象数组中删除重复项，请向下滚动到下一个代码片段。

我们传递给
Set
构造函数的参数是一个可迭代的——在我们的例子中是一个数组。

数组的所有元素都添加到新创建的. 但是，该对象只能存储唯一值，因此会自动删除任何重复值。 SetSet

最后一步是使用
Spread 运算符 (…)
将集合的值解包到一个新数组中。

如果您需要从 React 中的对象数组中删除重复项：

  1. 创建一个将存储唯一对象 ID 的空数组。
  2. filter()在原始数组上调用该方法。
  3. 在每次迭代中，检查唯一 ID 数组是否包含当前元素的 ID。
  4. 如果包含 ID，则将对象的 ID 添加到唯一 ID 数组，并将对象添加到结果数组。
应用程序.js
const App = () => {
  const employees = [
    {id: 1, name: 'Alice'},
    {id: 1, name: 'Alice'},
    {id: 2, name: 'Bob'},
    {id: 2, name: 'Bob'},
  ];

  const uniqueIds = [];

  const uniqueEmployees = employees.filter(element => {
    const isDuplicate = uniqueIds.includes(element.id);

    if (!isDuplicate) {
      uniqueIds.push(element.id);

      return true;
    }

    return false;
  });

  // 👇️ [{id: 1, name: 'Tom'}, {id: 2, name: 'Nick'}]
  console.log(uniqueEmployees);

  return (
    <div>
      {uniqueEmployees.map(employee => {
        return (
          <div key={employee.id}>
            <h2>id: {employee.id}</h2>
            <h2>name: {employee.name}</h2>
          </div>
        );
      })}
    </div>
  );
};

export default App;

我们传递给
Array.filter
方法的函数会针对数组中的每个元素进行调用。

在每次迭代中，我们检查唯一 ID 数组是否包含当前元素的 ID。

如果它确实包含它，我们就有一个副本。

如果不包含它，我们需要将 ID 添加到唯一 ID 数组并从函数返回一个真值。

filter如果传递给该方法的函数返回真值，则该方法仅向结果数组添加一个元素。

该uniqueEmployees数组不包含任何重复项。

请注意，在示例中，我们使用id属性作为对象的标识符。在您的情况下，对象的标识符可能被称为其他名称。

本质上，我们的解决方案是仅将唯一 ID 添加到uniqueIds数组中，并且仅当对象的 ID 不在数组中时才将对象添加到结果数组中
uniqueIds。

–

发表评论