在 JavaScript 中使用 Map 删除重复项

野性酷女 2023-09-26 23:59 12阅读 0赞

从数组中删除重复项是 JavaScript 开发中的一项常见任务，使用Set构造函数是实现此目的的一种流行方法。但是，虽然它对原始值数组非常有用，但它对数组或对象的数组却无法正常工作。这是因为Set存储原始值或对象引用。因此，数组中的所有值都具有不同的引用（除非对象/数组在外部声明并在数组内多次引用），导致原始数组在转换为Set. 在本文中，我们将探讨一种使用Map数据结构的替代方法，该方法可保持密钥唯一性，以解决此问题。我们还将介绍一个真实世界的用例Map，演示了如何使用它从 React 应用程序中的对象数组中高效地收集唯一值。

使用 Set 从数组中删除重复项  
在 JavaScript 中从数组中删除重复项是一种常见的做法，实现此目的的一种方法是使用Set构造函数。这涉及将现有数组包装在 a 中Set，然后将其转换回数组。

javascript  
复制  
const arr = \[1, 2, ‘a’, ‘b’, 2, ‘a’, 3, 4\];  
const uniqueArr = \[…new Set(arr)\];

console.log(uniqueArr); // \[1, 2, “a”, “b”, 3, 4\]  
值得注意的是，Set使用同值零相等来判断值相等。因此，NaN尽管. 这意味着如果原始数组包含 的多个实例，则在将数组转换为 Set 时只会保留其中一个。NaNNaN !== NaNNaN

如果您有兴趣了解更多有关NaN及其类型比较的信息，您可能会发现这篇文章很有帮助：什么是 NaN 的类型？.

这对于原始值数组非常有用，但是，当将相同的方法应用于数组或对象数组时，结果非常令人失望：

javascript  
复制  
const arr = \[\[1, 2\], \{‘a’: ‘b’\}, \{‘a’:2\}, \{‘a’:‘b’\}, \[3, 4\], \[1, 2\]\];  
const uniqueArr = \[…new Set(arr)\];

console.log(uniqueArr); // \[\[1, 2\], \{‘a’: ‘b’\}, \{‘a’:2\}, \{‘a’:‘b’\}, \[3, 4\], \[1, 2\]\]  
这是因为Set存储原始值或对象引用，在我们的例子中，数组中的所有值都有不同的引用。

值得注意的是，如果在外部声明了一个非基本元素，然后在数组中多次引用它，则此方法将起作用，因为它在数组中的所有出现都将指向同一个元素。但是，这样的用例并不常见。

javascript  
复制  
const obj = \{ a: “b” \};  
const tuple = \[1, 2\];  
const arr = \[tuple, obj, \{ a: 2 \}, obj, \[3, 4\], tuple\];  
con