前言

本次面试面试了很多家公司，包含 360，美团，猿辅导，小米，腾讯地图，头条，新东方，快手，知乎等几家公司，刚开始去面试的时候那段时间状态不是很好（根本每天都加班到很晚，周六日也没有劳动的那种，而且过后心态真的是差到爆，很多平时本人很会的货色，被问到竟然答不上来），根本一面就挂的那种（360，美团，猿辅导），越面越悲观，起初就间接不面试了，调整本人的状态，销假劳动，好好睡了两天两夜之后，调整本人的心态，开始筹备面试，接下来的面试就顺利的很多。

本篇面试题总结并没有依照公司那样分类而是依照知识点进行简略分类，很多面试题问的频率十分高，所以面试的时候如果第一次问完，没答复上来或者答复的不太好，肯定要在面完的第一工夫记录下来并且查找材料，否则就遗记了，或者之后再看就没有了过后迫切想晓得具体答案的那种情绪了（有迫切的想晓得某些常识的情绪的时候指标很明确，学货色也会印象粗浅记得牢）。

本文链接地址较多，倡议查看原文，浏览体验会好一些。上面给出的答案有的是本人总结的，有的是从网上找到写的很不错的相干文章，然而这些都仅供参考，不肯定是最佳的答案，如果有很好的答案，欢送留言一起探讨互相学习，有的还没有放上适合的链接，之后会不算补充进去，毕竟每道题波及到的内容真的挺多的。

上面题目中标记有 【高频】 的至多被问过两次，标记有 【超高频】 的根本面试的每家公司都问到了。

口试题

  1. 【超高频】 写一个深拷贝，思考 正则，Date这种类型的数据
  2. 【高频】 Vue自定义指令懒加载
  • https://mp.weixin.qq.com/s/36oBZMd-m-2k5EKPghfG3A
  1. 判断DOM标签的合法性，标签的闭合，span外面不能有div，写一个匹配DOM标签的正则
  • https://mp.weixin.qq.com/s/MtHUsWtGQ8k8mxl9oR8_xA
  1. 替换日期格局，xxxx-yy-zz 替换成 xxx-zz-yy

能够应用 正则的捕捉组来实现

var reg = /(\d{2})\.(\d{2})\/(\d{4})/var data = '10.24/2017'data = data.replace(reg, '$3-$1-$2')console.log(data)//2017-10-24
  1. 【高频】 实现Promise.all, Promise.allSettled
  2. 获取一段DOM节点中标签个数最多的标签
  • https://mp.weixin.qq.com/s/MtHUsWtGQ8k8mxl9oR8_xA
  1. 写一个简略的diff
  • https://mp.weixin.qq.com/s/w2b9Wn7QWXhy2qf2JX3Kbw
  1. 【高频】 手写节流
  • https://mp.weixin.qq.com/s/fNrn94emmLMfuKN_Ukpi6A
  1. 手写ES6的继承
  2. 实现一个自定义hook - usePrevious
import { useRef } from 'react';export type compareFunction<T> = (prev: T | undefined, next: T) => boolean;export default <T>(state: T, compare?: compareFunction<T>): T | undefined => {  const prevRef = useRef<T>();  const curRef = useRef<T>();  const needUpdate = typeof compare === 'function' ? compare(curRef.current, state) : true;  if (needUpdate) {    prevRef.current = curRef.current;    curRef.current = state;  }  return prevRef.current;};
更多自定义hook的写法能够参考 hooks
  1. 【高频】 实现一个vue的双向绑定
其余题目的答案之前做了整顿，能够在 前端学习总结-手写代码系列中看到

口试题中的算法题

  1. 二叉树的最大深度
  • 原题地址
  1. 另一个树的子树
  • 原题地址
  1. 雷同的树
  • 原题地址
  1. 翻转二叉树
  • 原题地址
  1. 【高频】 斐波那契数列
  • 原题地址
  • 相干题解
  1. 【高频】 合并两个有序数组
  • 原题地址
  1. 【高频】 打乱数组
  • 原题地址
  • 相干题解
  1. 数组区间

webpack 和babel相干的问题

  1. babel的缓存是怎么实现的

  2. webapck的HMR，怎么配置：

    • 浏览器是如何更新的
    • 如何做到页面不刷新也就就自动更新的
    • webpack-dev-server webapck-dev-middleware
相干文章：Webpack Hot Module Replacement 的原理解析
  1. 本人有没有写过ast, webpack通过什么把公共的局部抽出来的，属性配置是什么
  2. webpack怎么配置mock转发代理，mock的服务，怎么拦挡转换的
  3. webapck的plugin和loader的编写， webapck plugin和loader的程序
  4. webpack的打包构建优化，体积和速度
  5. DLLPlugin原理，为什么不间接应用压缩版本的js

