“约见”面试官系列之常见面试题第十九篇之数组去重（建议收藏）

目录

数组去重的方法

一、利用ES6 Set去重&＃xff08;ES6中最常用&＃xff09;

二、利用for嵌套for&＃xff0c;然后splice去重&＃xff08;ES5中最常用&＃xff09;

三、利用indexOf去重

四、利用sort()

五、利用对象的属性不能相同的特点进行去重&＃xff08;这种数组去重的方法有问题&＃xff0c;不建议用&＃xff0c;有待改进&＃xff09;

六、利用includes

七、利用hasOwnProperty

八、利用filter

九、利用递归去重

十、利用Map数据结构去重

十一、利用reduce&＃43;includes

十二、[...new Set(arr)]

数组去重&＃xff0c;一般都是在面试的时候才会碰到&＃xff0c;一般是要求手写数组去重方法的代码。如果是被提问到&＃xff0c;数组去重的方法有哪些&＃xff1f;你能答出其中的10种&＃xff0c;面试官很有可能对你刮目相看。
在真实的项目中碰到的数组去重&＃xff0c;一般都是后台去处理&＃xff0c;很少让前端处理数组去重。虽然日常项目用到的概率比较低&＃xff0c;但还是需要了解一下&＃xff0c;以防面试的时候可能回被问到。

注&＃xff1a;写的匆忙&＃xff0c;加上这几天有点忙&＃xff0c;还没有非常认真核对过&＃xff0c;不过思路是没有问题&＃xff0c;可能一些小细节出错而已。

数组去重的方法

一、利用ES6 Set去重&＃xff08;ES6中最常用&＃xff09;

function unique (arr) {return Array.from(new Set(arr))
}
var arr &＃61; [1,1,&＃39;true&＃39;,&＃39;true&＃39;,true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,&＃39;NaN&＃39;, 0, 0, &＃39;a&＃39;, &＃39;a&＃39;,{},{}];
console.log(unique(arr))//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]

不考虑兼容性&＃xff0c;这种去重的方法代码最少。这种方法还无法去掉“{}”空对象&＃xff0c;后面的高阶方法会添加去掉重复“{}”的方法。

二、利用for嵌套for&＃xff0c;然后splice去重&＃xff08;ES5中最常用&＃xff09;

