JS数组去重，相信大多数前端朋友在面试过程中，遇到过。一般是要求手写或者大致讲一下思路。一旦被面试官问道，讲一下数组去重的方法？此时，我们如果可以回答10种或者7、8种，很有可能给我们的面试加分。
但是在项目中，基本上没有遇见过此类问题。日常项目组遇见的概率比较低，但为了每年的金三银四跳槽季，还是有必要掌握以下，以防面试的时候遇到此问题。
下面是整理的数组去重方法，大致有10多种，希望看完能对屏幕前的人朋友们有所帮助。
一、Es6 new Set() 与 … 扩展运算符 方法
var arr = [1,'1',true,undefined,null,{},NaN,function a(){},1,'1',true,undefined,null,{},NaN,function a(){}];
console.log([...new Set(arr )]);
// [1, "1", true, undefined, null, {…}, NaN, ƒ, {…}, ƒ]
// 对象和函数没有去重
可以看到new Set() 方法代码简洁，但是对象和函数不能去重，使用的时候需要注意一下。
二、Es6 new Set() 方法
var arr = [1,'1',true,undefined,null,{},NaN,function a(){},1,'1',true,undefined,null,{},NaN,function a(){}];
function unique (arr) {
return Array.from(new Set(arr))
}
console.log(unique(arr));
// [1, "1", true, undefined, null, {…}, NaN, ƒ, {…}, ƒ]
// 对象和函数没有去重
三、Es6 Map数据结构数组去重
function unique_a(arr) {
let map = new Map(),
array = [];
for (let i = 0, j = arr.length;i < j; i++){
var item = arr[i]
if(map.has(item)){ // 如果有该 key 值
map.set(item, true)
} else {
map.set(arr[i], false); // 如果没有该key 值
array.push(item)
}
}
return array;
}
var arr = [1,'1',true,,undefined,null,{},NaN,function a(){},1,'1',true,undefined,null,{},NaN,function a(){}];
console.log('map-unique_a', unique_a(arr))
// [1, "1", true, undefined, null, {…}, NaN, ƒ, {…}, ƒ]
// 对象和函数没有去重
四、利用对象的属性去重
function unique_b(arr) {
if (!Array.isArray(arr)) {
console.log('数据类型有问题')
return
}
var array = []
var obj = {}
for (var i = 0; i < arr.length; i++) {
if (obj[arr[i]]) {
// obj[arr[i]]++;
} else {
array.push(arr[i])
console.log(arr[i])
obj[arr[i]] = 1
}
}
console.log(obj)
return array
}
var arr = [1,'1',true,,'true',undefined,null,{},NaN,function a(){},1,'1',true,,'true',undefined,null,{},NaN,function a(){}];
console.log('unique_b', unique_b(arr ));
// [1, true, undefined, null, {…}, NaN, ƒ]
// 函数和对象、NaN 去重了，但是字符串 'true'和 true，数组 1 和 字符串 ‘1’，只能保留一种，该方法有待改进。
五、使用2层for循环嵌套，然后使用splice去重
let arr = [1, 1, 'true', 'true', function a() {}, function a() {}, true, true, false, false, null, null, undefined, undefined, NaN, NaN, 0, 0, 'a', 'a', {}, {}]
function unique_c(arr) {
for (let i = 0; i < arr.length; i++) {
var item = arr[i]
for (let j = i + 1; j < arr.length; j++) {
var subItem = arr[j]
// 这里判断条件首先是同一类型的数据进行比较，然后用 === 和 JSON.stringify方式比较
if (Object.prototype.toString.call(item) === Object.prototype.toString.call(subItem) &&
(item === subItem || JSON.stringify(item) === JSON.stringify(subItem))) {
arr.splice(j, 1);//第一个等同于第二个，splice方法删除第二个
j--;
}
}
}
}
unique_c(arr);
console.log(arr);
// [1, "true", ƒ, true, false, null, undefined, NaN, 0, "a", {…}]
// 此方法可以去除任意类型相同的数据
此方法可以去除任意类型相同的数据
六、indexOf 去重
let arr1 = [1, 1, 'true', 'true', function a() {}, function a() {}, true, true, false, false, null, null, undefined, undefined, NaN, NaN, 0, 0, 'a', 'a', {}, {}]
function unique_d(arr) {
if (!Array.isArray(arr)) {
console.log('params 参数错误')
return
}
var newArr = []
for (var i = 0; i < arr.length; i++) {
var item = arr[i]
if (newArr.indexOf(item) === -1) {
newArr.push(item)
}
}
return newArr
}
console.log('unique_d', unique_d(arr1))
// [1, "true", ƒ, ƒ, true, false, null, undefined, NaN, NaN, 0, "a", {…}, {…}]
// 此函数对函数、NaN 、对象不能去重
七、利用sort排序
var arr= [1, 2, 3, 1, 'false', true, NaN, null, function a(){},function a(){},undefined, { name: 1 }, 1, 2, 3, 1, 'false', true, NaN, null, undefined, { name: 1 }];
function unique_e(arr) {
if (!Array.isArray(arr)) {
console.log('params 参数错误')
return
}
arr = arr.sort();
var newArr = [arr[0]];
for (var i = 1, j = arr.length; i < j; i++) {
var item = arr[i],
prevItem = arr[i - 1]
if (item !== prevItem) {
newArr.push(item)
}
}
return newArr;
}
console.log('unique_e', unique_e(arr));
// [1, 2, 3, NaN, NaN, {…}, {…}, "false", ƒ, ƒ, null, true, undefined]
此方法不能对NaN 、对象、函数去重，改变一下判断条件即可实现全部类型去重。使用上面第种方法里面的判断条件即可。
八、利用 ES6 includes
var arr= [1, 2, 3, 1, 'false', true, NaN, null, function a(){},function a(){},undefined, { name: 1 }, 1, 2, 3, 1, 'false', true, NaN, null, undefined, { name: 1 }]
function unique_f(arr) {
if (!Array.isArray(arr)) {
console.log('数据类型有问题')
return
}
var newArray = []
for (var i = 0, j = arr.length; i < j; i++) {
var item = arr[i]
if (!newArray.includes(item)) {
newArray.push(item)
}
}
return newArray
}
console.log('unique_f', unique_f(list))
// [1, 2, 3, NaN, {…}, {…}, "false", ƒ, ƒ, null, true, undefined]
对象和函数不能实现去重，使用时需要注意。
九、使用对象 hasOwnProperty 方法
var arr =var arr = [function a(){},{nameaa:222},1,1,'true','true',true,true,15,15,function a(){}, function b(){alert(222)},false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{name:1},{name:222}];;
function unique_g(arr) {
var obj = {};`在这里插入代码片`
return arr.filter(function(item, index, arr){
return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
})
}
console.log(unique(arr))
// [ƒ, {…}, 1, "true", true, 15, ƒ, false, undefined, null, NaN, "NaN", 0, "a"]
此方法对，只要数组里面包含对象就给去除掉，做不到准确去重。使用时注意一下。
十、使用 filter 去重
var arr = [1, 1, true, true, 'true', 'true',function a(){},function b(){},,function a(){}, 15, 15, false, false, undefined, undefined, null, null, '', '', NaN, NaN, 'NaN', 0, 0, 'a', 'a', { name: 1 }, { name: 1 }]
function unique_h(arr) {
return arr.filter(function(item, index) {
return arr.indexOf(item, 0) === index
})
}
console.log('unique_h', unique_h(arr)) // 对象、函数没有去重
十一、利用递归去重
var arr = [1, 1, undefined,undefined,true, true, 'true', 'true',function a(){},function b(){},,function a(){}, 15, 15, false, false, null, null, '', '', NaN, NaN, 'NaN', 0, 0, 'a', 'a', { name: 1 }, { name: 1 }]
function unique_i(arr) {
var array = arr,
len = array.length
array.sort(function(a, b) { //排序后更加方便去重
return a - b
})
function loop(index) {
if (index >= 1) {
if (array[index] === array[index - 1]) {
array.splice(index, 1)
}
loop(index - 1) //递归loop，然后数组去重
}
}
loop(len - 1)
return array;
}
console.log('unique_i', unique_i(arr));
// [1, true, "true", ƒ, ƒ, ƒ, false, null, "", 0, 15, NaN, NaN, "NaN", "a", {…}, {…}, undefined]
对函数、NaN、对象同样是没有去重，并且对 undefined 处理有异常。有时间在仔细研究一下。
十二、使用 reduce+includes
var arr = [1, 1, undefined,undefined,true, true, 'true', 'true',function a(){},function b(){},,function a(){}, 15, 15, false, false, null, null, '', '', NaN, NaN, 'NaN', 0, 0, 'a', 'a', { name: 1 }, { name: 1 }]
function unique_j(arr) {
return arr.reduce((prev, current) => {
return prev.includes(current)?prev: [...prev, current]
}, [])
}
console.log('unique_j',unique_j(arr ));
// [1, undefined, true, "true", ƒ, ƒ, ƒ, 15, false, null, "", NaN, "NaN", 0, "a", {…}, {…}]
对函数、对象没有去重。
以上就是整理的方法，有错误的地方还希望大家指出来，如果还有其他方法，请多多指教。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
