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

时间 2019-11-30

标签遇到端面试题总结繁體版

原文原文链接

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

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

实现随机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)
}

判断数组是不是一个严格递增的数组
为何React的setState设计成异步的
- 提升性能
EventLoop是什么，任务队列优先级
- JavaScript：完全理解同步、异步和事件循环(Event Loop)
let、const转换成es5的写法
bind的实现

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