我遇到的前端面试题总结（2018）

来到新公司上班已经快一个月的时间，趁着空闲时间把自己这段时间的面试题进行一波总结，避免再次踩坑，有些问题还是需要自己去查一下，有时间的话会把答案补全

1.  关于模块化的理解，AMD、CMD规范
   • AMD、CMD规范其实就是require.js、sea.js在推广过程中对模块规范化的产出
   • 模块化就是将一个大文件拆分成相互依赖的小文件，再进行统一的拼装和加载。只有这样，才有多人协作的可能
2.  响应式布局的原理
   • 响应式布局就是根据不同的屏幕大小设置不同的样式
   • Media Queries（媒体查询） 是响应式设计的核心
3.  Redux的原则
   • 单一数据源
   • 数据是只读的
   • state的更改只能由纯函数修改
4.  怎么通过路由对不同账号进行权限管理
   • 这个其实就是账号权限的问题，一般后台系统会用这个，路由鉴权的问题，一般需要后台同学配合
5.  重绘和回流
   • 重绘：只改变dom样式会触发重绘 如 color
   • 回流：改变dom的布局 如padding
   • 回流肯定会触发重绘，重绘不一定会触发回流 
6.  词法作用域，为什么叫词法作用域
   • 词法作用域又叫静态作用域，是在词法解析阶段已经确定了一个变量的作用域
7.  promise 和 async关系
   • async是Generator的语法糖，返回一个promise对象
8.  ajax拦截全局请求
   • ajax的
9.  ajax与fetch的关系与区别
   • ajax的实质是 XMLHttpRequest
10.  react生命周期
    • 实例化：
      1. getDefaultProps
      2. getInitialState
      3. componentWillMount
      4. render
      5. componentDidMount
    • 存在期
    1. componentWillReceiveProps
    2. shouldComponentUpdate
       
    3. componentWillUpdate
       
    4. render
       
    5. componentDidUpdate
    • 销毁
      1. componentWillUnmount
11.  数组解构赋值
    • 这个就是考察对 es6 是否熟悉
12.  react-redux的connect方法实质，接收的参数
13.  js基本数据类型
    • null
    • undefined
    • number
    • boolean
    • string
    • object
    • symbol
14.  redux怎么管理数据，有什么好处？
15.  什么是跨域，（引申：解决跨域的方法）
    • 前端常见跨域解决方案（全）
16.  koa中间件的原理，可以引申到redux的中间件
17.  setTimeout(func,100)会在100毫秒以后执行吗？
    • 涉及到js单线程问题
18.  变量提升，var、let、const
    • 作用域块
19.  symbol的作用，与应用
    • 保证每个属性的名字都是独一无二的，从根本上防止属性名的冲突
20.  数组常用的方法
21.  对于工程化、模块化、组件化、前后端分离的理解
    • 前端工程化主要应该从模块化、组件化、规范化、自动化四个方面来思考，下面一一展开
    • 模块化就是将一个大文件拆分成相互依赖的小文件，再进行统一的拼装和加载。只有这样，才有多人协作的可能
    • 从UI拆分下来的每个包含模板(HTML)+样式(CSS)+逻辑(JS)功能完备的结构单元，我们称之为组件。
22.  对于前端页面出现卡顿或者性能问题怎么调试
23.  前端怎么监控产生的异常或者怎么监控性能问题
24.  前端语义化是什么意思(可能会根据这个问题引申SEO)
25.  doctype的作用
26.  class的实质是什么
27.  new class （对象实例化） 实际发生了什么
    1. 一个继承自 class.prototype 的新对象被创建。
    2. 使用指定的参数调用构造函数 Foo ，并将 this 绑定到新创建的对象。new Foo 等同于 new Foo()，也就是没有指定参数列表，Foo 不带任何参数调用的情况。
    3. 由构造函数返回的对象就是 new 表达式的结果。如果构造函数没有显式返回一个对象，则使用步骤1创建的对象。（一般情况下，构造函数不返回值，但是用户可以选择主动返回对象，来覆盖正常的对象创建步骤）
28.  this在不同状态下的指向（window、class、object、箭头函数）
29.  React哪些数据不会输出到页面
    1. 布尔值
    2. null
    3. undefined
30.  get与post的区别
31.  移动端事件穿透，fastclick以及tab事件
    • 移动端常见问题，fastclick以及tab事件都是为了解决部分机型 click 事件有300毫秒延迟的问题
32.  移动端手势相关的库实现原理
33.  swiper实现原理
34.  ES6新增的数据结构Set，Map以及WeakSet，WeakMap
35.  实现随机8位验证码，生成1000个不重复的验证码

    • //生成验证码
      function verificationCode(){
          let code = (Math.random()*100000000).toFixed(0)
          //console.log(msg,msg.length))
          //长度不够8位的补0
          while(msg.length<8){
              code = "0" + code
              console.log(code)
          }
          return code
      }
      function message(){
          //使用对象存放验证码
          let codes = {}
          //let arr = []
          let index = 0
          while(index < 1000){
              let code = verificationCode()
              if(!codes[code]){
                  codes[code] = index
                  index++
                  //arr.push(code)
              }
          }
          console.log(codes)
          //console.log(arr.length)
      }

36.  判断数组是否是一个严格递增的数组
37.  为什么React的setState设计成异步的
38.  EventLoop是什么，任务队列优先级
    • JavaScript：彻底理解同步、异步和事件循环(Event Loop)
39.  let、const转换成es5的写法
40.  bind的实现

最后推荐一篇文章前端面试考点多？看这些文章就够了