JavaScript的数组去重在我们的日常开发中可谓是非常常见的问题,那么问题来了?大家都喜欢用什么方法解决数组去重问题呢?
1、对象去重法
我最开始学习的JS的时候使用的一种方法,这种方法可能初学者最先想到的解法,因为根据object对象的属性如果相同则会覆盖,从而能够进行判断使用存在相同元素。
const unique = (arr) => {
let map = {};
let res = [];
for (let i = 0; i < arr.length; i++) {
if (!map[arr[i]]) {
map[arr[i]] = 1;
res.push(arr[i]);
}
}
return res;
}
2、使用indexOf去重
indexOf去重的方法原理也很简单,只是根据数组的下标进行判断,如果存的数组中存在这个元素说明该元素已经存在即重复,所以不需要进行存取。
const unique = (arr) => {
let res = [];
for (let i = 0; i < arr.length; i++) {
if (res.indexOf(arr[i]) < 0) {
res.push(arr[i]);
}
}
return res;
}
3、使用 indexOf 和 索引值进行判断
也是用到indexOf进行判断,根据indexOf取得下标与当前的索引值进行判断,如果下标值与索引值不相等,那么说明存在了重复元素,去掉即可。
const unique = (arr) => {
let res = [];
for (let i = 0; i < arr.length; i++) {
if (arr.indexOf(arr[i]) == i) {
res.push(arr[i]);
}
}
return res;
}
4、使用lastIndexOf 和 索引值进行判断
原理和上一个类似,但是使用方法相反
const unique = (arr) => {
let res = [];
for (let i = 0; i < arr.length; i++) {
if (arr.lastIndexOf(arr[i]) == i) {
res.push(arr[i]);
}
}
return res;
}
5、循环对比两两数
使用一层循环进行判断相邻两个数是否重复(提前对数组进行排序),如果重复则去掉
const unique = (arr) => {
let res = [];
// 需要先排序
arr.sort((a, b) => a - b);
res[0] = arr[0];
for (let i = 1; i < arr.length; i++) {
if (arr[i] !== arr[i - 1]) {
res.push(arr[i]);
}
}
return res;
}
6、使用数组的includes方法(ES6新方法)
使用includes方法在暂存的数组中进行判断是否存在,如果存在则不需要添加
const unique = (arr) => {
let res = [];
for (let i = 0; i < arr.length; i++) {
if (!res.includes(arr[i])) {
res.push(arr[i]);
}
}
return res;
}
7、使用数组的filter函数+indexOf判断
运用数组的filter方法进行遍历,然后也是对indexOf的索引值进行判断
const unique = (arr) => {
return arr.filter((item, index, _arr) => {
return _arr.indexOf(item) === index;
})
}
8、splice去重
通过数组的splice方法直接在原数组上进行修改,需要注意的是如果不需要改变原数组的话那么需要进行一份拷贝,然后在是要该方法即可
const unique = (arr) => {
arr.sort((a, b) => a - b);
for (let i = 0; i < arr.length - 1; i++) {
if (arr[i + 1] === arr[i]) {
arr.splice(i, 1);
i--;
}
}
return arr;
}
9、使用Map数据结构去重
根据Map的不可重复性可以进行去重操作,但是就是需要一定的内存损耗。
const unique = (arr) => {
let res = [];
let map = new Map();
for (let i = 0; i < arr.length; i++) {
if (!map.has(arr[i])) {
res.push(arr[i]);
map.set(arr[i], true);
}
}
return res;
}
10、使用reduce去重(ES6新方法)
代码简洁,如果不熟悉reduce方法的小伙伴可以去看看学学这个方法的使用,这个方法如果用的好的话确实有很大用处。
const unique = (arr) => {
return arr.reduce((prev, cur) => prev.includes(cur) ? prev : [...prev, cur], []);
}
11、使用Set数据结构去重
这个可能是学习了ES6之后的常用去重方法了,简单便捷,易于使用,代码量小
const unique = (arr) => {
return [...new Set(arr)];
}
如果需要去重复杂数组的话如这种结构也可以使用Set结构进行去重
let arr = [1, {a: 1, b: 2}, [1, 2, 3], {a: 1, b: 2}, [1, 2, 3]
const unique = (arr) => {
return [...new Set(arr.map(item => JSON.stringify(item)))].map(item => JSON.parse(item));
}
以上代码均只适用于简单的数组去重操作
写在最后
因为方法比较多,所以大家可以根据不同的场景来使用不同的方法,比如常常需要考虑的是时间复杂度和空间复杂度。根据不同的需要进行选择,以时间换空间还是以空间换时间。
希望大家都能有所收获! 还有不懂的知识点啊,赶紧学起来!