JS数据去重的7种实用方法总结(附完整代码与原理)

// 待去重数组（包含数字、字符串、重复值）
const arr = [1, 2, 2, "3", "3", 4, 4, 5];
// 方法 1：扩展运算符转数组
const uniqueArr1 = [...new Set(arr)];
// 方法 2：Array.from() 转数组（兼容不支持扩展运算符的环境）
const uniqueArr2 = Array.from(new Set(arr));
console.log(uniqueArr1); // 输出：[1, 2, "3", 4, 5]
console.log(uniqueArr2); // 输出：[1, 2, "3", 4, 5]

const arr = [1, 2, 2, 3, 3, 3];
const uniqueArr = [];
for (let i = 0; i < arr.length; i++) {
 // indexOf 返回 -1 表示元素不在新数组中
 if (uniqueArr.indexOf(arr[i]) === -1) {
   uniqueArr.push(arr[i]);
 }
}
console.log(uniqueArr); // 输出：[1, 2, 3]

const arr = [1, 2, 2, 3, 3, 3];
const uniqueArr = [];
for (let item of arr) {
 // includes 直接返回布尔值，判断元素是否存在
 if (!uniqueArr.includes(item)) {
   uniqueArr.push(item);
 }
}
console.log(uniqueArr); // 输出：[1, 2, 3]

const arr = [1, 2, 2, "2", 3, 3];
const uniqueArr = [];
const tempObj = {}; // 临时对象，用于存储已存在的元素
for (let item of arr) {
 // 把元素转为字符串作为键名（避免 1 和 "1" 被视为不同键）
 const key = typeof item + item;
 if (!tempObj[key]) {
   tempObj[key] = true; // 标记为已存在
   uniqueArr.push(item);
 }
}
console.log(uniqueArr); // 输出：[1, 2, "2", 3]

const arr = [1, 2, 2, 3, 3, 4];
// filter 回调函数：返回 true 则保留元素
const uniqueArr = arr.filter((item, index) => {
 // indexOf 会返回元素在数组中第一次出现的索引
 return arr.indexOf(item) === index;
});
console.log(uniqueArr); // 输出：[1, 2, 3, 4]

const arr = [1, 2, 2, "3", "3", 4];
const uniqueArr = [];
const tempMap = new Map();
for (let item of arr) {
 if (!tempMap.has(item)) { // 判断元素是否已在 Map 中
   tempMap.set(item, true); // 存储元素（值随便设，只要有标记即可）
   uniqueArr.push(item);
 }
}
console.log(uniqueArr); // 输出：[1, 2, "3", 4]

// 待去重的对象数组（id 相同视为重复）
const arr = [
 { id: 1, name: "小明" },
 { id: 1, name: "小明" }, // 重复
 { id: 2, name: "小红" }
];
const uniqueArr = [...new Set(arr.map(item => JSON.stringify(item)))]
 .map(str => JSON.parse(str)); // 转回对象
console.log(uniqueArr);
// 输出：[{ id: 1, name: "小明" }, { id: 2, name: "小红" }]

const arr = [
 { id: 1, name: "小明" },
 { id: 1, name: "小明" },
 { id: 2, name: "小红" }
];
const uniqueArr = [];
for (let item of arr) {
 // 用 some 判断新数组中是否已有相同 id 的对象
 const isRepeat = uniqueArr.some(uniqueItem => uniqueItem.id === item.id);
 if (!isRepeat) {
   uniqueArr.push(item);
 }
}
console.log(uniqueArr);
// 输出：[{ id: 1, name: "小明" }, { id: 2, name: "小红" }]

const arr = [3, 1, 2, 2, 3, 1, 4];
const uniqueArr = [];
// 先排序（注意：sort 默认按字符串排序，数字需加比较函数）
const sortedArr = arr.sort((a, b) => a - b); // 排序后：[1, 1, 2, 2, 3, 3, 4]
for (let i = 0; i < sortedArr.length; i++) {
 // 比较当前元素和前一个元素，不同则保留
 if (sortedArr[i] !== sortedArr[i - 1]) {
   uniqueArr.push(sortedArr[i]);
 }
}
console.log(uniqueArr); // 输出：[1, 2, 3, 4]