2024年最新【面试题】数组去重的五种方法_数组去重算法最优算法面试(1)，轻松入门flutter

Vue

• 什么是MVVM？

• mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？

• 组件之间的传值？

• Vue 双向绑定原理

• 描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？

• 虚拟 DOM 实现原理

• Vue 中 key 值的作用？

• Vue 的生命周期

• Vue 组件间通信有哪些方式?

• vue 中怎么重置 data?

• 组件中写 name 选项有什么作用？

• Vue 的 nextTick 的原理是什么？

• Vuex 有哪几种属性?

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  

  

这里有一个有意思的地方，或许您不太明白，为什么我的for循环的初始表达式中声明了两个东西:let i = 0;len = arr.length;

我来给您解答:

被圈起来的三个表示的是for循环的三个表达式,依次分别是:初始表达式，判断表达式，自增表达式。其中，初始表达式在for循环开始的时候会执行一次，以后就不会再执行了，但是判断表达式和自增表达式会在每一次循环的时候都去执行。

如果您不太理解文字表达，没关系，我画了张图。

您或许已经发现，后一个圈中的内容会陷入一个循环。

但这和我们一开始len = arr.length有什么关系呢？

值得注意的是,如果一开始定义，那么每一次循环，都需要走 arr.length,length可是个方法，虽然他的消耗并不大，但在for循环中这个消耗会被方法，假设这个循环需要循环10000次呢，length就会被执行10000次。

最鸡肋的去重方式，indexOf去重

indexOf还是相对简单又鸡肋。为什么说他鸡肋呢?说难吧，indexOf方法确实比上文的双重for循环简单。说简单吧，嘿，他没Set方法去重来的更简单。所以鸡肋。

//去重consthandleRemoveRepeat = (arr) => {
    let repeatArr = [];
    for (let i = 0,len = arr.length ; i < len; i++) 
     if (repeatArr.indexOf(arr[i]) === -1)  repeatArr.push(arr[i])
    return repeatArr;
}
复制代码

图例：

同样的，这个方法也有一个细节点，您或许已经发现了，上文的if和for没有花括号；是的；for和if都默认对下面一条语句负责。在没有必要的情况下，不用多加一个{}。

或许您会觉得这不可读，这就是有意思的地方了，这是一个工具类方法，注定被藏在utils中的一个方法，他无关业务逻辑，并不需要有太大可读性。

而且，这么写还有一个很原因:给人的视觉冲击会比较大。说点人话就是 -----很装逼;

一种类似于indexOf的去重方法，includes去重

使用includes的去重方法和indexOf不能说很像，基本上一模一样。变换的仅仅只是判断方法。

includes的判断方法更简单了。循环数组的每一样，用新数组检测当前数组中是否包含数组项，如果不包含，则追加该元素

consthandleRemoveRepeat = (arr) => {
    let repeatArr = [];
    for (let i = 0,len = arr.length ; i < len; i++)
        if (!repeatArr.includes(arr[i])) repeatArr.push(arr[i])
    return repeatArr;
}
复制代码

图例

includes方法在除了去重以外的场景，还是很好用的。

最有趣的去重方法，使用filter去重。

使用filter配合indexOf进行的去重过程，真的可以非常的简单且富含趣味性。

//去重consthandleRemoveRepeat = (arr) => arr.filter((item,index) => arr.indexOf(item,0) === index);
复制代码

是的，没了，就一行。

图例

您是否没有反应过来？乍一看，不知道他是怎么完成去重的。

小问题，我为您解答疑惑。

indexOf的特性是返回被查找的目标中包含的第一个位置的索引

如图，下标为0和下标为4的位置存储的都是“1”。但是indexOf()只返回了0。因为indexOf的特性是返回被查找的目标中包含的第一个位置的索引。

同样的，我们可以利用这个特性。来完成去重，文字描述恐怕很难表达准确，您可以看看下面的这张图。

您或许会问:如果要去重对象数组怎么办？

去除对象数组的方式他并不是很稳定，这不像我们去重值类型数据的数组，上面的五种方法随便复制一种，往里面一调用就好了。绝对不会出问题。

但是对象数组去重，需要有一个去重条件，也就是根据哪个字段进行去重。

用双重循环去重举个例子：

图例

如上图，我们就是拿数据的id作为去重条件的。

总结

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

前端面试题汇总

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

JavaScript

性能

linux