我遇到的前端面试题总结（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拦截全局请求
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的实现

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