从数组中删除重复项
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
最初发布于javascript.christmas
了解解决特定问题的多种方法有助于编写更易读的代码。让我们来看三种从数组中删除重复元素的不同方法。
永远不要低估代码质量的重要性。作为开发者，清晰地传达你正在开发的解决方案的实现方式至关重要，而清晰易读的代码正是关键所在。了解解决特定问题的多种方法有助于编写更易读的代码。让我们来看看从数组中删除重复基本类型的三种不同方法。
const array = [1, 1, 1, 3, 3, 2, 2];
// Method 1: Using a Set
const unique = [...new Set(array)];
// Method 2: Array.prototype.reduce
const unique = array.reduce((result, element) => {
return result.includes(element) ? result : [...result, element];
}, []);
// Method 3: Array.prototype.filter
const unique = array.filter((element, index) => {
return array.indexOf(element) === index;
});
放
Set对象允许您存储唯一值。重复调用 SetSet.add(value)并传入相同的值不会产生任何效果。
const uniqueNames = new Set();
uniqueNames.add("Dasher"); // {"Dasher"}
uniqueNames.add("Dasher"); // {"Dasher"}
利用集合不能包含重复值这一特性，然后使用扩展运算符将集合转换回数组，我们就可以从数组中删除重复元素。
const array = [1, 1, 1, 3, 3, 2, 2];
const uniqueSet = new Set(array); // {1, 3, 2}
const uniqueArray = [...uniqueSet]; // [1, 3, 2]
减少
reduce方法会对数组中的每个元素执行一个 reducer 函数（由您提供），最终得到一个输出值。reducer 函数的返回值会被赋给累加器，累加器会作为第一个参数传递给后续的 reducer 函数，并最终成为结果值。
要从数组中删除重复元素，我们可以提供一个函数来检查累积数组中是否包含当前元素。如果未包含，则将当前元素添加到数组中。
const array = [1, 1, 1, 3, 3, 2, 2];
const reducerFunction = (result, element) => {
return result.includes(element) ? result : [...result, element];
}
const unique = array.reduce(reducerFunction);
筛选
理解此方法的关键在于理解indexOf和filter 的工作原理。
indexOf返回数组中给定元素的第一个索引。filter创建一个包含所有通过测试的元素的新数组。您可以将测试作为第一个参数提供filter。
如果我们把这两种方法结合起来，通过提供一个测试来检查数组中的每个元素是否是给定元素在数组中的第一个出现位置，我们就可以从数组中删除重复元素。
const isFirst = (element, index) => {
// Checks if a given element is the first occurrence of it.
return array.indexOf(element) === index;
}
const unique = array.filter(isFirst);
我应该选择哪种方法？
我们已经了解了三种从数组中删除重复元素的方法。很容易想象，第四种方法可以提高代码的可读性。具体来说，可以通过向 EcmaScript添加此功能提案来实现。Array.prototype.unique
就可读性和性能而言，我更喜欢第一种方法。使用这种方法，Set你的代码既简洁又高效，而且易于理解。