数组去重,一般面试的时候遇到的概率比较大(本人遇到了不低于三次),一般会让你手写数组去重的代码。如果面试官问你去重的方法有哪些?你若是可以答出8种以上就很不错了,面试官也会对你刮目相看。
在真实的项目中碰到的数组去重,一般都是后台去处理## 标题,很少让前端处理数组去重。虽然日常项目用到的概率比较低(数据统计处理的项目可能会用到),但还是需要了解一下,以防面试的时候可能回被问到。
数组去重的方法
一.ES6 的 Set() ES6常用
function unique(arr) {
return new Set(arr);
}
let array = [1,1,'1','1',null,null,NaN,NaN,'NaN',undefined,undefined,{},{},0,0]
console.log(unique(array));
//[1,"1",null,NaN,"NaN",undefined,{},{},0] // {}没有被去重
二、利用双重for循环 加上splice()去重 ES5 常用
function unique(arr){
for(var i = 0;i<arr.length;i++){
for(var j = i + 1;j<arr.length;j++){
if(arr[i] === arr[j]){
arr.splice(j,1);
j-- ;
}
}
}
return arr;
}
let array = [1,1,'1','1',null,null,NaN,NaN,'NaN',undefined,undefined,{},{},0,0]
console.log(unique(array));
//[1, "1", null, NaN, NaN, "NaN", undefined, {…}, {…}, 0] //NaN、{}没有被去重
三、利用indexOf去重
function unique(arr) {
if (!Array.isArray(arr)) {
console.log('type error!')
return
}
var array = [];
for (var i = 0; i < arr.length; i++) {
if (array .indexOf(arr[i]) === -1) {
array .push(arr[i])
}
}
return array;
}
let array = [1,1,'1','1',null,null,NaN,NaN,'NaN',undefined,undefined,{},{},0,0]
console.log(unique(array));
//[1, "1", null, NaN, NaN, "NaN", undefined, {…}, {…}, 0] //NaN、{}没有被去重
四、利用sort() 排序去重
function unique(arr) {
if (!Array.isArray(arr)) {
console.log('type error!')
return;
}
arr = arr.sort()
var arrry= [arr[0]];
for (var i = 1; i < arr.length; i++) {
if (arr[i] !== arr[i-1]) {
arrry.push(arr[i]);
}
}
return arrry;
}
let array = [1,1,'1','1',null,null,NaN,NaN,'NaN',undefined,undefined,{},{},0,0]
console.log(unique(array));
//[0, 1, "1", NaN, NaN, "NaN", {…}, {…}, null, undefined] //NaN、{}没有被去重
五、利用对象的属性名不能重复去重
function unique(arr) {
if (!Array.isArray(arr)) {
console.log('type error!')
return
}
var arrry= [];
var obj = {};
for (var i = 0; i < arr.length; i++) {
if (!obj[arr[i]]) {
arrry.push(arr[i])
obj[arr[i]] = 1
} else {
obj[arr[i]]++
}
}
return arrry;
}
let array = [1,1,'1','1',null,null,NaN,NaN,'NaN',undefined,undefined,{},{},0,0]
console.log(unique(array));
//[0, 1, NaN, {…}, null, undefined] //都去重了,但是问题也很明显,键名都当成字符串来处理了,去了一些不该去的
六、利用includes 去重
function unique(arr) {
if (!Array.isArray(arr)) {
console.log('type error!')
return
}
var array =[];
for(var i = 0; i < arr.length; i++) {
if( !array.includes( arr[i]) ) {//includes 检测数组是否有某个值
array.push(arr[i]);
}
}
return array
}
let array = [1,1,'1','1',null,null,NaN,NaN,'NaN',undefined,undefined,{},{},0,0]
console.log(unique(array));
//[0, 1, "1", NaN, NaN, "NaN", {…}, {…}, null, undefined] //NaN、{}没有被去重
七、利用Object.hasOwnProperty 去重
function unique(arr) {
var obj = {};
return arr.filter(function(item, index, arr){
return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
})
}
let array = [1,1,'1','1',null,null,NaN,NaN,'NaN',undefined,undefined,{},{},0,0]
console.log(unique(array));
//[0, 1, "1", NaN, "NaN", {…}, null, undefined] //所有的都去重了
八、利用filter 去重
function unique(arr) {
return arr.filter(function(item, index, arr) {
//当前元素,在原始数组中的第一个索引==当前索引值,否则返回当前元素
return arr.indexOf(item, 0) === index;
});
}
let array = [1,1,'1','1',null,null,NaN,NaN,'NaN',undefined,undefined,{},{},0,0]
console.log(unique(array));
//[0, 1, "1", "NaN", {…}, {…}, null, undefined] // {}没有去重 NaN被去掉了
九、利用reduce+includes 去重
function unique(arr){
return arr.reduce((prev,cur) => prev.includes(cur) ? prev : [...prev,cur],[]);
}
let array = [1,1,'1','1',null,null,NaN,NaN,'NaN',undefined,undefined,{},{},0,0]
console.log(unique(array));
//[0, 1, "1", NaN, "NaN", {…}, {…}, null, undefined] //{}没有去重
十、…扩展运算符 + Set 去重
function unique(arr){
return [...new Set(arr)]
}
let array = [1,1,'1','1',null,null,NaN,NaN,'NaN',undefined,undefined,{},{},0,0]
console.log(unique(array));
//[0, 1, "1", NaN, "NaN", {…}, {…}, null, undefined] //{}没有被去重
以上总结出十种数组去重的方法,如有问题和优化方案还请指出,转载请注明出处,谢谢。