牛客网前端刷题

Posted 不苒

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了牛客网前端刷题相关的知识,希望对你有一定的参考价值。

还在担心面试不通过吗?给大家推荐一个超级好用的刷面试题神器:牛客网,里面涵盖了各个领域的面试题库,还有大厂真题哦!

赶快悄悄的努力起来吧,不苒在这里衷心祝愿各位大佬都能顺利通过面试。
面试专栏分享,感觉有用的小伙伴可以点个订阅,不定时更新相关面试题:面试专栏

文章目录

🍉正文

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代码,要求将数组参数中的数字从小到大进行排序并返回该数组。

注意:

  1. 数组元素仅包含数字
  2. 请优先使用快速排序方法

示例代码如下:

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 。

根据盒子大小的计算方式不同盒模型分成了两种,标准盒模型和怪异盒模型。

**标准盒子模型:**给盒设置 widthheight,实际设置的是 content box。paddingborder 再加上设置的宽高一起决定整个盒子的大小。
**怪异盒模型:**给盒设置 widthheight,包含了paddingborder ,设置的 widthheight就是盒子实际的大小

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前端面试题 可以订阅专栏哦🥰
专栏地址:《面试必看》


名言警句:说能做的做说过的 \\textcolorred 名言警句:说能做的做说过的 名言警句:说能做的做说过的

原创不易,还希望各位大佬支持一下 \\textcolorblue原创不易,还希望各位大佬支持一下 原创不易,还希望各位大佬支持一下

👍 点赞,你的认可是我创作的动力! \\textcolorgreen点赞,你的认可是我创作的动力! 点赞,你的认可是我创作的动力!

⭐️ 收藏,你的青睐是我努力的方向! \\textcolorgreen收藏,你的青睐是我努力的方向! 收藏,你的青睐是我努力的方向!

✏️ 评论,你的意见是我进步的财富! \\textcolorgreen评论,你的意见是我进步的财富! 评论,你的意见是我进步的财富!

以上是关于牛客网前端刷题的主要内容,如果未能解决你的问题,请参考以下文章

牛客网前端刷题

Python牛客网刷题-Day1

牛客前端刷题——微信小程序篇

牛客网刷题记录 || 第一番

牛客前端刷题—— 打包篇

牛客网mysql刷题记录