JavaScript 专题系列第三篇，解说种种数组去重要领，而且跟着 underscore 写一个 unique API

媒介

数组去重要领陈词滥调，既然是常谈，我也来谈谈。

双层轮回

或许我们起首想到的是运用 indexOf 来轮回推断一遍，但在这个要领之前，让我们先看看最原始的要领：

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。

看起来很简朴吧，之所以要讲一讲这个要领，是由于——————兼容性好！

indexOf

我们能够用 indexOf 简化内层的轮回：

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 API

晓得了这两种要领后，我们能够去尝试写一个名为 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。

filter

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));

Object 键值对

去重的要领浩瀚，只管我们已跟着 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

跟着 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))
}

JavaScript 的进化

我们能够看到，去重要领从原始的 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 的去重状况：

想相识为何会出现以上的效果，看两个 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专题系列目次地点：https://github.com/mqyqingfeng/Blog。

JavaScript专题系列估计写二十篇摆布，重要研讨一样平常开辟中一些功用点的完成，比方防抖、撙节、去重、范例推断、拷贝、最值、扁平、柯里、递归、乱序、排序等，特性是研(chao)究(xi) underscore 和 jQuery 的完成体式格局。

假如有毛病或许不严谨的处所，请务必赋予斧正，非常谢谢。假如喜好或许有所启示，迎接 star，对作者也是一种勉励。