js之数组去重

傷城~ 2022-11-24 14:19 187阅读 0赞

## 一、双层循环 ##

**核心点：**

*  时间复杂度：`O(n^2)`
 *  上面的两种方法都是两次循环遍历，处理方式略有不同
 *  上述实现方式确实不是最佳选择，但它胜在兼容性好啊～

## 二、indexOf和includes ##

**2.1 indexOf简化一层循环判断**

**核心点：**

*  如果需要返回原数组，则可以在`indexOf`方法找到重复项时（不等于它首次出现的位置）时利用`splice`移除
 *  `indexOf`：返回在数组中可以找到一个给定元素的`第一个索引`，如果不存在，则返回-1。
 *  `indexOf(ele, fromIndex)`
    
     *  ele：要查找的元素
     *  fromIndex：查找元素的起始位置，默认为0，允许负数，-2表示从倒数第二个元素开始查找
     *  返回一个下标（number）

**2.2 includes简化一层循环判断**

**核心点：**

*  具体的是要返回原数组还是新数组大家可以自行组合～
 *  `includes`：用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 `true`，否则返回`false`
 *  `includes(ele, fromIndex)`
    
     *  ele：要查找的元素
     *  fromIndex：指定索引处开始查找。默认为 0，如果为负值，从末尾开始往前跳 `fromIndex` 的绝对值个索引。。
     *  返回结果（bool）

**2.3 indexOf和includes对于当前场景的选择**

在这里我们推荐使用includes来查找元素：

**返回值可以直接作为if的条件语句，简洁**

if(res.indexOf(arr[i]) !== -1 ){ todo }
    
    // or
    
    if(res.includes(arr[i])){ todo }

**识别`NaN`**

如果数组中有`NaN`，你又正好需要判断数组是否有存在`NaN`，这时你使用`indexOf`是无法判断的，你必须使用`includes`这个方法。

var arr = [NaN, NaN];
    arr.indexOf(NaN); // -1
    arr.includes(NaN); // true

**识别`undefined`**

如果数组中有`undefined`值，`includes`会认为**空的值是undefined**，而`indexOf`不会。

var arr = new Array(3);
    console.log(arr.indexOf(undefined)); //-1
    console.log(arr.includes(undefined)) //true

## 三、排序去重 ##

**核心点：**

*  数组排序后，相同的元素会相邻，所以如果当前元素与它的相邻元素不同，就存入到新数组中；
 *  相比于indexOf，只需要一层循环；
 *  concat会拼接数组，并返回新数组；
 *  sort()排序是通过按照转换为的`字符串的各个字符的Unicode位点`进行排序。所以很难保证它的准确性；

## 四、filter ##

**核心点：**

*  filter：方法创建一个新数组, 其包含通过所提供`函数实现的测试`的所有元素（返回测试函数成立的元素）
 *  `filter(callback, thisArg)`：
    
     *  callback接受三个参数：element-当前正在处理的元素，index-当前元素索引，array-调用了filter的数组本身
     *  thisArg：执行 callback 时，用于 this 的值。  
        利用filter我们可以在代码层面简化一下外层循环：

var arr = [1, 2, 1, 1, '1'];
    
    const unique = function (arr) {
        var res = arr.filter(function(item, index, arr){
            return arr.indexOf(item) === index;
        })
        return res;
    }
    console.log(unique(arr)); // [ 1, 2, '1' ]

结合排序的思路：

var arr = [1, 2, 1, 1, '1'];
    
    const unique = function (arr) {
        return arr.concat().sort().filter(function(item, index, arr){
            return !index || item !== arr[index - 1]
        })
    }
    
    console.log(unique(arr));

## 五、键值对（key-value） ##

前面提到的几种方式总结下来大致分为

1.  非排序数组，两次遍历判断（遍历、查询）
2.  排序数组，相邻元素比较

我们再提出一种方式，利用Object对象 key-value的方式，来统计数组中元素出现的个数，初步判断逻辑也有两种

拿`[1,1,1,2,2,3,'3']`举例：

1.  统计每个元素出现的次数，obj：\{1: 3, 2: 2, 3: 3\}, 返回这个`obj`的`key`而不管他们的`value`
2.  只元素首次出现，再次出现则证明他是重复元素

**5.1 统计次数**

**5.2 结合filter**

**5.3 key: value存在的问题**

对象的属性是字符串类型的，即本身`数字1`和`字符串‘1’`是不同的，但保存到对象中时会发生隐式类型转换，导致去重存在一定的隐患。

考虑到string和number的区别（typeof 1 === ‘number’， typeof ‘1’ === ‘string’），

所以我们可以使用 `typeof item + item` 拼成字符串作为 key 值来避免这个问题：