抓取牛客最新前端面试题五百道 数据分析JS面试热点

13,589 阅读8分钟

小知识,大挑战!本文正在参与「程序员必备小知识」创作活动

本文已参与「掘力星计划」,赢取创作大礼包,挑战创作激励金。

前言

秋招感觉即将接近尾声了,今年的秋招可谓是风起云涌、锣鼓喧天、异彩纷呈(听说腾讯总包都40w+,流下羡慕的眼泪)。

秋招期间,我特别喜欢在牛客上看各位大佬的面经、offer等,看的不亦乐乎,每天增加一个小幻想。

前几天在看面经时,突然想到,有的题我见过很多次,有的题第一次见,现在虽说有八股文,但每年的面试行情应该都会有小的变化,要不来做个统计,粗略的估计一下今年面试市场的态势,也为自己后续的学习指一下路。

说做就做,耗费了我好几个快乐游戏的夜晚,挨着面试题,面经的复制、去重,最后精挑细选出 547 道题目,其中笔试题 200 道,面试题 357 道。

本文涉及的题目全是JavaScript方向。前端框架、计算机基础知识方向还在统计中。

笔试题部分已整理完毕,传送门: 牛客最新前端JS笔试百题

面试部分题目整理完毕,传送门: 牛客最新前端面经面试题汇总(含解析)

考点划分

本文章将 JavaScript 分为几大考点:

  • ECMAScript 基础(简称 JS 基础):包括类型、运算符、字符串、数组、对象、函数等基础知识
  • ECMAScript 深入(简称 JS 深入):包括 this 指向、原型与原型链、作用域与作用域链、垃圾回收、同步异步、事件循环等
  • ES6
  • BOM
  • DOM

接下来我们来一起分析一下(作者是个机械狗,有可能分析的会有点生硬,希望大佬们见谅):

笔试题

题型分析

在线笔试题中程序题大多也是有选项的,但是我感觉程序题的难度是超出选择题,因此我把它单独列为一项。

笔试题有五类:单选题、多选题、填空题、程序题,简答题,下面是各类题目出现的数量:

题型单选题多选题填空题程序题简答题
数量631434854

更直观的表现看下面饼图:

在这里插入图片描述

可以从上面的表格和饼图中看出:

  • 重视基础:选择题、填空题比重较大,简答题的比重较小
  • 重视代码能力:程序题的比重最大

程序题分析

将程序题考点笼统的分为四类:JS 基础、JS 深入、ES6 题、其他题,各类题目的数量如下:

类别JS基础JS深入ES6题其他题
数量4031104

更直观的表现看下面饼图:

在这里插入图片描述

可以从上面的表格和饼图中看出:

  • 程序题难度适中:基础题和深入题所占比重类似,笔试题同样注重 JS 深入部分的考察。
  • ES6 占比较少: 在笔试题中,ES6 考察的部分大多数与 JavaScript 深入结合,例如:promise 与事件循环结合;箭头函数与 this 指向结合,let/const 与作用域结合等。

考点分析

将笔试题按考点划分成:JS 基础、JS 深入、ES6BOMDOM,具体数量见下表

考点JS基础JS深入ES6题BOMDOM
数量1054325720

在这里插入图片描述

通过对考点的分析,我们可以得出:

  • 笔试超级超级重视基础
  • JS 深入题大多出现在程序题中
  • DOM 事件流需要重点掌握

笔试热门考点

笔试题的十大热门考点见下表:

考点数量
类型检测22
类型转换20
promise20
数组18
字符串12
运算符11
作用域11
this10
原型10
let/const7

在这里插入图片描述

笔试题总结

通过对 200 道题多维度的分析,我们可以得出笔试部分的复习重点:

  • 基础为神,尤其几个方面,一定要熟练掌握——原生JavaScript灵魂拷问,你能答上多少(一)
    • 类型检测: typeof/instanceof
    • 类型转换: "+", "==" 隐式转换
    • DOM: 事件流
    • 数组: 数组方法(那些数组方法会修改原数组,那些不会)
    • 字符串: 字符串方法,配合正则使用
  • JavaScript 深入部分的各类难点要熟知,并且能说出其大致流程,看到程序题要知道从何入手。
  • ES6部分以基础居多,promise 要重点掌握

面试题

