我和他们都曾遇过的前端面试题(数组去重)
标签:
JavaScript
版权声明:此文首发于本人慕课网账号-人生还有多少个二十年。
原文链接:http://www.imooc.com/article/15338 ,转载请注明出处。
本文的编撰,参考了很多的人成果,所以后文引用的链接请务必保留
使用JavaScript实现数组去重,我不夸张地说,我曾不小心看过这些字眼5次以上了,却一直对它不理不睬。直到在面试中有幸又与它相遇,它帮我跟面试官说了“再也不见”。为了让你们不重蹈覆辙,我将搜集的一些方法做了整理,添加了详尽的解释,希望对大家有所帮助。
//此处要处理的数组仅包含数字和字符串
var arr= ["a","a","1",1,2,2,3];
方法一(双重for循环)
//主要思路:将每一个元素和它后面的所有元素进行比较,若没有重复,则推入数组,
// 若有重复,则将重复项的最后一项推入数组
function unique1 (arr) {
var result = []; //将用于存放去重后的数组
var flag; // 用于标识元素是否重复
for(var i = 0, len = arr.length; i < len; i++){
flag = false; //还没有比较之前,默认为元素不重复
for(var j = i+1 , len = arr.length; j < len; j++){
//只要当前元素和其后的任意一项元素重复了,就把标识符设为true,并停止内层循环
if(arr[i] === arr[j]){
flag = true;
break;
}
}
//根据当前元素是否与其后的任意一项元素重复,决定是否将其推入数组
if (!flag) {
result.push(arr[i]);
}
}
return result;
}
console.log(unique1(arr)); // ["a", "1", 1, 2, 3]
方法二
//主要思路:遍历数组元素,若该元素在结果数组中不存在,则将其推入数组
//indexOf:查找指定元素在数组的首次出现的索引,若不存在该元素,则返回-1
//indexOf大小写敏感,写的时候千万要小心,顺便把typeof也记住吧,两者的'o'是不一样的
function unique2(arr){
var result = []; //将用于存放去重后的数组
for(var i = 0,len = arr.length;i < len;i++){
if(result.indexOf(arr[i])===-1){
result.push(arr[i]);
}
}
return result;
}
console.log(unique2(arr)); // ["a", "1", 1, 2, 3]
方法三
//主要思路:先把原数组的第一个元素推入结果数组,从原数组的第二项开始,
// 判断该项元素在原数组中受首次出现的位置是否为当前位置,若是,则向数组中推入该元素。
function unique3(arr){
var result = []; //将用于存放去重后的数组
result.push(arr[0]);
for(var i = 1,len = arr.length;i < len;i++){
if(arr.indexOf(arr[i]) === i){//判断当前元素在原数组中首次出现的索引值,是否是当前元素的索引
result.push(arr[i]);
}
}
return result;
}
console.log(unique3(arr)); // ["a", "1", 1, 2, 3]
方法四(借助对象)
//主要思路:通过一个对象来标志元素是否存在于结果数组,若不存在,则将该元素推入结果数组,并将其标志为存在
//遗憾的是,此方法没能区分出数字和字符,1和'1'只保留了一个。
function unique4 (arr) {
var flag = {},
result = []; //将用于存放去重后的数组
for(var i = 0, len = arr.length; i < len; i++){
if (flag[arr[i]]!==true) {
result.push(arr[i]);
flag[arr[i]] = true;
}
}
return result;
}
console.log(unique4(arr)); // ["a", "1", 2, 3]
方法五
//主要思路:先排序,然后判断紧随其后的元素跟它是否重复,若不重复,则说明该元素是唯一的,故将其推入数组
function unique5 (arr) {
var sortedArr = arr.sort();
var result = []; //将用于存放去重后的数组
for (var i = 0; i < arr.length; i++) {
if (sortedArr[i + 1] !== sortedArr[i]) {
result.push(sortedArr[i]);
}
}
return result;
}
console.log(unique5(arr)); //["1", 1, 2, 3, "a"]
方法六(借助ES6的Array.from()和Set数据结构)
//主要思路:先把数组转换为Set数据结构,滤除多余的重复元素,再将其转换为数组
//Set是ES6提供的一个数据结构,里面的元素不能出现重复,学过高一数学的你们应该都能理解集合的概念吧
//Array.from()ES6新增的数组方法,该方法可以将一个类数组对象或可遍历对象转换成真正的数组。
function unique6 (arr) {
return Array.from(new Set(arr));
}
console.log(unique6(arr)); //["1", 1, 2, 3, "a"]
总结:
数组去重的方法有很多种,但少不了两种结构:循环结构(为了处理每一个数组元素,必然少不了它)和分支结构(为了判断是否重复,也肯定要使用到它)。如果说代码中没有出现以上两种逻辑,要么是采用了递归的思路,要么就是利用到的数据结构(比如Set数据结构)或方法已经帮我们处理了那些逻辑。
参考链接:
数组去重的几个方法
JavaScript 数组去重
再见,重复的你(数组去重)
JavaScript 实现数组去重的方法
使用javascript实现数组去重的几种方式
使用ES5/ES6 Array相关方法实现数组去重
点击查看更多内容
3人点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