前端面试常见问题,8种方法告诉你如何数组去重

481 阅读2分钟

固定的代码结构

image.png

方法一 使用工具库 Lodash/Underscore

两种工具使用方法一样,只是引用的库不一样! image.png

方法二 ES6 Set方法

首先New一个Set将数组放入,Set的特点是,里面的元素是独一无二的,但是现在是一个set对象,不是一个数组,下面我们需要将这个set对象转化为数组 image.png 打印的结果: image.png

1 对象转化数组 Array from()

image.png

2 Es6 展开运算符 [... xxx]

image.png

方法三 indexOf 判断

创建一个新的数组result,使用forEach循环遍历arr,indexOf如果不存在返回-1,存在的话就返回首个字母的下标值,然后再将不存在的push到新的数组。

image.png

方法四 filter 过滤

以item里面有两个4为例子,indexOf首先会发现index为1的这个4,当判断到index为4的这个4时候,indexOf还是会返回index为1,这样就发现index不一样,就不返回这个index为4的这个4,这样就把重复的给过滤掉了。

image.png

方法五 reduce

pre为上一次循环的结果,[ ]为初始值,每次循环用pre.includes來判断当前的item在不在pre里面,如果包含则直接返回当前pre,如果不包含则将item追加到pre中。

image.png

方法六 使用对象key值唯一的特点

首先声明一个空对象,使用forEach将数组的值作为空对象的key保存在空对象中,因为与value没什么关系,所以就随便写了个sss,由于对象中key值都是唯一的,所以现在保存下来的都是已经去重的。然后我们再将key取出来,使用Object.keys(),再使用map将结果转化为数组。

补充:~是js里的按位取反操作符,~~就是执行两次按位取反,其实就是保持原值,但是注意虽然是原值,但是对布尔型变量执行这个操作,会转化成相应的数值型变量,也就是 ~~true === 1,~~false === 0。

image.png

方法七 原始方法 双重for循环

使用当前的这个数字去和后面的所有数字去作比较,如果有重复的,就抛弃当前的数字,如果没有重复的,就保留当前数字。

image.png

方法八 sort排序

使用 sort 排序,再使用for循环判断相邻两个数是否一样,用反式思维,如果不一样push,一样就啥也不干。

image.png