今天写业务的时候偶然碰到了一个数组内去重的需求.想想看这应该算是一个经典面试题了吧,当然也十分简单没什么花头,写出来大概是这样的:
一个最简单的排序后去重
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方法又是怎么运行的?
- 解构如何优雅的在项目中使用?
- 什么样的语法糖才算好语法糖?
嗯,收获颇多,可以安心睡觉了.
