下面是对于“史上最全JavaScript数组去重的十种方法(推荐)”这篇文章的详细讲解。
1. 引言
文章介绍了在JavaScript中使用十种方法对数组进行去重的详细解析,旨在让读者学会如何在实际开发中解决数组去重问题。
2. 数组去重方法
2.1 使用Set
使用Set可以很方便地对数组进行去重,因为Set内部的元素是唯一的,所以会自动去除重复元素。
const arr = [1, 2, 2, 3, 3, 4, 5];
const uniqueArr = [...new Set(arr)];
console.log(uniqueArr); // [1, 2, 3, 4, 5]
2.2 使用indexOf
使用indexOf可以找出一个元素在数组中第一次出现的位置,因此遍历数组,对于元素第一次出现的位置保留,后续出现的则忽略。
const arr = [1, 2, 2, 3, 3, 4, 5];
const uniqueArr = [];
for (let i = 0; i < arr.length; i++) {
if (uniqueArr.indexOf(arr[i]) === -1) {
uniqueArr.push(arr[i]);
}
}
console.log(uniqueArr); // [1, 2, 3, 4, 5]
2.3 使用includes
includes方法与indexOf类似,都是判断元素是否在数组中,但是includes返回的是true或false,可以更直观地进行判断。
const arr = [1, 2, 2, 3, 3, 4, 5];
const uniqueArr = [];
for (let i = 0; i < arr.length; i++) {
if (!uniqueArr.includes(arr[i])) {
uniqueArr.push(arr[i]);
}
}
console.log(uniqueArr); // [1, 2, 3, 4, 5]
2.4 使用filter
使用filter可以过滤出符合条件的元素组成新的数组,结合indexOf可以实现数组去重。
const arr = [1, 2, 2, 3, 3, 4, 5];
const uniqueArr = arr.filter((item, index) => {
return arr.indexOf(item) === index;
});
console.log(uniqueArr); // [1, 2, 3, 4, 5]
2.5 使用reduce
reduce方法可以通过累加器去除重复元素。
const arr = [1, 2, 2, 3, 3, 4, 5];
const uniqueArr = arr.reduce((acc, cur) => {
if (!acc.includes(cur)) {
acc.push(cur);
}
return acc;
}, []);
console.log(uniqueArr); // [1, 2, 3, 4, 5]
2.6 使用Map
使用Map也可以实现数组去重,因为它内部存储的是键值对,所以重复的元素会被自动去除。
const arr = [1, 2, 2, 3, 3, 4, 5];
const map = new Map();
const uniqueArr = [];
for (let i = 0; i < arr.length; i++) {
if (!map.has(arr[i])) {
map.set(arr[i], true);
uniqueArr.push(arr[i]);
}
}
console.log(uniqueArr); // [1, 2, 3, 4, 5]
2.7 使用递归
使用递归可以进行数组去重,每次取出一个元素,去掉之后的重复的元素组成新的数组,然后继续进行去重操作。
const arr = [1, 2, 2, 3, 3, 4, 5];
function unique(arr) {
if (arr.length === 1) {
return arr;
}
const first = arr[0];
const rest = unique(arr.slice(1));
if (rest.includes(first)) {
return rest;
} else {
return [first, ...rest];
}
}
console.log(unique(arr)); // [1, 2, 3, 4, 5]
2.8 使用双重循环
使用双重循环可以对数组进行去重,外层循环遍历每一个元素,内层循环判断是否有相同的元素。
const arr = [1, 2, 2, 3, 3, 4, 5];
const uniqueArr = [];
for (let i = 0; i < arr.length; i++) {
let isDuplicate = false;
for (let j = i + 1; j < arr.length; j++) {
if (arr[i] === arr[j]) {
isDuplicate = true;
break;
}
}
if (!isDuplicate) {
uniqueArr.push(arr[i]);
}
}
console.log(uniqueArr); // [1, 2, 3, 4, 5]
2.9 使用hash表
使用hash表可以对数组进行去重,遍历数组时,将元素存储在hash表中,并记录是否重复出现。
const arr = [1, 2, 2, 3, 3, 4, 5];
const uniqueArr = [];
const hashTable = {};
for (let i = 0; i < arr.length; i++) {
if (!hashTable[arr[i]]) {
hashTable[arr[i]] = true;
uniqueArr.push(arr[i]);
}
}
console.log(uniqueArr); // [1, 2, 3, 4, 5]
2.10 使用ES6 Map和Set
使用ES6的Map和Set可以实现高效的数组去重。
const arr = [1, 2, 2, 3, 3, 4, 5];
const uniqueArr = Array.from(new Set(arr));
console.log(uniqueArr); // [1, 2, 3, 4, 5]
const map = new Map();
const uniqueArr2 = [];
for (let i = 0; i < arr.length; i++) {
if (!map.has(arr[i])) {
map.set(arr[i], true);
uniqueArr2.push(arr[i]);
}
}
console.log(uniqueArr2); // [1, 2, 3, 4, 5]
3. 总结
通过对十种数组去重方法的详细讲解和示例说明,读者可以更加深入地理解各种代码实现的方式和注意事项,同时也能更好地结合实际场景进行选择和使用。数组去重是JavaScript开发中经常遇到的问题,希望本文能为读者在实际开发中解决问题提供帮助。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:史上最全JavaScript数组去重的十种方法(推荐) - Python技术站