面经部分共 357 道题,题目来自阿里、腾讯、百度、字节、滴滴、拼多多、京东、B站、富途、美团、网易、小红书、有赞、快手、其他。

在这里插入图片描述

考点分析

依旧将考点划分为五类:JS 基础、JS 深入、BOMDOMES6,我们来一起看一下面试题各类考点的数量:

考点JS基础JS深入BOMDOMES6
数量3721291287

在这里插入图片描述

可见面试题部分的难度明显加大了很多,JavaScript 深入占据了总题目的一半以上,ES6 比重也增大很多,所以我们在准备面试部分时,JavaScript 深入部分的学习要重视、重视、再重视。

JS深入部分分析

JS 深入部分的考点进一步划分:作用域、this、原型、垃圾回收、浏览器存储、事件循环、异步、手撕代码。

在这里插入图片描述

注意:手撕代码可太太重要了,当下的面试中,代码编写能力占据的比重越来越大,很多公司还会有算法题考察。

ES6部分分析

ES6 部分的考点进一步划分:遍历方法、箭头函数、let/constset/mappromiseproxyasync/await、其他

在这里插入图片描述

ES6 考察比较均匀,多点开花,因此 ES6 准备要全面,并且准备的深度要深,特别是一些实现原理,要做到心中有数。但记住一句话,promiseES6 的真神

手撕代码题

接下来我会罗列所有出现的手撕代码题,并指明其出现频率(从高到低)。

  • promise(21, 所有的公司): 实现一个简单的 promise、实现 promise.all
  • 数组去重(13, 仅小红书、快手未找到): 你能用多少种方法实现数组去重、数组去重优化等
  • 防抖(10): 防抖的作用,什么场景下使用防抖,手撕防抖等
  • 节流(10): 节流的作用,什么场景下使用节流,手撕节流等
  • 深拷贝(9): 深拷贝实现(考虑到函数情况、对象、数组、正则、Date)
  • jsonp/ajax(7): 手撕 ajax、jsonp、jsonp/ajax 区别
  • new(6)
  • 继承(5)
  • 数组扁平化(4)
  • 数组函数模拟(4): forEach、map、reduce、filter、find、indexOf
  • call/apply/bind(3)
  • 柯里化(3)
  • 数组乱序(2)
  • 千分符(2)
  • "get-element-by-id" 变为小驼峰模式(2)
  • instanceof(1)
  • 封装 cookie 方法(1)
  • Object.create(1)
  • 求嵌套数组深度(1)
  • 原生模拟 class(1)

面试题总结

代码为神

面试部分可谓是得代码者得天下,常见的手撕代码一定要熟练、再熟练,不止要会写,同时也要能说明白为什么。这将是特别大的加分项。

  • promise: 重中之重
  • 数组去重: 多种实现方法,如果涉及到对象该怎么办?
  • 防抖节流: 一定要区分开,而且要能举出例子来,不要硬背代码
  • 深拷贝: 要学会实现全面的深拷贝。面试的要求和难度越来越大,因此日常复习准备时,一定要考虑所有的情况。
  • ...

考察深度深,广度广

对于 JavaScript 深入部分一定要吃透,完全的吃透,特别是如下四项:

重视 ES6 部分

ES6 部分知识掌握一定要全面,不要因为很多东西太难,或者日常用的不多就舍弃它,而且一定要"打破砂锅问到底",大公司不止对 ES6 感兴趣,而且对 ES6 很多部分的实现原理感兴趣,例如: async 原理,set 去重原理等。

总结

通过上面一通迷迷糊糊的分析后,如果想进入自己心仪的大公司,在 JavaScript 这里最起码要具备三点:

  1. 手撕代码炉火纯青
  2. 原生 JS 登峰造极
  3. ES6 语法胸有成竹

后语

  1. 本文涉及的这 547 道题,后面我整理一下,会全部发出来,并且会挑其中我认为特别好的题目做一下分析讲解,有兴趣大佬可以关注一下
  2. 手撕代码部分,我会陆续都认真、完善的实现一遍。
  3. 目前我正在编写 JavaScript深入系列和 JavaScript基础系列(灵魂拷问),如果大家需要可以关注我的博客。
  4. 本文仅涉及 547 道题,分析的结果有可能存在不准确性,仅供参考。

如果本文能有幸帮到大家,阿包甚感荣幸。

最后,预祝大家都多拿 offer,找到心仪的工作,一起 fighting