HTTP

  1. 【超高频】 缓存（强缓存），如何设置缓存
  • 图解 HTTP 缓存
  • 深入浅出浏览器缓存机制
  1. 【高频】 HTTP2， HTTP2的性能优化方面，真的优化很如许?
  2. 【高频】 简略申请和简单申请
  • 阮一峰-跨域资源共享 CORS 详解
  • CORS原理及@koa/cors源码解析
  1. 【高频】 HTTPS的整个具体过程
  • HTTPS是如何保障平安的
  • 深刻了解HTTPS工作原理
  1. 301和302的区别
  • https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status
  1. 怎么用get实现post，就是应用get办法然而参数放到request body中
  2. TCP和UDP的区别
  • TCP和UDP比拟
  • TCP和UDP的区别
更多能够查看 【面试题】HTTP知识点整顿(附答案)

CSS

  1. 【超高频】 flex相干的问题

    • 说一下flex
    • flex: 1具体代表什么, 有什么利用场景
    • flex-basic 是什么含意

相干文章：Flex 布局教程：语法篇

  1. css var 自定义变量的兼容性
  2. 行内元素和块级元素的区别
  3. position有哪些值，别离是什么含意
  4. 盒模型

  5. CSS的实现

    • 淘宝购物车增加商品到购物车的动画（这回试试应用CSS实现抛物线静止成果）
    • toolTip的实现 (https://www.jianshu.com/p/fdf...
  6. 【高频】 实现固定宽高比(width: height = 4: 3)的div，怎么设置
  7. 【高频】 伪类和伪元素
更多能够查看【面试题】CSS知识点整顿(附答案)

JavaScript

  1. 单例的利用
  2. 【超高频】 什么是闭包，闭包的利用场景
  • 深刻了解JavaScript闭包之什么是闭包
  • 深刻了解JavaScript闭包之闭包的应用场景
  1. 如何判断 以后浏览器是否反对webp
  2. proxy除了拦挡它的getter和setter外，还能做什么
  3. 同步阻塞，异步非阻塞
  4. 弱援用，WeakMap和Map的区别
  5. 【高频】 平安相干 XSS的反射型是什么，怎么防止
  • web平安之XSS实例解析
  • Web平安之CSRF实例解析
  1. 【超高频】 事件循环
  • JavaScript中的Event Loop（事件循环）机制
  1. 【超高频】 promise相干的问题， 说一下你对Promise的理解
  • ECMAScript 6 入门之Promise对象
  • 手写一个Promose
  1. 【超高频】 浏览器渲染（从输出url到页面渲染的实现过程）
  2. 【超高频】 首屏加载优化， 通过哪些指标去掂量性能优化的
  3. canvas和svg别离是干什么的
  • SVG 与 HTML5 的 canvas 各有什么长处，哪个更有前途？
  1. 牛客网如何监听你调到了其余页面

document.hidden，监听 docuemnt.vibibleChange事件

document.addEventListener("visibilitychange", function() {  console.log( document.hidden );});
  1. JS原生3种绑定事件
// 1. 在标签中间接绑定<button onclick="handleClick()" >自定义函数</button>// 2. 在js事件中获取dom事件绑定<button id="btn" onclick="handleClick()" >dom事件绑定</button>document.getElementById('btn').onclick=handleClick();// 3. 事件监听addEventListenerelementDOM.addEventListener(eventName,handle,useCapture);
  1. 简略说一下你对 websocket 理解多少？
  • WebSocket 是什么原理？为什么能够实现长久连贯？
  1. 实现简单数据(去重元素是对象，数组)的数组去重 (* 3)
  2. 根本数据类型有哪些， 为什么symbol是一个函数， BigInt为什么能够用来存储大整数
  3. 什么是依赖注入

  4. JS类型转换

    • String([]) 为 ’‘， String({})后果是什么什么? 答案是：'[object object]'
    • 其余一些很经典的类型转换考查，过后没记那么分明，大家能够去网上看一下
  5. 富文本编辑器相干的js常识
  • 富文本原理理解一下？
  • 富文本编辑器初探
  • 编辑器初体验
  1. cli工具的一些实现逻辑

Vue

  1. 【高频】 vue3.0的新个性，理解compose api和react hooks的区别
  2. new Vue做了什么
  3. 双向绑定原理
  4. vue组件通信办法

React

  1. 【高频】 React hooks 相干的问题
  • 为什么引入，什么原理
  • hooks如何监听响应的，外部是如何做到只有数据批改的时候才执行函数
  • 依赖的值发生变化，须要不停地监听和绑定事件
  • render props 和HOC相比的优缺点
  • 和mixin，hoc区别在哪儿
  1. 创立ref的几种办法
  2. context怎么应用，外部原理怎么做到的
  3. 【超高频】 React新的生命周期，为什么 getDrivedStatefromProps是动态的
  4. react中TS的申明
  5. redux相干的问题
  • redux应用办法，为什么action要返回一个函数，返回一个对象能够么
  • state为什么要设计成不可变的
相干文章 为什么redux要返回一个新的state引发的血案，阮一峰-Redux 入门教程（一）：根本用法
  1. 【高频】 diff算法
  2. 【高频】 key的作用
  3. immer和imutable的区别
  4. 【高频】 react性能优化, fiber架构
更多能够查看 【面试题】React知识点整顿(附答案)

面试后果

大略说一下自己的大略状况，本科三年左右工作教训，非计算机专业，大三下学习决定转行学习前端，过程反正挺艰苦的，始终到当初还在恶补计算机的一些常识。毕业半年左右，一个偶尔的机会，进入阿里娱乐（哈哈，过后面试的时候也写过面经，感兴趣的能够看一下 过后写的面经 2017面末面试总结），当初因为集体起因，决定思考新的机会。

面试差不多最开始是中3月中旬开始筹备的，两头停了差不多小一个月又开始从新面试的，到最初拿到offer差不多5月底左右，历时近3个月吧，最近抽时间把这些题目总结了一下，算是给本人一个交代吧，下面很多题目本人答复的其实很多都不是很全面，标有 【高频】 及 【超高频】 刚开始答复的不好，起初认真学习总结了一下，之后再被问到，根本都答复得差不多

个别提到面试，必定都会想问一下面试后果，我就大略的说一下面试后果，哈哈，其实不太想说，因为挺惨的，并没有像很多大佬一样“已拿字节阿里腾讯各大厂offer”，然而毕竟是本人的经验，无论后果如何都要坦然承受，之前没好好学习，那之后多学习就是。360，美团，猿辅导最开始的一面挂，小米二面的时候面试官告知说要求招5年以上工作教训的，所以就间接告知不合乎（哈哈，可能就是跟小米没有缘分吧，刚毕业的时候面试，终面被拒说要3年以上工作教训的，当初够3年工作教训了，却又要求5年工作年限），腾讯地图和头条都是hr间接找过去的，本人并没有投递，就顺便面了一下，二面面完之后，认为挂了，起初过了一周多（可能是作为备胎把），又打电话过去约面试，其实之前面试大略理解了一下部门相干的状况，感觉不是本人想去的，并不是说部门不好，可能做的事件跟当初的状况太像了，所以想做出一些扭转。过后家外面又有好多事件解决，也没有太多的工夫，就间接回绝了，这件事儿也给本人当前提个醒，投简历之前要先想明确本人想要什么样的，能够列一些指标，而不是因为急于找工作，猎头和hr间接打电话过去就间接面试。

心得

面试公司的抉择

本次面试有几家公司（腾讯地图，头条，360教育，新东方等）全部都是猎头和hr间接打电话过去让面试的，过后就抱着试试的态度，就间接面试了，面试的过程中感觉可能都不太适合（所以面试的时候要问一下公司部门的具体工作内容），换工作的时候尽量找相干部门的人内推，首先内推的部门你必定会提前有所理解，而且还能够帮忙看看进度啥的，面试过了说不定还能成为好敌人，哈哈（所以平时要多结交一些大佬，个别大佬的人脉都很宽泛，而且他们很能够给你内推，甚至能够把他们本人的教训分享给你）。

总是要想好本人当初呈现什么问题了，为什么打算到职，下一份工作想要什么样儿的，毕竟一份工作要干很长时间。

面试筹备

举荐一些很好的文章：

  • 在阿里我是如何当面试官的
  • 阿里前端攻城狮们写了一份前端面试题答案，请查收
  • 大厂面试中遇到的几十道 webpack 与 react 面试题
  • 三年前端，面试思考（头条蚂蚁美团offer）
  • 大厂面试复盘(微信/阿里/头条，均拿offer)
  • 霖呆呆的近期面试128题汇总
  • 一年半，三本，收到30K+的offer，你也能够
  • 蚂蚁、字节、滴滴面试经验总结
  • 一年半教训前端社招7家大厂&独角兽全过经验 | 掘金技术征文

好文章真的太多了，哈哈，这里就不全副放进去了，对于面试，我也筹备做了一些总结，能够查看 集体博客

算法

根本每家公司多多少少都会问很多算法题，算法题对于我这种根本没什么根底的人来说，碰到了就很恐怖，然而没有其余的方法，就是两个字 “多练”，这里举荐我看过的几篇文章：

  • 天生不聪慧
  • 写给前端的算法进阶指南，我是如何两个月零根底刷200题：
  • 前端该如何筹备数据结构和算法？
  • 前端算法渣的救赎之路
  • 我接触过的前端数据结构与算法
  • 作为前端，我是如何在Leetcode 算法较量中进入前100的？
  • LeetCode 依照怎么的程序来刷题比拟好？

其余的一些想法，之前也写了一篇文章 对于面试的一点心得，感兴趣的也能够看一下。也十分欢送大家关注我的公众号 【牧码的星星】以及加我微信进行交换，公众号也会偶然分享一些学习的一些心得。