js数组去重的高阶方法

利用对象的 key 的唯一性

众所周知，在js的对象类型中保存数据都是以“key：value”的形式保存，而且这里的“key” 是唯一的，不可重复的（即为“属性名不可重复”）
因此我们可利用这一特性实现以下去重方法：

       var arr = [1,2,2,4,5,null,"123",123,"123",null,"abc","345","abc","345",]
        var obj ={};
        for ( var i = 0; i<arr.length ; i++) {
            if(obj[arr[i]] !== undefined) {
                arr.splice(i,1);
                i--;
            }else {
                obj[arr[i]] =arr[i];
            }
        }
        console.log(arr);

利用元素位置调换代替数组splice方法

当我们使用splice方法删除元素时，元素的减少会导致原数组长度的减短，从而使得删除元素所在的后一位元素迁移。如果数组保存数据过大时，将会导致性能下降

        var arr = [1, 2, 2, 4, 5, null, "123", 123, "123", null, "abc", "345", "abc", "345", ]
        var obj = {};
        for (var i = 0; i < arr.length; i++) {
            if (obj[arr[i]] !== undefined) {
                arr[i] = arr[arr.length - 1]
                arr.length--;
                // 数组长度减一，数组最后一位删除
                i--;
            } else {
                obj[arr[i]] = arr[i];
            }
        }
        console.log(arr);

Array.filter 和Array.indexOf 方法结合

Array.filter（）：创建一个新数组，并返回符合函数条件的元素给新数组。如果没有满足条件的元素，则返回空数组。
filter() 不会对空数组进行检测。
filter() 不会改变原始数组。

语法：array.filter(function(item,index,arr))
item :每一项的内容
index ： 每一项的下标
arr ：数组本身

Array.indexOf（）:遍历数组查找与括号内内容相同的第一个元素，并返回其下标，未找到则返回 -1

        var  newArr = arr.filter(function(item, index){
           return( arr.indexOf(item) === index)
        });  
        console.log(newArr);

原理：在filter方法过滤每一项时，判断当前元素的下标与此元素第一次出现的下标（通过indexOf方法实现）是否相等，这样重复的元素就会被过滤掉。

Array.indexOf 方法

        let arr = [1, 2, 2, 4, null, null, '3', 'abc', 3, 5, 4, 1, 2, 2, 4, null, null, '3', 'abc', 3, 5, 4]
        let obj = {}

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

        //等同于 forEach 写法
        arr.forEach(item => newArr.indexOf(item) === -1 ? newArr.push(item) : false)

        console.log(newArr) // [1, 2, 4, null, "3", "abc", 3, 5]

原理： 遍历arr数组，将每一项在新的空数组调用indexOf方法，如果没有当前项即会输出“-1”，再将输出“-1”的项添加到新数组。

Array.includes 方法

let newArr = []
for (var i = 0; i < arr.length; i++) {
	if (!newArr.includes(arr[i]))  newArr.push(arr[i])
}

//等同于 forEach 写法
arr.forEach( item => !newArr.includes(item) ? newArr.push(item) : '')

console.log(newArr)  // [1, 2, 4, null, "3", "abc", 3, 5]

原理： 遍历arr数组，将每一项在新的空数组调用includes 方法，如果没有当前项即会输出“true”，我们在将结果取反再将输出“true”的项添加到新数组。

结语

以上几种方法主要分为：
1.对象key 的唯一性。
2.新建数组比较再push
3.如双层循环判断是否相
其实方法很多，主要是开阔自己的思维去判断。希望大家都可以共同进步，我是一只小菜鸡，希望能给喜欢思考的你一丢丢启发。谢谢观看。