一个简单的去重问题引发的思考

今天写业务的时候偶然碰到了一个数组内去重的需求.想想看这应该算是一个经典面试题了吧,当然也十分简单没什么花头,写出来大概是这样的:

一个最简单的排序后去重

var a=[1,2,3,4,4,3,2]
a=a.sort(); //先排序
var b=[];
 for(var i = 1; i < a.length; i++){
  if(a[i] !== a[i-1]){
   b.push(a[i]);
  }
 }
 console.log(b).

写起来真是太简单了,先排序,然后对它做一个循环判断是不是两两相等就可以了.是不是so Easy?顺手写成一个function吧.

function sortarr(arr) {
  arr=arr.sort();
  var b=[];
  for (var i=0;i<arr.length;i++){
    if(arr[i]!==arr[i-1]){
      b.push(a[i])
    }
  }
  return b;
}

这样我们就可以直接调用sortarr这个函数进行去重了.

等等,就这样结束了?Nope.

优化后的写法

这种写法只是用源生JS的最基础写法,或许我们可以优化一下?比如,使用hash方法?

 function sortarr (arr) {
  var hash = {}, result = [], item;//声明一个hashObj(哈希表),一个res数组,一个item值
  for (var i = 0; i < arr.length; i++) {//在函数中以传入对象的长度为限度做循环
    item = arr[i];//将传入对象的值赋给items
    if (!hash[item]) {//如果哈希表中没有当前项
      hash[item] = true;//存入哈希表
      result.push(item);//将当前数组当前项存入结果数组
    }
  }
   return result;
}

这样，我们就用O(1)-O(n)复杂度的另外一种方法实现了去重，并进行了初步的优化.

现成的用法

好的好的,我们已经理解了它的算法思想.但是实际上我们还是要在日常中用啊!日常中用了先写一个封装一下再用?难道就不能有简单一点的用法吗?还真有.

我们可以利用Es6中的filter(过滤器方法)(链接至MDN)来实现数组去重.

过滤器,顾名思义,我们只需要给它的callback传一个过滤的方法,就可以实现过滤.那么数组中重复数据应该怎么描述呢?

var result=a.filter(function(el,i,arr){
//todo
});
console.log(result);

我们很快想到了,使用indexOf这个API.

如果我们遍历一次数组,并只将第一次出现的值返回,那么就可以很轻松的实现去重了.所以加了callback的函数应该是:

var result=a.filter(function(el,i,arr){
return arr.indexOf(el)===i;
});
console.log(result);

这样我们就将这个需求用ES6优雅的实现了.是不是很棒棒?

还没有结束

但是我们发现一个问题,这个函数写的太过于啰嗦了.根据箭头函数的知识,我们可以将这个函数用箭头函数进行简写.

var result=a.filter(el,i,arr)=>arr.indexOf(el)===i);

在这个缩写中,我们成功的精简了代码,可读性也变得更好了:)

还有没有别的?

然而在ES6中,还有一种更为简洁的写法:

var a=[1,2,3,4,4,3,2,'CoderMageFox','test','CoderMageFox']
b=[...new Set(a)]

输出为:

这才是ES6中让人们舒服的语法糖.

这一小段代码包含了两个知识点:...和Set(a).我们来分别说明.

...

...其实是ES6中的解构赋值,它可以将值从数组或属性从对象提取到不同的变量中。比如此处,我们将表达式new Set(a)中的值从一个obj中提取到了这个数组中.那么newSet(a)又是啥呢?

Set()

Set在MDN文档中的解释为:

Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。

解释到这里,我相信已经不能更清楚了.我们使用了ES6的一个现成API将a中所有的唯一值new成了一个新的obj,然后通过解构将这个obj提取到了数组中,最后打印了出来.

写到这里,我已经充分了解了这个看起来简单的去重问题了.留下的一些边边角角的疑问就是:

JS中的sort方法又是怎么运行的?
解构如何优雅的在项目中使用?
什么样的语法糖才算好语法糖?

嗯,收获颇多,可以安心睡觉了.