function unique(arr){ for(var i&＃61;0; ireturn arr;
}
var arr &＃61; [1,1,&＃39;true&＃39;,&＃39;true&＃39;,true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,&＃39;NaN&＃39;, 0, 0, &＃39;a&＃39;, &＃39;a&＃39;,{},{}];console.log(unique(arr))//[1, "true", 15, false, undefined, NaN, NaN, "NaN", "a", {…}, {…}] //NaN和{}没有去重&＃xff0c;两个null直接消失了

双层循环&＃xff0c;外层循环元素&＃xff0c;内层循环时比较值。值相同时&＃xff0c;则删去这个值。
想快速学习更多常用的ES6语法&＃xff0c;可以看我之前的文章《学习ES6笔记──工作中常用到的ES6语法》。

三、利用indexOf去重

function unique(arr) {if (!Array.isArray(arr)) {console.log(&＃39;type error!&＃39;)return}var array &＃61; [];for (var i &＃61; 0; i }
var arr &＃61; [1,1,&＃39;true&＃39;,&＃39;true&＃39;,true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,&＃39;NaN&＃39;, 0, 0, &＃39;a&＃39;, &＃39;a&＃39;,{},{}];
console.log(unique(arr))// [1, "true", true, 15, false, undefined, null, NaN, NaN, "NaN", 0, "a", {…}, {…}] //NaN、{}没有去重

新建一个空的结果数组&＃xff0c;for 循环原数组&＃xff0c;判断结果数组是否存在当前元素&＃xff0c;如果有相同的值则跳过&＃xff0c;不相同则push进数组。

四、利用sort()

function unique(arr) {if (!Array.isArray(arr)) {console.log(&＃39;type error!&＃39;)return;}arr &＃61; arr.sort()var arrry&＃61; [arr[0]];for (var i &＃61; 1; i }var arr &＃61; [1,1,&＃39;true&＃39;,&＃39;true&＃39;,true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,&＃39;NaN&＃39;, 0, 0, &＃39;a&＃39;, &＃39;a&＃39;,{},{}];console.log(unique(arr))
// [0, 1, 15, "NaN", NaN, NaN, {…}, {…}, "a", false, null, true, "true", undefined] //NaN、{}没有去重

利用sort()排序方法&＃xff0c;然后根据排序后的结果进行遍历及相邻元素比对。

五、利用对象的属性不能相同的特点进行去重&＃xff08;这种数组去重的方法有问题&＃xff0c;不建议用&＃xff0c;有待改进&＃xff09;

function unique(arr) {if (!Array.isArray(arr)) {console.log(&＃39;type error!&＃39;)return}var arrry&＃61; [];var obj &＃61; {};for (var i &＃61; 0; i }var arr &＃61; [1,1,&＃39;true&＃39;,&＃39;true&＃39;,true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,&＃39;NaN&＃39;, 0, 0, &＃39;a&＃39;, &＃39;a&＃39;,{},{}];console.log(unique(arr))
//[1, "true", 15, false, undefined, null, NaN, 0, "a", {…}] //两个true直接去掉了&＃xff0c;NaN和{}去重

六、利用includes

function unique(arr) {if (!Array.isArray(arr)) {console.log(&＃39;type error!&＃39;)return}var array &＃61;[];for(var i &＃61; 0; i }
var arr &＃61; [1,1,&＃39;true&＃39;,&＃39;true&＃39;,true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,&＃39;NaN&＃39;, 0, 0, &＃39;a&＃39;, &＃39;a&＃39;,{},{}];console.log(unique(arr))//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}] //{}没有去重

七、利用hasOwnProperty

function unique(arr) {var obj &＃61; {};return arr.filter(function(item, index, arr){return obj.hasOwnProperty(typeof item &＃43; item) ? false : (obj[typeof item &＃43; item] &＃61; true)})
}var arr &＃61; [1,1,&＃39;true&＃39;,&＃39;true&＃39;,true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,&＃39;NaN&＃39;, 0, 0, &＃39;a&＃39;, &＃39;a&＃39;,{},{}];console.log(unique(arr))
//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}] //所有的都去重了

利用hasOwnProperty 判断是否存在对象属性

八、利用filter

function unique(arr) {return arr.filter(function(item, index, arr) {//当前元素&＃xff0c;在原始数组中的第一个索引&＃61;&＃61;当前索引值&＃xff0c;否则返回当前元素return arr.indexOf(item, 0) &＃61;&＃61;&＃61; index;});
}var arr &＃61; [1,1,&＃39;true&＃39;,&＃39;true&＃39;,true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,&＃39;NaN&＃39;, 0, 0, &＃39;a&＃39;, &＃39;a&＃39;,{},{}];console.log(unique(arr))
//[1, "true", true, 15, false, undefined, null, "NaN", 0, "a", {…}, {…}]

九、利用递归去重

function unique(arr) {var array&＃61; arr;var len &＃61; array.length;array.sort(function(a,b){ //排序后更加方便去重return a - b;})function loop(index){if(index >&＃61; 1){if(array[index] &＃61;&＃61;&＃61; array[index-1]){array.splice(index,1);}loop(index - 1); //递归loop&＃xff0c;然后数组去重}}loop(len-1);return array;
}var arr &＃61; [1,1,&＃39;true&＃39;,&＃39;true&＃39;,true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,&＃39;NaN&＃39;, 0, 0, &＃39;a&＃39;, &＃39;a&＃39;,{},{}];
console.log(unique(arr))
//[1, "a", "true", true, 15, false, 1, {…}, null, NaN, NaN, "NaN", 0, "a", {…}, undefined]

十、利用Map数据结构去重

function arrayNonRepeatfy(arr) {let map &＃61; new Map();let array &＃61; new Array(); // 数组用于返回结果for (let i &＃61; 0; i }var arr &＃61; [1,1,&＃39;true&＃39;,&＃39;true&＃39;,true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,&＃39;NaN&＃39;, 0, 0, &＃39;a&＃39;, &＃39;a&＃39;,{},{}];console.log(unique(arr))
//[1, "a", "true", true, 15, false, 1, {…}, null, NaN, NaN, "NaN", 0, "a", {…}, undefined]

创建一个空Map数据结构&＃xff0c;遍历需要去重的数组&＃xff0c;把数组的每一个元素作为key存到Map中。由于Map中不会出现相同的key值&＃xff0c;所以最终得到的就是去重后的结果。

十一、利用reduce&＃43;includes

function unique(arr){return arr.reduce((prev,cur) &＃61;> prev.includes(cur) ? prev : [...prev,cur],[]);
}
var arr &＃61; [1,1,&＃39;true&＃39;,&＃39;true&＃39;,true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,&＃39;NaN&＃39;, 0, 0, &＃39;a&＃39;, &＃39;a&＃39;,{},{}];
console.log(unique(arr));
// [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]

十二、[...new Set(arr)]

[...new Set(arr)]
//代码就是这么少----&＃xff08;其实&＃xff0c;严格来说并不算是一种&＃xff0c;相对于第一种方法来说只是简化了代码&＃xff09;

本面试题为前端常考面试题&＃xff0c;后续有机会继续完善。我是歌谣&＃xff0c;一个沉迷于故事的讲述者。

欢迎一起私信交流。

“睡服“面试官系列之各系列目录汇总&＃xff08;建议学习收藏&＃xff09;