js数组去重多种办法详解 (对萌新提供额外优待）

 6种萌新必备数组去重 + 扩展方法

       var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', 0, 0, 'a', 'a', {}, {}];
        console.log('原数组', arr)

        /*         那为什么没有去除空对象呢？
        这是因为当两个值比较的值都是对象的时候，比较的是两个对象在内存中是否指向的是同一个地址。所以， */

        // 方法一 利用Es6的Set集合,Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。 
        function unique_1(v) {
            return Array.from(new Set(v))
        }
        console.log('1.', unique_2(arr))

        // 方法二 严格来说并不算是一种去重方法，相对于第一种方法来说只是简化了代码
        function unique_2(v) {
            return [...new Set(v)]
        }
        console.log('2.', unique_2(arr))

        // 方法三 新建一个空的结果数组，利用 indexOf 来查找数组中是否已经存在该元素，如果存在该值跳过，如果不存在（-1）就push进新数组
        function unique_3(v) {
            if (!Array.isArray(v)) {
                return
            }
            let newArr = []
            v.forEach(element => {
                // console.log(element)
                if (newArr.indexOf(element) === -1) {
                    newArr.push(element)
                }
            });
            return newArr
        }
        console.log('3', unique_3(arr))

        // 方法四 与indexOf属于异曲同工之妙
        /* 
            注意：因为NaN 与任何值（包括其自身）相比得到的结果均是 false 
            所以 indexOf 无法判断出NaN类型 indexOf(NaN)是一定会返回-1的 <---不懂可以去查一下indexOf 原理
         */
        function unique_4(v) {
            if (!Array.isArray(v)) {
                return
            }
            return v.filter((item, index) => {
                return v.indexOf(item) === index
            })
        }
        console.log('4.', unique_4(arr))

        // 方法五 利用 includes 方法 （检测数组是否包含指定值，包含返回true，不包含返回false）
        // 没什么好说的，看懂 indexOf这个自然就懂了，我把他们放在一起，就是为了大家明白
        function unique_5(v) {
            if (!Array.isArray(v)) {
                return
            }
            let newArr = []
            v.forEach(element => {
                if (!newArr.includes(element)) {
                    newArr.push(element)
                }
            })
            return newArr
        }
        console.log('5.', unique_5(arr))

        // 方法六 ES5常用双重for循环,然后splice去重，但是我们现在有更高效的方法了，不是吗?
        var arr2 = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', 0, 0, 'a', 'a', {}, {}];

        function unique_6(v) {
            if (!Array.isArray(v)) {
                return
            }
            for (let i = 0; i < v.length; i++) {
                for (let j = i + 1; j < v.length; j++) {
                    if (v[i] == v[j]) {
                        v.splice(j, 1)
                        j--;
                    }
                }
            }
            /*  不懂看这里，
                例：循环数组 arr = [66,66,33,66] 
                arr[0] == arr[1] 等于 66 == 66 等于 true
                执行arr.splice(1, 1) <----再不懂百度去
                然后现在数组变成了 [66,33,66] 继续下一轮循环
            */
            return v
        }
        console.log('6.', unique_6(arr2))

执行结果 

扩展方法

// 方法七 比较不错的一种去重方法，[所有格式的值都可以实现去重]
        function unique_7(v) {
            var obj = {};
            return arr.filter(function(item, index, arr) {
                return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
            })
        }
        console.log('7.', unique_7(arr))

 // 方法八 利用递归去重 不太好用，知道有这个玩意就行了
        function unique_8(arr) {
            var array = arr;
            var len = array.length;

            array.sort(function(a, b) { //排序后更加方便去重
                return a - b;
            })

            function loop(index) {
                if (index >= 1) {
                    if (array[index] === array[index - 1]) {
                        array.splice(index, 1);
                    }
                    loop(index - 1); //递归loop，然后数组去重
                }
            }
            loop(len - 1);
            return array;
        }
        console.log('8.', unique_8(arr))

我是巴依，各位后浪们加油！ 

FE-lnterview javascript 74