简介：
在JavaScript阵列中的重复项可以引入数据不一致并阻碍有效的数据处理。幸运的是，JavaScript提供了几种消除重复并确保清洁数据的方法。在这篇博客文章中，我们将深入研究各种技术，检查它们的复杂性，并讨论它们对简单阵列和对象阵列的适用性。最后，您将对如何有效从JavaScript阵列中删除重复项有一个全面的了解。
1。使用集：利用唯一值
JavaScript集是仅存储唯一值的内置数据结构。通过将数组转换为集合，然后返回到阵列，我们可以毫不费力地消除重复项。让我们使用简单的数组和对象数组来探索此方法：
简单的数组示例：
const array = [1, 2, 3, 2, 4, 1, 5];
const uniqueArray = Array.from(new Set(array));
console.log(uniqueArray); // [1, 2, 3, 4, 5]
对象的数组示例：
const users = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 1, name: 'Alice' },
{ id: 3, name: 'Charlie' }
];
const uniqueUsers = Array.from(new Set(users.map(JSON.stringify)), JSON.parse);
console.log(uniqueUsers);
/*
[
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 3, name: 'Charlie' }
]
*/
在两个示例中，使用new Set()构造函数将数组转换为集合。对于对象数组，我们使用map函数将对象转换为字符串，然后使用JSON.parse将它们转换回对象。
2。使用过滤器和索引：迭代以实现独特
另一种方法涉及在数组上迭代，并使用filter方法以及indexOf方法识别和删除重复项。该方法可以应用于简单的对象和数组：
简单的数组示例：
const array = [1, 2, 3, 2, 4, 1, 5];
const uniqueArray = array.filter((value, index, self) => self.indexOf(value) === index);
console.log(uniqueArray); // [1, 2, 3, 4, 5]
对象的数组示例：
const users = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 1, name: 'Alice' },
{ id: 3, name: 'Charlie' }
];
const uniqueUsers = users.filter((user, index, self) => {
const firstIndex = self.findIndex((u) => u.id === user.id);
return index === firstIndex;
});
console.log(uniqueUsers);
/*
[
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 3, name: 'Charlie' }
]
*/
在两个示例中，filter方法都用于仅保留其首次出现索引等于当前索引的元素。对于对象阵列，我们使用findIndex方法来识别基于特定属性的第一次发生（在这种情况下为id属性）。
3。使用降低：汇总唯一值
reduce方法提供
通过将唯一值累积到新数组中来删除重复项的有力方法。让我们使用简单的数组和对象数组来探索此方法：
简单的数组示例：
const array = [1, 2, 3, 2, 4, 1, 5];
const uniqueArray = array.reduce((accumulator, value) => {
if (!accumulator.includes(value)) {
accumulator.push(value);
}
return accumulator;
}, []);
console.log(uniqueArray); // [1, 2, 3, 4, 5]
对象的数组示例：
const users = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 1, name: 'Alice' },
{ id: 3, name: 'Charlie' }
];
const uniqueUsers = users.reduce((accumulator, user) => {
const existingUser = accumulator.find((u) => u.id === user.id);
if (!existingUser) {
accumulator.push(user);
}
return accumulator;
}, []);
console.log(uniqueUsers);
/*
[
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 3, name: 'Charlie' }
]
*/
在这两个示例中，reduce方法通过检查值或对象是否已经存在，将唯一值累积到accumulator数组中。对于对象数组，使用find方法来基于特定属性识别现有对象。
4。使用地图：跟踪唯一值
map方法也可以通过在数组中跟踪唯一值来删除重复物：
简单的数组示例：
const array = [1, 2, 3, 2, 4, 1, 5];
const uniqueArray = Array.from(new Map(array.map((value) => [value, value])).values());
console.log(uniqueArray); // [1, 2, 3, 4, 5]
对象的数组示例：
const users = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 1, name: 'Alice' },
{ id: 3, name: 'Charlie' }
];
const uniqueUsers = Array.from(new Map(users.map((user) => [user.id, user])).values());
console.log(uniqueUsers);
/*
[
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 3, name: 'Charlie' }
]
*/
在这两个示例中，map方法都用于创建一个新的映射，其中包含代表唯一值的键。然后，使用Array.from将结果映射转换回数组并提取值。
5。使用foreach，包括：迭代和检查
此方法涉及使用forEach方法在数组上迭代，并使用includes方法检查每个元素是否已经存在于新数组中。
简单的数组示例：
const array = [1, 2, 3, 2, 4, 1, 5];
const uniqueArray = [];
array.forEach((value) => {
if (!uniqueArray.includes(value)) {
uniqueArray.push(value);
}
});
console.log(uniqueArray); // [1, 2, 3, 4, 5]
对象的数组示例：
const users = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 1, name: 'Alice' },
{ id: 3, name: 'Charlie' }
];
const uniqueUsers = [];
users.forEach((user) => {
const exists = uniqueUsers.some((u) => u.id === user.id);
if (!exists) {
uniqueUsers.push(user);
}
});
console.log(uniqueUsers);
/*
[
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 3, name: 'Charlie' }
]
*/
在两个示例中，forEach方法在数组上迭代，对于每个元素，它检查唯一数组是否已经包含该值或对象。如果不是，则将其添加到唯一的数组中。
6。使用临时对象：跟踪唯一值
此方法涉及创建一个临时对象以跟踪独特的值。此方法适用于具有原始值的简单阵列。
简单的数组示例：
const array = [1, 2, 3, 2, 4, 1, 5];
const uniqueArray = [];
const tempObj = {};
array.forEach((value) => {
if (!tempObj[value]) {
tempObj[value] = true;
uniqueArray.push(value);
}
});
console.log(uniqueArray); // [1, 2, 3, 4, 5]
对象的数组示例：
const users = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 1, name: 'Alice' },
{ id: 3, name: 'Charlie' }
];
const uniqueUsers = [];
const tempObj = {};
users.forEach((user) => {
if (!tempObj[user.id]) {
tempObj[user.id] = true;
uniqueUsers.push(user);
}
});
console.log(uniqueUsers);
/*
[
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 3, name: 'Charlie' }
]
*/
在两个示例中，临时对象都用于使用其键来跟踪唯一值。如果密钥不存在于临时对象中，则将值或对象添加到唯一数组中，并且将密钥设置为临时对象中的true。
7。使用ES6传播操作员和集合：现代方法
此方法结合了传播运算符的使用，并设置了一个简洁的解决方案，以删除重复。
简单的数组示例：
const array = [1, 2, 3, 2, 4, 1, 5
];
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // [1, 2, 3, 4, 5]
对象的数组示例：
const users = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 1, name: 'Alice' },
{ id: 3, name: 'Charlie' }
];
const uniqueUsers = [...new Set(users.map(JSON.stringify))].map(JSON.parse);
console.log(uniqueUsers);
/*
[
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 3, name: 'Charlie' }
]
*/
在这两个示例中，传播运算符...都用于通过传播从集合获得的唯一值来创建新数组。对于对象数组，在应用设置操作之前，使用map函数将对象转换为字符串。最后，使用JSON.parse将对象从字符串转换为对象。
结论：
从JavaScript阵列中删除重复项对于维持干净的数据和优化数据处理至关重要。通过探索本文中讨论的各种方法，包括使用集，过滤器和索引，减少和映射，您现在拥有一个全面的工具包来处理重复的消除。根据阵列的结构和复杂性应用适当的方法，以确保在JavaScript中的数据操纵的完整性和效率。