📖参考笔记:JavaScript 数组去重的方法(12 种方法,史上最全)
数组去重
- 利用 ES6 的 Set 去重
- 利用 includes
- 利用 indexOf 去重
- 利用 sort()
- 利用 hasOwnProperty
- reduce去重
⚽利用 ES6 的 Set 去重
不考虑兼容性,这种去重的方法代码最少。这种方法还无法去掉 {} 空对象,后面的高阶方法会添加去掉重复 {} 的方法。
let array = [1, 2, 2, 3, 4, 4, 5];
let uniqueArray = [...new Set(array)];
console.log(uniqueArray); // 输出: [1, 2, 3, 4, 5]
⚾利用 includes
检测数组是否有某个值,但{}没有去重
let array = [1, 2, 2, 3, 4, 4, 5, {}, {}];
let uniqueArr = [];
for (let i = 0; i < array.length; i++) {
if (!uniqueArr.includes(array[i])) {
uniqueArr.push(array[i]);
}
}
console.log(uniqueArr);
🏀利用 indexOf 去重
新建一个空的结果数组,for 循环原数组,判断结果数组是否存在当前元素,如果有相同的值则跳过,不相同则 push 进数组。但 NaN、{}没有去重
let array = [1, 2, 2, 3, 4, 4, 5, {}, {}];
let uniqueArr = [];
for (let i = 0; i < array.length; i++) {
if (uniqueArr.indexOf(array[i]) === -1) {
uniqueArr.push(array[i]);
}
}
console.log(uniqueArr);
🏐利用 sort()
利用 sort() 排序方法,然后根据排序后的结果进行遍历及相邻元素比对。
let array = [1, 2, 2, 3, 4, 4, 5, {}, {}];
let uniqueArr = [];
array.sort();
uniqueArr.push(array[0]);
for (let i = 1; i < array.length; i++) {
if (array[i] !== array[i - 1]) {
uniqueArr.push(array[i]);
}
}
console.log(uniqueArr);
🏈利用 hasOwnProperty
利用 hasOwnProperty 判断是否存在对象属性,所有的都去重了
判断一个属性是定义在对象本身而不是继承自原型链,我们需要使用从 Object.prototype 继承而来的 hasOwnProperty 方法。 hasOwnProperty 方法是 Javascript 中唯一一个处理对象属性而不会往上遍历原型链的。
// 这种方法不是很好,如果是true和“true”这样的值,会返回false
// function unique(arr) {
// var obj = {};
// return arr.filter(function (item) {
// var key =
// item === null
// ? "null"
// : item === undefined
// ? "undefined"
// : item.toString();
// return obj.hasOwnProperty(key) ? false : (obj[key] = true);
// });
// }
// 这种方法加了一个类型进行判断,解决了true和“true”的问题
function unique(arr) {
// 创建一个空对象用于存储已经遇到的元素类型+值的组合
var obj = {};
// 使用filter函数遍历数组arr,返回一个新数组,该数组只包含未遇到过的元素
return arr.filter(function (item, index) {
// 检查对象obj是否已经有一个属性,其键是元素类型的字符串表示加上元素的值
// 这里使用typeof item + item作为键,这通常不是最佳实践,因为它可能不适用于所有数据类型或值
return obj.hasOwnProperty(typeof item + item)
? false // 如果已经存在,说明是重复项,不包含在结果数组中
: (obj[typeof item + item] = true); // 如果不存在,添加到obj中,并返回true以包含在结果数组中
});
}
var arr = [
1,
1,
"true",
"true",
true,
true,
15,
15,
false,
false,
undefined,
undefined,
null,
null,
NaN,
NaN,
"NaN",
0,
0,
"a",
"a",
{},
{},
];
console.log(unique(arr));
//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}] //所有的都去重了
🥎reduce去重
function unique(arr) {
return arr.reduce(
(prev, cur) => (prev.includes(cur) ? prev : [...prev, cur]),
[]
);
}
var arr = [
1,
1,
"true",
"true",
true,
true,
15,
15,
false,
false,
undefined,
undefined,
null,
null,
NaN,
NaN,
"NaN",
0,
0,
"a",
"a",
{},
{},
];
console.log(unique(arr));
[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]