2019年8月前端面试总结

关于裸辞

在2019年下半年，整个互联网圈不怎么景气的大环境下，我选择了裸辞，并且对自己的选择没有后悔。原因如下：

很多企业在政府政策导向下撤离市中心往余杭、萧山等周边区域搬迁，前公司也不例外，在每天往返3小时的煎熬下毅然决定在新项目启动之前递交辞职。
之前是以实习生的身份转正几乎没有面试经验，想着可要好好地准备面试。

关于本人

即将奔三、非科班、接触前端一年半时间

面试经历

以下问题全凭面试结束后的回忆：

有赞微商城

有赞技术团队

CSS相关

IE盒子模型和标准盒子模型区别
伪类、伪元素（::first-line, ::first-letter, ::after, ::before）
CSS选择器优先级：!importent > 内联样式 > id选择器 > class选择器 …
CSS实现垂直、水平居中方法
flex-box常用属性值
position属性值：static(默认值), relative, absolute, fixed, sticky

JS相关

Object.prototype.toString.call 为什么能输出[object Object]?
原型，原型链，继承方式
call、apply、bind
浏览器Event-Loop

React相关

React生命周期函数
组件名为什么要大写：跟JSX语法解析用以区分原生html元素
class组件和function组件区别
虚拟Dom如何渲染
React Diff算法
render机制，父子组件渲染引发re-render问题
React Hooks
React Router两种模式hash、history区别(hash模式#后面的内容不会发送到服务器，history模式下nginx服务器需要设置try_files)

算法相关

求两个数组的交集

涂鸦智能面试

React16 新的生命周期函数static getDerivedStateFromProps、getSnapShotBeforeUpdate等

初始化阶段：constructor => componentWillReceiveProps（static getDerivedStateFromProps） => componentWillMount => render => componentDidMount => componentWillUnmount

更新阶段：componentWillReceiveProps（static getDerivedStateFromProps） => shouldComponentUpdate => componentWillUpdate => render => componentDidUpdate

React16 fiber纤程原理有哪些字段性能优化体现在哪里（React性能瓶颈在哪？diff算法耗时？）
React Components Class和Function组件声明方式的区别？更新机制不同？
React Hooks相比原Class写法有哪些优势
React JSX -> babel转译 -> React库createElement生成dom树 -> React-DOM库render方法调用DOM原生api挂载浏览器dom树上
React虚拟Dom的原理，diff算法（三种方式），key作用
redux源码阅读，设计思想，订阅监听设计模式
redux中间件的理解，包装dispatch，异步回掉方式改变state？
TypeScript有哪些基本类型：泛型、元组 Tuple、枚举
Webpack打包原理、插件和loader发生在打包的哪个阶段

凌笛数码面试

React中 this绑定方式（bind(this)，箭头函数），两种方式的区别
Redux原理
React路由懒加载原理
pureComponent原理（如何避免不必要的re-render）
Webpack tree-shaking的原理
手写深拷贝函数
ES7、ES8有哪些新方法（装饰器属于ES6）
Promise、Generator、async await方法区别（Generator的暂停）
闭包（如何释放闭包）
Array的所有方法（注意是否改变原数组sort，fill，lastIndexOf，map，includes，join，reverse，reduce，copyWithin）
ES6 … 扩展语法的原理（遍历器接口，被for … of循环遍历）

寻找字符串中连续出现次数最多的字符

var str = "bvaafffaaazzzaa";

function calc(str) {
  var arr = str.split('');
  var temp =[];
  var obj = {};
  var count = -1;
  arr.forEach((s, index) => {
    if (s === arr[index - 1] || s === arr[index + 1]) {
      if (s !== arr[index - 1]) { ++ count; }
      temp[count] ? temp[count].push(s) : temp[count] = [s];
    }
  });
  var max = Math.max.apply(null, temp.map((arr) => arr.length));
  var maxArr = temp.filter((arr) => arr.length === max);
  maxArr.forEach((arr) => {
    obj[arr[0]] = max;
  });
  return obj;
}

console.log(calc(str));

正则表达式解法参考：

睿轶信息

Chrome突破：font-size：12px
zoom:1
浏览器标签页之间进行通信onMessage/postMessage，
Margin重叠BFC，Z-index：层叠顺序问题，
LocalStorage如何突破5M，SessionStorage Cookie区别，
PWA，H5离线开发了解，存储在哪
AMD\CMD\CommonJS 区别
this.setState方法同步异步问题（合成事件原理）

变量提升

var a = 10;

function fun() {
  console.log(a);
  var b = a = 20;
  console.log(a);
}

fun();

var a = 10;

function fun() {
  console.log(a);
  var a = b = 20;
  console.log(a);
}

fun();

面试准备

面试总结

建议在Boss直聘上找，相比之下拉钩网显得不怎么靠谱
目前就业环境所趋，公司招聘要求明显提升，反观阿里招聘基本都是P6+，P7级别，要提升自身技能和软实力
数据结构和算法，二面基本会问简单的算法题目，刷LeetCode有用
CSS相关基础知识较薄弱
身体还是第一位