网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
一、请说一下数组去重的项目使用场景
在问题数组去重之前，我会礼貌的问一下，数组去重你常用吗？一般得到的回答也是当然常用啊，（可能他还想说，我必须常用啊，我天天用，一直用，就在刚才我准备面试的时候，还看了看数组去重的几种实现方法呢）。然后我就问了一下：请你说一下数组去重的项目场景。
他略微沉思了一下，没有说话，然后不太好意思的说：有一次服务端返回的一个数组，里面多条含有重复数据，我就用到了数组去重。我问：可以说一下大概的场景吗，不用说的太细。后来他没有理我。
我这里说两个会用到数组去重的场景吧。
1、时间轴
这里随便举个例子啊，其实做成真实网站找到真实的例子，肯定要做样式美化的。这个时间轴例子呢，以年月日做为时间轴的汇总点，而汇总点的子项就是这个时间下所要记录的列表内容。这种情况下，服务端返回的必定是数组形式，数据格式大概像是这样：
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种
网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**
一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
扫一扫
1366
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
