数组去重总结+遇过的一些坑

很多方法说明会从菜鸟教程借鉴与粘贴，请读者不要介意，如果有好的其他方法欢迎读者们私信我补充。

1、for循环+splice方式

splice() 方法用于添加或删除数组中的元素。
注意：这种方法会改变原始数组。
splice方法的说明：
（1）基础语法：array.splice(index,howmany,item1,…,itemX)
（2）参数说明：

参数	描述
index	必需。规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
howmany	可选。规定应该删除多少元素。必须是数字，但可以是 “0”。如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
item1, …, itemX	可选。要添加到数组的新元素。

若想查看详细例子可以移步菜鸟教程
以下是代码部分：

 let Arr = ["1", "2", "3", 1, "2", 'true', true, true, 5, 5, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN',{},{}]
    function unique() {
        for (var i = 0; i < Arr.length; i++) {
            for (var j = i + 1; j < Arr.length; j++) {
                if (Arr[i] == Arr[j]) { 
                    Arr.splice(j, 1);
                    j--;
                }
            }
        }
        console.log(Arr)
        return Arr;
    }

打印结果如下：

结果说明：看打印结果，我们能很明显的看到NaN和{}没有去重，两个null直接消失了,经测试发现（1）js中的NaN===NaN返回的是false，你可以这样理解： 因为NaN是Not a Number的缩写，即不是一个数字。如，A不是一个数字，B也不是一个数字，那你能说A与B完全相等吗？（2）undefined与null在判断时为true，所以都被删除掉了。（3）{}与{}，通过迭代器枚举对象的属性，你也能发现他们其实是不相等的，以上几种测试代码如下：
【1】关于undefined与null的测试

//关于undefined与null的测试
 let arrObj = [undefined,undefined,null,null];
    function unique() {
        for (let i = 0; i < arrObj.length; i++) {
            for (let j = i + 1; j < arrObj.length; j++) {
                if (arrObj[i] == arrObj[j]) { 
                    arrObj.splice(j, 1);
                    j--;
                }
            }
        }
        console.log(arrObj)
        return arrObj;
    }

结果打印：




【2】关于{}的测试
说明：1、原始值的比较是值的比较：
　　　　它们的值相等时它们就相等 ==
　　　　它们的值和类型都相等时它们就恒等 ===。
　　　2、对象和原始值不同，对象的比较并非值的比较,而是引用的比较：
　　　　即使两个对象包含同样的属性及相同的值，它们也是不相等的；
　　　　即使两个数组各个索引元素完全相等，它们也是不相等的。
　　　　简单来说：两个单独的对象永不相等， 两个单独的数组永不相等。
　　　3、我们通常将对象称为引用类型（reference type），以此来和JavaScript的基本类型区分开来。对象值都是引用（reference），对象的比较均是引用的比较：当且仅当它们引用同一个基对象时，它们才相等。

 let arrObj = [{},{}];
    let a = arrObj[0];
    let b = arrObj[0];
    function unique () {   
     console.log(arrObj[0]==arrObj[1]); //单独的永不相等
     console.log(a==b) //引用同一个，相等
    }

结果打印：

2、indexOf去重

定义和用法
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
如果没有找到匹配的字符串则返回 -1。
注意： indexOf() 方法区分大小写。
语法
string.indexOf(searchvalue,start)
参数值

参数	描述
searchvalue	必需。规定需检索的字符串值。
start	可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 string Object.length - 1。如省略该参数，则将从字符串的首字符开始检索。

返回值

类型	描述
Number	查找指定字符串第一次出现的位置，如果没找到匹配的字符串则返回 -1。

若想查看详细例子可以移步菜鸟教程

let arr = ["1", "2", "3", 1, "2", 'true', true, true, 5, 5, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', {}, {}]
    function unique() {
        var array = [];
        for (let i = 0; i < arr.length; i++) {
            if (array.indexOf(arr[i]) === -1) {
                array.push(arr[i])
            }
        }
        console.log(array)
        return array;
    }

打印结果如下所示：

3、利用数组的sort方法进行去重

核心思想：现将数组排序，然后通过for循环将相邻元素进行对比，不等的时候放入新数组。

定义和用法
sort() 方法用于对数组的元素进行排序。
排序顺序可以是字母或数字，并按升序或降序。
默认排序顺序为按字母升序。

注意：当数字是按字母顺序排列时"40"将排在"5"前面。
使用数字排序，你必须通过一个函数作为参数来调用。
函数指定数字是按照升序还是降序排列。
这些说起来可能很难理解，你可以通过本页底部实例进一步了解它。
注意： 这种方法会改变原始数组！。

语法
array.sort(sortfunction)；

参数 Values

参数	描述
sortfunction	可选。规定排序顺序。必须是函数。

返回值

Type	描述
Array	对数组的引用。请注意，数组在原数组上进行排序，不生成副本。

若想查看详细例子可以移步菜鸟教程

 let arr = ["1", "2", "3", 1, "2", 'true', true, true, 5, 5, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', {}, {}]
    function unique() {
        arr = arr.sort();
        let array = [arr[0]];
        for(let i=1;i<arr.length;i++) {
            if(arr[i]!==arr[i-1]) {
                array.push(arr[i])
            }
        }
        console.log("sort",array)
        return array;
    }

打印结果如下：

4、利用数组的includes() 方法去重

定义和用法
includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。

语法
arr.includes(searchElement)
arr.includes(searchElement, fromIndex)

参数说明

参数	描述
searchElement	必须。需要查找的元素值。
fromIndex	可选。从该索引处开始查找 searchElement。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。

let arr = ["1", "2", "3", 1, "2", 'true', true, true, 5, 5, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', {}, {}]
    function unique() {
        var array = [];
        for (let i = 0; i < arr.length; i++) {
            if (!array.includes(arr[i])) {
                array.push(arr[i])
            }
        }
        console.log("includes",array)
        return array;
    }

打印结果如下所示

看结果我们能发现，使用includes方法是可以去除掉重复的NaN的。
若想查看详细例子可以移步菜鸟教程

5、使用数组的filter()方法去重

核心思想：看当前元素的索引值是否与在原数组中的索引值相同，相同则放到新数组中。

定义和用法
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意： filter() 不会对空数组进行检测。
注意： filter() 不会改变原始数组。

语法
array.filter(function(currentValue,index,arr), thisValue)

参数	描述
function(currentValue, index,arr)	必须。函数，数组中的每个元素都会执行这个函数 函数参数:
参数	描述
currentValue	必须。当前元素的值
index	可选。当前元素的索引值
arr	可选。当前元素属于的数组对象
thisValue	可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue ，“this” 的值为 “undefined”

let arr = ["1", "2", "3", 1, "2", 'true', true, true, 5, 5, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', {}, {}]
function unique() {
   return arr.filter(function(currentValue,index,arr){
       return arr.indexOf(currentValue,0) === index;
   })
}

6、利用ES6中的set方法去重

Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。

Set 中的特殊值
【1】Set 对象存储的值总是唯一的，所以需要判断两个值是否恒等。有几个特殊值需要特殊对待：
【2】+0 与 -0 在存储判断唯一性的时候是恒等的，所以不重复；
【3】undefined 与 undefined 是恒等的，所以不重复；
【4】NaN 与 NaN 是不恒等的，但是在 Set 中只能存一个，不重复。

 let arr = ["1", "2", "3", 1, "2", 'true', true, true, 5, 5, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', {}, {}]
function unique() {
     var mySet = new Set(arr); // Array 转 Set
     [...mySet]; // 用...操作符，将 Set 转 Array
     console.log([...mySet])
 }

打印结果如下所示：

若想查看详细例子可以移步菜鸟教程

7、利用数组的reduce方法进行对象的去重

语法
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

参数

参数	描述
function(total,currentValue, index,arr)	必需。用于执行每个数组元素的函数。函数参数:
参数	描述
total	必需。初始值, 或者计算结束后的返回值。
currentValue	必需。当前元素
currentIndex	可选。当前元素的索引
currentIndex	可选。当前元素所属的数组对象。
initialValue	可选。传递给函数的初始值

// 数组对象去重
sliceArr(arr) {
     let obj = {};
     return (arr = arr.reduce((item, next) => {
         obj[next.k_s] ? '' : (obj[next.k_s] = true && item.push(next));
         return item;
     }, []));
 },

结果如下所示：

若想查看详细例子可以移步菜鸟教程

8、利用数组的some方法去重

注意：去不了Null和{}。
代码如下：

function unique(list) {
   let result = [list[0]];// 用于承接没有重复的数据，初始时将原始数组的第一个值赋给它。
   for (let i = 1; i < list.length; i++) {
     // 判断结果数组中是否存在一样的值，若果没有的话则将数据存入结果数组中。
     if (!(result.some(val => list[i] === val))) {
       result.push(list[i]);
     }
   }
   return result;
 }
let arr = ["1", "2", "3", 1, "2", 'true', true, true, 5, 5, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', {}, {}];
unique(arr); 

结果如下所示：

数组some方法的各个参数说明和具体用法

最后：特别感谢菜鸟教程官网提供的资料参考：菜鸟官网-js