面试题|牛客网前端刷题（一）面试|面试题|javascript|前端

文章图片

还在担心面试不通过吗？给大家推荐一个超级好用的刷面试题神器：牛客网，里面涵盖了各个领域的面试题库，还有大厂真题哦！
赶快悄悄的努力起来吧，不苒在这里衷心祝愿各位大佬都能顺利通过面试。
面试专栏分享，感觉有用的小伙伴可以点个订阅，不定时更新相关面试题：面试专栏。

文章图片

文章目录

正文
- 1.数组去重
- 2.快速排序
- 3. instanceof
- - 扩展：`isPrototypeOf()`
- 4. 说一说 Vue 中 $nextTick 作用与原理？
- 5.说一说盒模型？
- 6.说一说cookie sessionStorage localStorage 区别
- 7.说一说computed和watch的区别？
- 8. Vue列表为什么加Key？
- 9.说一说 v-if 和 v-show区别？
- 10.说一说事件循环Event loop，宏任务与微任务？
专栏分享：

正文 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}{评论，你的意见是我进步的财富！} 评论，你的意见是我进步的财富！