面经分类

从我的面试记录来看，可以把面试题分成这些类型：

  • JavaScript
  • CSS
  • 框架通识
  • Vue
  • React
  • Webpack
  • Typescript
  • 浏览器 & 网络
  • 小程序
  • 看代码说结果
  • 手撕代码 & 算法
  • 开放题

以下是我面试过程中遇到的所有的问题，供大家参考。下面的这些题目能搞定百分之七八十，搞定面试绝对没问题。

JavaScript

  • Map 和 Set 的区别，Map 和 Object 的区别
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
同
是什么 为什么 怎么用
map 和 set 都是ES6提供的一种新的数据类型
他们都属于对象类型

提高性能

map  只需要键值对的结构时，即 key => value 的结构
      需要字符串以外的键或者值
set 数组去重


在JS中的默认对象的表示方式为{}，即一组键值对，但是键必须是字符串。
Map 对象是键值对集合，和 JSON 对象类似，但是 key 不仅可以是字符串还可以是其他各种类型的值包括对象都可以成为Map的键

Set 对象类似于数组，且成员的值都是唯一的
常常用来做数组去重

异
Object的键只能是字符串或者Symbols，Map的键可以是任何类型。

  • 数组的 filter、every、flat 的作用是什么
    函数三要素
    函数名 形参 函数体
    方法
    返回值
    filter
    数组的过滤方法
    它创建一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

every
用于判断数组的每一个元素是否满足条件
如果全部都满足 返回值为 true 如果有一个不满足 剩下的则不会执行 返回值 false

flat
用于扁平化数组
主要用于将多维数组转化为一维数组
// 不传参数时，默认“拉平”一层
arr.flat()

  • 前端开发者不得不知的 ES6 十大特性
  • const let
  • 箭头函数 ()=>{}
  • 对象数组…扩展运算符
  • class 继承语法糖
  • ${count} 模板字符串
  • 结构赋值
  • Promise
  • 形参默认值
  • .？可选链
  • ES6 新增了模块化（import / export）
  • Proxy 代理对象 函数

+说一下对 Promise 的了解

Promise 可以将异步操作以同步的流程表达出来, 避免了层层嵌套的回调函数(俗称’回调地狱’)
Promise 也是一个构造函数 它身上 all、allSettled、any、race、reject、resolve
all 并发请求
Promise 状态 padding resolve reject
只能从 padding 到 resolve 或者 reject
.then .catch .flnaly

  • Promise 实现原理

  • Promise 的 all 和 race 有什么区别

  • 箭头函数和普通函数的区别

    变量不能重名
    变量 不会 提升
    没有this

  • 箭头函数和普通函数的区别

  • let、var 和 const 的区别？如果希望 const 定义的对象的属性也不能被修改该怎么做？

  • 堆和栈的区别

  • 闭包的原理

  • 我将【闭包】讲给你听！

  • instanceof 的实现原理

  • new 的实现原理

  • 数据类型有哪些？如何判断一个数据是否是数组

  • JQuery 实现链式调用的原理是什么

  • 分别介绍一下原型、原型链、作用域和作用域链的含义和使用场景

CSS

  • css 和 js 两种方式实现 div 右移 1000px 动画

  • visibility、display、opacity 的区别

  • 单行截断 css

  • flex 布局

  • flex：1

  • transition、transform、translate 的区别

  • 如何画一条 0.5px 的边框

  • 怎么画一条 0.5px 的边（更新）

  • 说一下 BFC

  • 浅析 BFC 原理及作用

  • parent 元素宽高不定，实现 scale 固定宽高比始终为 4：3

  • CSS 垂直居中的方案

  • CSS 垂直居中的 12 种实现方式

  • 伪元素和伪类的区别

  • 总结伪类与伪元素 | AlloyTeam

  • position 的几个属性和含义

  • CSS position 属性

  • 说一下盒模型

  • 响应式布局方案

  • 前端响应式布局原理与方案（详细版）

  • 三栏式布局方案

  • 如何提高动画的渲染性能

  • 这样使用 GPU 动画

Vue

  • computed 和 watch 的区别

  • data 为什么是个函数，而不是对象

  • watch 能监听 computed 的属性吗

  • vue 的响应式原理

  • vue 的生命周期

  • mounted 拿到数据可以后可以直接获取 dom 吗

  • nextTick 原理

  • vue 模板（template）里为什么不能使用多个头结点？

  • vuex 为什么同时设计 mutation 和 action？只设计一个行不行？

  • vue2 和 vue3 在数据绑定这一块有什么区别？

  • vue 挂载和卸载父子组件生命周期钩子执行顺序

  • vue 的优化方案（等同于如何编写可读性高、易维护且高性能的 vue 代码）

  • Vue 项目性能优化 — 实践指南（网上最全 / 详细）

  • keep-alive 的原理，使用有什么问题？如何解决

在我开始投简历之前，我做了两周的面试准备，那么我准备什么呢？

首先是准备简历和自我介绍。将自己所做过的所有项目都列出来，从里面找到自己收获比较大的或者是存在着技术难点的项目放到简历上。有一点非常重要：千万不要为了显得自己很厉害，把自己不了解或者不熟悉的技术写到简历里！这是非常不明智的，面试官往往会根据你简历的所写到的技术点和项目进行提问，如果问到了你不会的技术点，你又不能很好的表达出来，那可能就吃了一个暗亏。在梳理项目的同时，最好对你的项目做一个抽象的归纳总结，比如项目的使用者有哪些人，这个项目对他们产生了什么样的帮助，这个项目所承担的职责是什么样的。

第二步是遍历。需要大批量的去看网上的面经，面经的时间越近越是有可借鉴的地方。多关注简历里面写到和项目里用到的技术，多关注原生 JS、技术框架、构建打包以及性能优化方向的知识，而对于 css 和 html 这些面试官能问到的范围比较小，所有可能被问到的 css 题目其实我都遇到过了，也都记录在了文章里。

第三步是列提纲。我根据网上的面经，我将面试官可能会问到的问题汇集起来统一记录在文档里，然后按照题目的标签和关注点进行分类，最后得到的分类结果和最后实际的面试经过所碰到的问题分类差不多。

第四步是各个击破。对于梳理出来的知识点，我建议将每一条的答案都用笔写出来或者用电脑编辑记录下来。很多时候，知道和能不能很好地表达出来没有必然的关系。不仅要知道是什么，最好也要能保证在面试官提问的时候能用清晰的语言将你所知道的表达出来。

除了以上四点，还需要注意的是算法。算法这件事情很难在短时间内训练得很熟练，更多的是需要日常的的锻炼，培养了灵活的思维意识，才能在最短的时间内从题目中分析出需要使用的算法思想。当然，如果只是为了应付面试的话，那就没有这么复杂了，前端面试中可能涉及到的算法题不是很多，你只需要会做这些常见的题目就行了，甚至不需要举一反三。

除了做准备之外，还有一件事情必须要做：复盘和总结。对于我们面试的时候所遇到的问题，一定要及时的回忆和记录下来，尤其是自己没有回答上来的问题，及时的查漏补缺，找到一个能让面试官满意的答案并记录下来，这样的记忆往往会更加深刻。