面试前端数组去重，我会问这3个小问题

data = [
      {
        time: '2022-12-21 08:03:34',
        title: '使用css3实现一个超浪漫的新年倒计时'
       },
       {
         time: '2023-01-02 23:50:55',
         title: '我辛辛苦苦做了一个月的项目组长年底用来写了晋升PPT'
        },
        {
          time: '2023-01-03 22:36:01',
          title: '内卷对于2022是一种无奈也是一种修行'
        },
        {
           time: '2023-01-03 23:42:38',
           title: '前端bug每次都比后端多我总结了5点原因'
        },
]

注意因为每个人的博客或者是一个写作历程必定是一个长时间发生的过程所以数据一定是不定量的可能还带有分页所以服务端不可能预先将数据整理成前端需要的样子所以这个时候数据中的年月日部分便成了重复的需要去重的部分去重后用于本案例汇总点的显示

2、前端银行属地显示实例

有很多网站内有这样一个页面银行属地显示因为全国各地大大小小的银行有非常多我们需要显示成这样

很多时候服务端也不会先将北京天津上海等属地给我们抽成map的key值形式因为一些原因也是以数组形式返回到前端而这个数组大部分时候也是直接从数据库拉取的数据这就导致需要我们前端做一些数组去重服务端数据大概是这样子

data = [
       {
           city: '北京',
           name: '北京银行1'
       },
       {
           city: '北京',
           name: '北京银行2'
      },
      {
           city: '北京',
           name: 'XX商业银行'
      },
      {
           city: '天津',
           name: '天津银行1'
      },
      {
          city: '天津',
          name: '天津商业银行'
      },
      {
          city: '天津',
          name: '港口商业银行'
     },
]

这样一描述类似场景想起来的是不是就很多了这个案例中数组内的city字段就是需要去重的对象。

二、说一下数组去重的几种实现方法吧

因为真实项目中去重可能不仅仅是对一些数字的去重可能还包含一些字符串数字混合的场景所以我们这里随意想一个混合数组例如

var arr = ['2022-03-21', 3, 8, 5, 3, 4, 3, '2022-03-21', '2022-03-22', 8];

1、第1种

第1种是定义一个新的空数组再执行嵌套双循环监测空数组中如果没有的元素push进空数组中。这个方法考察了continue的初级使用也是一种思想第一次空数组必定无内容我们pus一个元素跳过第一次循环第二次再进行循环对比代码如下

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

2、第2种

第2种是第一种的改进也是新定义一个空数组利用indexOf监测新数组中是否包含某个元素代码如下

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

3、第3种

第3种就是es6之后出的set了set本身的设定就是非重复的类数组所以才有了数组与set互相转换的知识点而set转为数组可以是 [...set]这种解构形式也可以是Array.from(set)的方法代码如下

var mySet = new Set(arr); // 非重复的类数组
			
// var newArr = Array.from(mySet); // set转数组
var newArr = [...mySet]; // 或者是这种解构方法

4、第4种

利用filter的内置方法filter接收一个内置函数而函数自身又接收3个参数item相当于arr[i]index相当于i索引arr就是数组本身某些情况需要传入arr但本案例因为比较简单就不传入了。利用indexOf首次查找索引的方式返回原数组中元素首次出现的所有元素达到去重效果代码如下

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

5、第5种

第5种是利用数组内置的includes方法监测数组中是否包含某个元素如果你在面试中说出这一条证明你至少对数组的新属性或者是一些内置方法做过整理是个不错的回答代码如下

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

6、第6种

第6种就是创建一个新的map（或者说是object对象利用其key值唯一的特性不断的往map内创建属性一旦某属性被创建过那么就说明了可以对这个属性值做一些操作而属性就已经是哪个去重的唯一元素了代码如下

var obj = {}; // 对象的key值是唯一的
var newArr = [];
for (var i=0;i<arr.length;i++) {
	if (!obj[arr[i]]) {
		obj[arr[i]] = arr[i];
	}
}

三、你最喜欢用哪一种？

数组去重不止这几种实现方法对吧那么你说出了那么多种其实每次做项目的时候某种场景下也就是用1种不可能这个需求我把每个都用了吧那么你最喜欢用哪一种呢？

我最早喜欢这个简单的

其实最早的时候我喜欢第1种因为那个时候技术实在是太辣鸡不过想想现在也很辣鸡所以很多时候我不敢输出干货自己干货也不多二来输出来了跟大家重复也挺高那么多写知识点的人家为啥就喜欢看我的呢。而且当时我还把第一种实现方法当做是瑰宝四处跟人家显摆屡试不爽哈哈不过后来我又看是用第二种了。

现在喜欢这个object形式的

现在呢我比较喜欢第6种因为结合很多项目场景其实开发过程中很少有拿过来一个纯数组让去重的大部分时候就像上面说到的案例去重是为了解耦将去重出来的部分做为一个大的key值而value部分呢有时候是一些子数组有时候是更多的数组所以我比较喜欢第6种直接将原聚合数组解开然后处理成map对象形式再在页面进行一些渲染。