JavaScript 专题系列第三篇，讲解各类数组去重方法，而且跟着 underscore 写一个 unique APIjavascript
数组去重方法老生常谈，既然是常谈，我也来谈谈。java
也许咱们首先想到的是使用 indexOf 来循环判断一遍，但在这个方法以前，让咱们先看看最原始的方法：git
var array = [1, 1, '1', '1'];
function unique(array) {
// res用来存储结果
var res = [];
for (var i = 0, arrayLen = array.length; i < arrayLen; i++) {
for (var j = 0, resLen = res.length; j < resLen; j++ ) {
if (array[i] === res[j]) {
break;
}
}
// 若是array[i]是惟一的，那么执行完循环，j等于resLen
if (j === resLen) {
res.push(array[i])
}
}
return res;
}
console.log(unique(array)); // [1, "1"]复制代码
在这个方法中，咱们使用循环嵌套，最外层循环 array，里面循环 res，若是 array[i] 的值跟 res[j] 的值相等，就跳出循环，若是都不等于，说明元素是惟一的，这时候 j 的值就会等于 res 的长度，根据这个特色进行判断，将值添加进 res。es6
看起来很简单吧，之因此要讲一讲这个方法，是由于——————兼容性好！github
咱们能够用 indexOf 简化内层的循环：api
var array = [1, 1, '1'];
function unique(array) {
var res = [];
for (var i = 0, len = array.length; i < len; i++) {
var current = array[i];
if (res.indexOf(current) === -1) {
res.push(current)
}
}
return res;
}
console.log(unique(array));复制代码
试想咱们先将要去重的数组使用 sort 方法排序后，相同的值就会被排在一块儿，而后咱们就能够只判断当前元素与上一个元素是否相同，相同就说明重复，不相同就添加进 res，让咱们写个 demo：数组
var array = [1, 1, '1'];
function unique(array) {
var res = [];
var sortedArray = array.concat().sort();
var seen;
for (var i = 0, len = sortedArray.length; i < len; i++) {
// 若是是第一个元素或者相邻的元素不相同
if (!i || seen !== sortedArray[i]) {
res.push(sortedArray[i])
}
seen = sortedArray[i];
}
return res;
}
console.log(unique(array));复制代码
若是咱们对一个已经排好序的数组去重，这种方法效率确定高于使用 indexOf。数据结构
知道了这两种方法后，咱们能够去尝试写一个名为 unique 的工具函数，咱们根据一个参数 isSorted 判断传入的数组是不是已排序的，若是为 true，咱们就判断相邻元素是否相同，若是为 false，咱们就使用 indexOf 进行判断函数
var array1 = [1, 2, '1', 2, 1];
var array2 = [1, 1, '1', 2, 2];
// 初版
function unique(array, isSorted) {
var res = [];
var seen = [];
for (var i = 0, len = array.length; i < len; i++) {
var value = array[i];
if (isSorted) {
if (!i || seen !== value) {
res.push(value)
}
seen = value;
}
else if (res.indexOf(value) === -1) {
res.push(value);
}
}
return res;
}
console.log(unique(array1)); // [1, 2, "1"]
console.log(unique(array2, true)); // [1, "1", 2]复制代码
尽管 unqique 已经能够试下去重功能，可是为了让这个 API 更增强大，咱们来考虑一个需求：工具
新需求：字母的大小写视为一致，好比'a'和'A'，保留一个就能够了！
虽然咱们能够先处理数组中的全部数据，好比将全部的字母转成小写，而后再传入unique函数，可是有没有方法能够省掉处理数组的这一遍循环，直接就在去重的循环中作呢？让咱们去完成这个需求：
var array3 = [1, 1, 'a', 'A', 2, 2];
// 第二版
// iteratee 英文释义：迭代 重复
function unique(array, isSorted, iteratee) {
var res = [];
var seen = [];
for (var i = 0, len = array.length; i < len; i++) {
var value = array[i];
var computed = iteratee ? iteratee(value, i, array) : value;
if (isSorted) {
if (!i || seen !== value) {
res.push(value)
}
seen = value;
}
else if (iteratee) {
if (seen.indexOf(computed) === -1) {
seen.push(computed);
res.push(value);
}
}
else if (res.indexOf(value) === -1) {
res.push(value);
}
}
return res;
}
console.log(unique(array3, false, function(item){
return typeof item == 'string' ? item.toLowerCase() : item
})); // [1, "a", 2]复制代码
在这一版也是最后一版的实现中，函数传递三个参数：
array：表示要去重的数组，必填
isSorted：表示函数传入的数组是否已排过序，若是为 true，将会采用更快的方法进行去重
iteratee：传入一个函数，能够对每一个元素进行从新的计算，而后根据处理的结果进行去重
至此，咱们已经仿照着 underscore 的思路写了一个 unique 函数，具体能够查看 Github。
ES5 提供了 filter 方法，咱们能够用来简化外层循环：
好比使用 indexOf 的方法：
var array = [1, 2, 1, 1, '1'];
function unique(array) {
var res = array.filter(function(item, index, array){
return array.indexOf(item) === index;
})
return res;
}
console.log(unique(array));复制代码
排序去重的方法：
var array = [1, 2, 1, 1, '1'];
function unique(array) {
return array.concat().sort().filter(function(item, index, array){
return !index || item !== array[index - 1]
})
}
console.log(unique(array));复制代码
去重的方法众多，尽管咱们已经跟着 underscore 写了一个 unqiue API，可是让咱们看看其余的方法拓展下视野：
这种方法是利用一个空的 Object 对象，咱们把数组的值存成 Object 的 key 值，好比 Object[value1] = true，在判断另外一个值的时候，若是 Object[value2]存在的话，就说明该值是重复的。示例代码以下：
var array = [1, 2, 1, 1, '1'];
function unique(array) {
var obj = {};
return array.filter(function(item, index, array){
return obj.hasOwnProperty(item) ? false : (obj[item] = true)
})
}
console.log(unique(array)); // [1, 2]复制代码
咱们能够发现，是有问题的，由于 1 和 '1' 是不一样的，可是这种方法会判断为同一个值，这是由于对象的键值只能是字符串，因此咱们可使用 typeof item + item 拼成字符串做为 key 值来避免这个问题：
var array = [1, 2, 1, 1, '1'];
function unique(array) {
var obj = {};
return array.filter(function(item, index, array){
return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
})
}
console.log(unique(array)); // [1, 2, "1"]复制代码
随着 ES6 的到来，去重的方法又有了进展，好比咱们可使用 Set 和 Map 数据结构，以 Set 为例，ES6 提供了新的数据结构 Set。它相似于数组，可是成员的值都是惟一的，没有重复的值。
是否是感受就像是为去重而准备的？让咱们来写一版：
var array = [1, 2, 1, 1, '1'];
function unique(array) {
return Array.from(new Set(array));
}
console.log(unique(array)); // [1, 2, "1"]复制代码
甚至能够再简化下：
function unique(array) {
return [...new Set(array)];
}复制代码
还能够再简化下：
var unique = (a) => [...new Set(a)]复制代码
此外，若是用 Map 的话：
function unique (arr) {
const seen = new Map()
return arr.filter((a) => !seen.has(a) && seen.set(a, 1))
}复制代码
咱们能够看到，去重方法从原始的 14 行代码到 ES6 的 1 行代码，其实也说明了 JavaScript 这门语言在不停的进步，相信之后的开发也会愈来愈高效。
去重的方法就到此结束了，然而要去重的元素类型多是多种多样，除了例子中简单的 1 和 '1' 以外，其实还有 null、undefined、NaN、对象等，那么对于这些元素，以前的这些方法的去重结果又是怎样呢？
在此以前，先让咱们先看几个例子：
var str1 = '1';
var str2 = new String('1');
console.log(str1 == str2); // true
console.log(str1 === str2); // false
console.log(null == null); // true
console.log(null === null); // true
console.log(undefined == undefined); // true
console.log(undefined === undefined); // true
console.log(NaN == NaN); // false
console.log(NaN === NaN); // false
console.log(/a/ == /a/); // false
console.log(/a/ === /a/); // false
console.log({} == {}); // false
console.log({} === {}); // false复制代码
那么，对于这样一个数组
var array = [1, 1, '1', '1', null, null, undefined, undefined, new String('1'), new String('1'), /a/, /a/, NaN, NaN];复制代码
以上各类方法去重的结果究竟是什么样的呢？
我特意整理了一个列表，咱们重点关注下对象和 NaN 的去重状况：
| 方法 | 结果 | 说明 |
|---|---|---|
| for循环 | [1, "1", null, undefined, String, String, /a/, /a/, NaN, NaN] | 对象和 NaN 不去重 |
| indexOf | [1, "1", null, undefined, String, String, /a/, /a/, NaN, NaN] | 对象和 NaN 不去重 |
| sort | [/a/, /a/, "1", 1, String, 1, String, NaN, NaN, null, undefined] | 对象和 NaN 不去重 数字 1 也不去重 |
| filter + indexOf | [1, "1", null, undefined, String, String, /a/, /a/] | 对象不去重 NaN 会被忽略掉 |
| filter + sort | [/a/, /a/, "1", 1, String, 1, String, NaN, NaN, null, undefined] | 对象和 NaN 不去重 数字 1 不去重 |
| 优化后的键值对方法 | [1, "1", null, undefined, String, /a/, NaN] | 所有去重 |
| Set | [1, "1", null, undefined, String, String, /a/, /a/, NaN] | 对象不去重 NaN 去重 |
想了解为何会出现以上的结果，看两个 demo 便能明白：
// demo1
var arr = [1, 2, NaN];
arr.indexOf(NaN); // -1复制代码
indexOf 底层仍是使用 === 进行判断，由于 NaN ==== NaN的结果为 false，因此使用 indexOf 查找不到 NaN 元素
// demo2
function unique(array) {
return Array.from(new Set(array));
}
console.log(unique([NaN, NaN])) // [NaN]复制代码
Set 认为尽管 NaN === NaN 为 false，可是这两个元素是重复的。
虽然去重的结果有所不一样，但更重要的是让咱们知道在合适的场景要选择合适的方法。
JavaScript专题系列目录地址：github.com/mqyqingfeng…。
JavaScript专题系列预计写二十篇左右，主要研究平常开发中一些功能点的实现，好比防抖、节流、去重、类型判断、拷贝、最值、扁平、柯里、递归、乱序、排序等，特色是研(chao)究(xi) underscore 和 jQuery 的实现方式。
若是有错误或者不严谨的地方，请务必给予指正，十分感谢。若是喜欢或者有所启发，欢迎 star，对做者也是一种鼓励。