还在担心面试不通过吗？给大家推荐一个超级好用的刷面试题神器：牛客网，里面涵盖了各个领域的面试题库，还有大厂真题哦！
赶快悄悄的努力起来吧，不苒在这里衷心祝愿各位大佬都能顺利通过面试。
面试专栏分享，感觉有用的小伙伴可以点个订阅，不定时更新相关面试题：面试专栏 。
文章目录
🍉正文
1.数组去重
题目：请补全JavaScript代码，要求去除数组参数中的重复数字项并返回该数组。
注意：数组元素仅包含数字
const deleteRepeat = function (array) {
// 使用ES6新增语法
return Array.from(new Set(array))
}
console.log(deleteRepeat([-1,1,2,2])) // [-1,1,2]
知识点补充：
Array.from将某个类似数组或可迭代对象转为数组Set对象是值的集合，Set中的元素只会出现一次，即Set中的元素是唯一的
2.快速排序
题目：请补全JavaScript代码，要求将数组参数中的数字从小到大进行排序并返回该数组。
注意：
- 数组元素仅包含数字
- 请优先使用快速排序方法
示例代码如下：
const _quickSort = array => {
if (array.length <= 1) return array;
const left = [];
const right = [];
// pivot=> 每次比较使用的中间值默认为当前数组的第一项，大于该值的放入右边right数组，小于该值的放入left数组，递归调用_quickSort方法
let pivot = array[0];
for (let i = 1; i < array.length; i++) {
if (pivot < array[i]) {
left.push(array[i])
} else {
right.push(array[i])
}
}
return [..._quickSort(left), pivot, ..._quickSort(right)]
}
let res = _quickSort([4, 32, 43, 54, 1, 2, 5])
console.log(res)//[54,43,32,5,4,2,1]
3. instanceof
题目：要求以Boolean的形式返回第一个实例参数是否在第二个函数参数的原型链上。
示例代码如下：
const _instanceof = (target, Fn) => {
return Fn.prototype.isPrototypeOf(target);
}
扩展：
isPrototypeOf()
isPrototypeOf()方法用于测试一个对象是否存在于另一个对象的原型链上。语法：
prototypeObj.isPrototypeOf(object)参数：
object：在该对象的原型链上搜寻。返回值：
Boolean，表示调用对象是否在另一个对象的原型链上。
写了上面三个感觉没有面试问到的一些还是问到的多，所以就给大家推荐一下以下几道常见的问答题（注：本人亲测面试有被问到‘🙇🏻?♂?🙇🏿?♂?）
4. 说一说 Vue 中 $nextTick 作用与原理？
Vue 在更新 DOM 时是异步执行的，在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。所以修改完数据，立即在方法中获取DOM，获取的仍然是未修改的DOM。
$nextTick的作用是：该方法中的代码会在当前渲染完成后执行，就解决了异步渲染获取不到更新后DOM的问题了。$nextTick的原理：$nextTick本质是返回一个Promise。加分回答 ：应用场景：在钩子函数created()里面想要获取操作Dom，把操作DOM的方法放在
$nextTick中
5.说一说盒模型？
CSS盒模型定义了盒的每个部分包含 margin, border, padding, content 。
根据盒子大小的计算方式不同盒模型分成了两种，标准盒模型和怪异盒模型。
**标准盒子模型：**给盒设置
width和height，实际设置的是 content box。padding和border再加上设置的宽高一起决定整个盒子的大小。
**怪异盒模型：**给盒设置width和height，包含了padding和border，设置的width和height就是盒子实际的大小
6.说一说cookie sessionStorage localStorage 区别
Cookie、SessionStorage、 LocalStorage都是浏览器的本地存储。
**共同点：**都是存储在浏览器本地的 。
区别：
cookie是由服务器端写入的，而SessionStorage、 LocalStorage都是由前端写入的
cookie的生命周期是由服务器端在写入的时候就设置好的，LocalStorage是写入就一直存在，除非手动清除，SessionStorage是页面关闭的时候就会自动清除。
cookie的存储空间比较小大概4KB，SessionStorage、 LocalStorage存储空间比较大，大概5M。
Cookie、SessionStorage、 LocalStorage数据共享都遵循同源原则，SessionStorage还限制必须是同一个页面。
在前端给后端发送请求的时候会自动携带Cookie中的数据，但是SessionStorage、 LocalStorage不会 。
7.说一说computed和watch的区别？
- computed： 是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值；
- watch：更多的是观察的作用，支持异步，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作；
- computed应用场景：需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；
- **watch应用场景：**需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。
8. Vue列表为什么加Key？
为了性能优化 因为vue是虚拟DOM，更新DOM时用diff算法对节点进行一一比对，比如有很多li元素，要在某个位置插入一个
li元素，但没有给li上加key，那么在进行运算的时候，就会将所有li元素重新渲染一遍，但是如果有key，那么它就会按照key一一比对li元素，只需要创建新的li元素，插入即可，不需要对其他元素进行修改和重新渲染。
9.说一说 v-if 和 v-show区别？
作用: 都是控制元素隐藏和显示的指令
区别：
v-show: 控制的元素无论是true还是false，都被渲染出来了，通过
display：none控制元素隐藏v-if: 控制的元素是true，进行渲染，如果是false不渲染，根本在dom树结构中不显示
应用：
v-show: 适合使用在切换频繁显示/隐藏的元素上
v-if: 适合使用在切换不频繁，且元素内容很多，渲染一次性能消耗很大的元素上
10.说一说事件循环Event loop，宏任务与微任务？
浏览器的事件循环：执行js代码的时候，遇见同步任务，直接推入调用栈中执行，遇到异步任务，将该任务挂起，等到异步任务有返回之后推入到任务队列中，当调用栈中的所有同步任务全部执行完成，将任务队列中的任务按顺序一个一个的推入并执行，重复执行这一系列的行为。
异步任务又分为宏任务和微任务。
宏任务：任务队列中的任务称为宏任务，每个宏任务中都包含了一个微任务队列。
微任务：等宏任务中的主要功能都完成后，渲染引擎不急着去执行下一个宏任务，而是执行当前宏任务中的微任务
宏任务包含：执行script标签内部代码、setTimeout/setInterval、ajax请、postMessageMessageChannel、setImmediate，I/O（Node.js）
微任务包含：Promise、MutonObserver、Object.observe、process.nextTick（Node.js）
🎃专栏分享：
JavaScript相关面试题就更新到这里啦，相关 Web前端面试题 可以订阅专栏哦🥰
专栏地址：《面试必看》
? 名言警句：说能做的做说过的 \textcolor{red} {名言警句：说能做的做说过的} 名言警句：说能做的做说过的
? 原创不易，还希望各位大佬支持一下 \textcolor{blue}{原创不易，还希望各位大佬支持一下} 原创不易，还希望各位大佬支持一下
👍 点赞，你的认可是我创作的动力！ \textcolor{green}{点赞，你的认可是我创作的动力！} 点赞，你的认可是我创作的动力！
?? 收藏，你的青睐是我努力的方向！ \textcolor{green}{收藏，你的青睐是我努力的方向！} 收藏，你的青睐是我努力的方向！
?? 评论，你的意见是我进步的财富！ \textcolor{green}{评论，你的意见是我进步的财富！} 评论，你的意见是我进步的财富！