ES10 中数组中取不重复元素的技巧及解决方式

随着 JavaScript 的发展，新的技术和语言特性不断涌现。ES10 是 JavaScript 的最新标准，其中包含了许多便利的功能，其中之一便是提供了一些方法来查询不重复的数组元素。在本文中，我们将详细讨论这些方法，并提供一些示例代码来帮助您理解如何使用它们。

去重

在处理数组时，我们有时需要避免重复的元素，这就是去重。ES10 中的 Set 对象和 Array.from 方法可以帮助我们轻松地完成这项任务。

使用 Set 对象

Set 对象是 ES6 中引入的一种新的数据类型，它是一组不重复的值的集合。我们可以使用 Set 对象来轻松去除数组中的重复项。下面是一个使用 Set 对象的示例：

const arr = [1, 2, 3, 4, 4, 5, 5];
const uniqueArr = [...new Set(arr)];
console.log(uniqueArr); // [1, 2, 3, 4, 5]

上述代码中，我们首先创建了一个包含重复项的数组。然后，我们通过使用 Set 对象来创建一个不包含重复项的新数组。注意，我们使用了类数组对象的扩展语法（...）来将 Set 对象转换为数组。

使用 Array.from 方法

Array.from 方法可以用来将一个类数组对象或可迭代对象转换为一个数组。我们可以利用这个方法来去除数组中的重复项，如下所示：

const arr = [1, 2, 3, 4, 4, 5, 5];
const uniqueArr = Array.from(new Set(arr));
console.log(uniqueArr); // [1, 2, 3, 4, 5]

与 Set 对象类似，我们使用 Array.from 方法来创建一个新的不包含重复项的数组。

取交集

另一个常见的需求是计算两个数组的交集。ES6 中的 Set 对象又一次为我们提供了便利的方法。

const arr1 = [1, 2, 3, 4, 5];
const arr2 = [3, 4, 5, 6, 7];
const set1 = new Set(arr1);
const intersection = arr2.filter(item => set1.has(item));
console.log(intersection); // [3, 4, 5]

上述代码中，我们首先使用 Set 对象创建了一个包含第一个数组元素的集合。然后，我们使用数组的 filter 方法和集合的 has 方法来计算第二个数组和第一个数组的交集。

取并集

同样，我们可以使用 ES6 的 Set 对象和 spread syntax 操作符来计算两个数组的并集。

const arr1 = [1, 2, 3, 4, 5];
const arr2 = [3, 4, 5, 6, 7];
const uniqueArr1 = new Set(arr1);
const uniqueArr2 = new Set(arr2);
const union = [...uniqueArr1, ...uniqueArr2];
console.log(union); // [1, 2, 3, 4, 5, 6, 7]

我们首先使用 Set 对象创建两个新的数组，然后将它们组合成一个新的不包含重复项的数组。

总结

ES10 中的数组方法使 JavaScript 开发人员能够更轻松地处理和操作数组。使用 Set 对象和数组方法可以大大简化许多常见数组操作。本文中提到的这些方法不仅可以使代码更加简洁和易于阅读，而且可以显著提高开发人员的生产率。因此，我强烈建议您熟悉这些方法，并在您的下一个项目中使用它们。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647af61d968c7c53b068cf41