JavaScript编程题：数组去重

问题

题目地址：题目地址

题目描述：
为 Array 对象添加一个去除重复项的方法

要求是用下面的方式实现：

Array.prototype.uniq = function () {
    
}

相当于为所有数组对象都添加一个uniq方法。

示例

输入：
[false, true, undefined, null, NaN, 0, 1, {}, {}, ‘a’, ‘a’, NaN]
输出：
[false, true, undefined, null, NaN, 0, 1, {}, {}, ‘a’]

分析

数组去重其实可以用ES6的Set对象和Array.from方法组合起来，很容易地实现：

let arr = [false, true, undefined, null, NaN, 0, 1, {}, {}, 'a', 'a', NaN];
Array.from(new Set(arr)) // [false, true, undefined, null, NaN, 0, 1, {}, {}, "a"]

但是这道题目的要求更高些，需要给每个数组对象都添加一个去重的方法。好在题目本身已经直接告诉了，可以给Array构造函数的原型对象prototype添加方法实现。

这里我有一个不明白的地方，上面代码的去重结果是：

[false, true, undefined, null, NaN, 0, 1, {}, {}, “a”]

原本两个NaN，去重后只保留了一个。按理说：

NaN == NaN //false
NaN === NaN //false

虽然他们都叫NaN，但是很明显不是一个值。这样的情况也能叫重复吗？先暂时保留这个疑问吧。(ˉ▽ˉ；)…

实现

其实直接用上面说的new Set()+Array.from()的办法实现也行。不过想想还是从逻辑上自己实现一下好些，这样能够对一些知识理解得更深，也能发现一些以往不容易发现的错误。

全部代码如下：

Array.prototype.uniq = function () {
    let _thisArr = Array.from(this);
    for (let v of _thisArr) {
        while (1) {
            if (_thisArr.lastIndexOf(v) !== _thisArr.indexOf(v)) //核心：判断唯一
                _thisArr.splice(_thisArr.lastIndexOf(v), 1);
            else 
                break;
        }
    }
    removeNaN(_thisArr); //只保留一个NaN
    function removeNaN(arr) { 
        let isRemove = false;
        arr.forEach((v, i, arr) => {
            if (typeof(v) === "number" && isNaN(v)) { //注意不能只用isNaN(v)，否则对象、非数字字符串、undefined等也会被判为真
                isRemove ? arr.splice(i, 1) : ''; 
                !isRemove && (isRemove = true);   
            }
        })
    }
    return _thisArr; //返回副本
}

//测试:
let arr = [false, true, undefined, null, NaN, 0, 1, {}, {}, 'a', 'a', NaN];
console.log(arr.uniq()); //[false, true, undefined, null, NaN, 0, 1, {}, {}, 'a']

总结

比较核心的地方有两点：
1）判断唯一性。这里我使用了：

_thisArr.lastIndexOf(v) !== _thisArr.indexOf(v)

这样的判别式进行判断，第一个该值的元素与最后一个该值的元素位置一致，就认为这个值在数组里只存在一个。但是有一个例外，就是上文所说的NaN。

2）判断NaN。前面说了，按理说数组里的两个NaN其实值是不相等的，所以用上面的唯一性判别的话，会把两个NaN当成两个唯一的值，不会把多余的那个NaN从数组里移除。

所以就需要单独为NaN写一个函数进行处理了。

function removeNaN(arr) { 
        let isRemove = false;
        arr.forEach((v, i, arr) => {
            if (typeof(v) === "number" && isNaN(v)) { //注意不能只用isNaN(v)，否则对象、非数字字符串、undefined等也会被判为真
                isRemove ? arr.splice(i, 1) : ''; 
                !isRemove && (isRemove = true);   
            }
        })
    }

注意isNaN()方法的用法。之前我以为，isNaN()只是单独用来判断参数是不是NaN，但是其实不是。

isNaN({}) //true
isNaN('a') //true
isNaN('a1') //true
isNaN('1a') //true
isNaN(NaN) //true
isNaN(undefined) //true
isNaN(100) //false
isNaN(null) //false
isNaN(false) //false
isNaN(Symbol('...')) //报错：Uncaught TypeError: Cannot convert a Symbol value to a number

可以看出，实际上这个方法是用来判断，参数能不能被Number()方法转化成一个正常的数字值（即非NaN）。如果可以，则返回false，否则返回true。

null、false可以被Number()转成0，所以返回也是false。而undefined转化后是NaN，所以返回true。我特地试了一下ES6新的类型Symbol，结果是报错。

所以在判断一个元素是不是NaN时，不能仅用isNaN方法。解决的办法是多加一个判断条件：typeof(v) === “number”。

if (typeof(v) === "number" && isNaN(v)) {
	....
}

如果一个元素是number类型，且使用isNaN()方法会被判定为true，那么它就是NaN。这样就可以了，至此就实现我们的去重方法了。