抓取牛客最新前端面试五百题 可视化分析前端面试热点

前言

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

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

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

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

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

考点划分

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

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

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

笔试题

题型分析

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

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

题型	单选题	多选题	填空题	程序题	简答题
数量	63	14	34	85	4

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

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

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

程序题分析

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

类别	JS基础	JS深入	ES6题	其他题
数量	40	31	10	4

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

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

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

考点分析

将笔试题按考点划分成：JS 基础、JS 深入、ES6、BOM、DOM，具体数量见下表

考点	JS基础	JS深入	ES6题	BOM	DOM
数量	105	43	25	7	20

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

• 笔试超级超级重视基础
• JS 深入题大多出现在程序题中
• DOM 事件部分

笔试热门考点

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

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

笔试题总结

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

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

面试题

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

考点分析

依旧将考点划分为五类：JS 基础、JS 深入、BOM、DOM、ES6，我们来一起看一下面试题各类考点的数量：

考点	JS基础	JS深入	BOM	DOM	ES6
数量	37	200	9	12	87

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

JS深入部分分析

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

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

ES6部分分析

将 ES6 部分的考点进一步划分：遍历方法、箭头函数、let/const、set/map、promise、proxy、async/await、其他

ES6 考察就是多点开花，日常开发中就要多用 ES6 语法。但记住一句话，promise 是 ES6 的真神。

手撕代码题

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

• 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 深入部分一定要吃透，完全的吃透。

• this 指向: 四种绑定(默认绑定、隐式绑定、显式绑定、new 绑定)——《2w字大章 38道面试题》彻底理清JS中this指向问题
• 作用域: 预编译(函数四部曲、全局三部曲)——JavaScript之预编译学习
• 原型与原型链: 原型图一定要熟悉——JavaScript之彻底理解原型与原型链
• 事件循环: 宏任务与微任务(promise)——JavaScript之彻底理解EventLoop

重视ES6 部分

很多方法的原理都要掌握: async 原理，set 去重原理等。

后语

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

如果本文能有幸帮到一些大佬，那阿包的付出就太值得了。

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