继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

我和他们都曾遇过的前端面试题(数组去重)

人生还有多少个二十年
关注TA
已关注
手记 19
粉丝 13
获赞 492

版权声明:此文首发于本人慕课网账号-人生还有多少个二十年
原文链接: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相关方法实现数组去重

打开App,阅读手记
3人推荐
发表评论
随时随地看视频慕课网APP