JS-数组去重的13种方法

一、数组去重

首先全局定义一个数组，让我们开始由复杂到简单的方法探索一下吧！！！

var arr1 = [11, 11, 1, 1, 2, 2, 'huo', 'huo'];

1、双重for循环+新数组

思想：建立一个新数组，并放入原数组的第一个元素。将原数组元素依次与新数组元素比较，元素不同就放入新数组。最后返回新数组，达到去重效果。

    function darray2(arr) {
        let newArr = [arr[0]];
        for (let i = 0; i < arr.length; i++) {
            for (let j = 0; j < newArr.length; j++) {
                var repeat = false; //这里一开始我用了 let 声明，会报错
                //因为后面的 if 判断里 repeat 取不到 let 声明的块级作用域
                if (arr[i] === newArr[j]) {
                    repeat = true;
                    break;
                }
            }
            if (!repeat) {
                newArr.push(arr[i]);
            }
        }
        return newArr;
    }
    console.log(darray2(arr1))  // [11, 1, 2, "huo"]

优化一下：

        for (let i = 0; i < arr.length; i++) {
            let repeat = false; // 放到这里就行了，let的块级作用域包含后面的if
            for (let j = 0; j < newArr.length; j++) {
                if (arr[i] === newArr[j]) {
                 // var repeat = false; 
                    repeat = true;
                    break;
                }
            }
            if (!repeat) {
                newArr.push(arr[i]);
            }
        }

2、双重 for 循环 + splice（第一种方法的简化）

思想：双层循环，外层循环元素，内层循环比较元素值。值相同则删除。

    function darray1(arr) {
        for (let i = 0; i < arr.length; i++) {
            for (let j = i + 1; j < arr.length; j++) {
                if (arr[i] === arr[j]) {
                    arr.splice(j, 1);
                    j--;
                }
            }
        }
        return arr;
    }
    console.log(darray1(arr1))  // [11, 1, 2, "huo"]

3、sort排序+相邻元素比较

思想：使用sort()方法将原数组排序。创建新数组，第一个元素为原数组第一个元素。原数组相邻元素进行比较，不同则放入新数组。最后返回新数组。

 

   function darray3(arr) {
        arr = arr.sort();
        let newArr = [arr[0]];
        for (let i = 1; i < arr.length; i++) {
            if (arr[i] !== arr[i - 1]) {
                newArr.push[arr[i]];
            }

        }
        return newArr;
    }
    console.log(darray3(arr1))  // [11, 1, 2, "huo"]

4、indexOf方法+遍历原数组元素

思想：创建新的空数组。遍历原数组，使用 indexOf 方法（查找某个元素的位置，如果不存在就返回-1）依次遍历原数组元素，判断新数组中是否含有该元素，有则放入新数组。最后返回新数组。

    function darray4(arr) {
        let newArr = [];
        for (let i = 0; i < arr.length; i++) {
            if (newArr.indexOf(arr[i]) === -1) {
                newArr.push(arr[i]);
            }

        }
        return newArr;
    }
    console.log(darray4(arr1))  // [11, 1, 2, "huo"]

5、includes方法+遍历原数组元素

思想：创建新的空数组。遍历原数组，使用 includes 方法（判断是否包含某一元素，包含返回true，不包含返回false）依次遍历原数组元素，判断新数组中是否含有该元素，有则放入新数组。最后返回新数组。

    function darray5(arr) {
        let newArr = []
        for (let i = 0; i < arr.length; i++) {
            if (!newArr.includes(arr[i])) {
                newArr.push(arr[i])
            }
        }
        return newArr
    }
    console.log(darray5(arr1))  // [11, 1, 2, "huo"]

6、对象特性（不建议使用）

思想：利用对象的属性不能相同的特点进行去重

    function darray6(arr) {
        let newArr = [];
        let obj = {};
        for (let i = 0; i < arr.length; i++) {
            if (!obj[arr[i]]) {
                newArr.push(arr[i])
                obj[arr[i]] = 1
            } else {
                obj[arr[i]]++
            }
        }
        return newArr;
    }
    console.log(darray6(arr1))  // [11, 1, 2, "huo"]

7、filter +includes

思想：使用过滤器，过滤重复的元素，返回新数组

    function darray7(arr) {
        let newArr = []
        newArr = arr.filter(function (item) {
            return newArr.includes(item) ? '' : newArr.push(item)
        })
        return newArr
    }
    console.log(darray7(arr1))  // [11, 1, 2, "huo"]

8、filter + hasOwnProperty

思想：利用hasOwnProperty 判断是否存在对象属性

    function darray8(arr) {
        let obj = {};
        return arr.filter(function (item, index, arr) {
            return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
        })
    }
    console.log(darray8(arr1))  // [11, 1, 2, "huo"]

9、递归

    function darray9(arr) {
        let array = arr;
        let 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(darray9(arr1)) // [1, 2, 11, "huo"]

10、利用 Map 数据结构

    function darray10(arr) {
        let map = new Map();
        let array = new Array();  // 数组用于返回结果
        for (let i = 0; i < arr.length; i++) {
            if (map.has(arr[i])) {  // 如果有该key值
                map.set(arr[i], true);
            } else {
                map.set(arr[i], false);   // 如果没有该key值
                array.push(arr[i]);
            }
        }
        return array;
    }
    console.log(darray10(arr1)) // [11, 1, 2, "huo"]

11、利用reduce+includes

function darray11(arr){
    return arr.reduce((prev,cur) => prev.includes(cur) ? prev : [...prev,cur],[]);
}

12、利用 Set 数据结构 + Array.from

        function darray12(arr) {
            //Set数据结构，它类似于数组，其成员的值都是唯一的
            return Array.from(new Set(arr)); // 利用Array.from将Set结构转换成真正的数组
        }
        console.log(darray12(arr1)) //[11, 1, 2, "huo"]

13、利用 Set 数据结构 + 展开运算符（最简便的方法了）

    let arr = [...new Set(arr1)]
    console.log(arr) // [11, 1, 2, "huo"]