爱礼科技有限公司web前端面试题
目的：筛选出基本功扎实的候选人，也许在工作经验上有所欠缺，但思维灵活，对于技术有过自己的思考。根据回答的广度和深度可酌情加分，以下的问题由浅入深引导候选者说出自己的观点和想法
笔试篇 考察基础与基本功，多选+填空。根据候选者表现，再来调整面试时的话题。更灵活及针对
为节约彼此的时间，请认真阅读作答，您所勾选的都将纳入我们面试时的交流话题。 欢迎您进行补充与质疑，这将让我们对您留下更深刻的印象。对于您不擅长之处诚实作答即可，我们会将以下问题与您进行无保留分享，我司欢迎优秀的员工，更欢迎人品优异的你，请诚实作答，祝你好运！
- 您了解过的HTML5新特性？
A. 更规范的web标准 B. 更实用的API C. 表单
D. 其他请补充 _____________________________
相关参考：（对于这些问题都没有正确标准，在此基础上，能有其他补充可适当加分）
A 语义化(新标签) form表单的新增等 B 拖拽drag Canvas media相关(video audio) 客户端持久化存储 SessionStorage LocalStorage History 文档消息跨域
- 您已了解过的CSS3特性？
A. 新增扩展选择器、伪类 B. 一些实用属性 C. 过渡与动画
D. 其他请补充 _____________________________
A 选择器 nth-child 伪类 ::target ::select
属性 display: flex background-size border-radius box-sizing text-overflow B transition 与 animation的区别 animation用法 C 过渡Transition 与 动画Animation的使用场景及用法等
- 您对 BFC 块级格式化上下文的理解？
A. 一"块"渲染区域 B. 外边距折叠 C. 解决浮动
D. 其他请补充 _____________________________
A 块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。 B 准确来说是垂直方向的外边距折叠，不会影响水平方向 C BFC的区域不会与float的元素区域重叠，因为float的元素脱离了正常文档流，所以还需要overflow: hidden来产生
D 延伸 IFC~ 能彻底理解BFC，即能搞定布局相关问题，读得懂设计稿，知道如何制造正常文档流向，解决边距，css模块等
- 您对RWD（响应式设计）有过哪些了解？
A. 灵活布局，从移动端到PC端，适用于多个设备 B. Media Query、栅格化、响应式图片 C. 相对单位
D. 其他请补充 _____________________________
ABC都是实现方式，需要参考人理解media query及适用场景。 我司pc端用了bootstrap但移动端部分更小，手动实现即可，可延伸问一下viewport，移动端下 rem em vh vw 等一些使用场景和方案，酌情加分
- 以下对于闭包的说法你觉得哪种更好？
A. 定义在一个函数内部的函数 B. 够读取其他函数内部变量的函数 C. 一个拥有变量和绑定了这些变量环境的表达式
D. 其他请补充 _____________________________
其实这三种都是标准答案，不同书上的定义不同，但只要理解了闭包的使用场景、变量作用域及用途，垃圾回收等知识点，闭包是什么就已不重要了
- 对于this的说法下面哪一项是正确的？
A. this对象是在运行时基于函数的执行环境绑定的 B. 用new调用构造函数，this会绑定到新对象实例上 C. 通过call或者apply可绑定this到指定的对象上 D. 箭头函数就是常规function的语法糖
可补充优雅使用this的方法（加分） _____________________________
ABC都是对的，而D~
Dave Herman："箭头函数 => 所改变的并非把 this 局部化，而是完全不把 this 绑定到里面"。 事实上 =>箭头函数并不绑定 this，arguments，super(ES6)，抑或 new.target(ES6)。
- 你是否关注过ES6？ 对此有哪些认识？
A. ECMAScript的实现和扩展 B. （即将）普及的JavaScript核心语言标准 C. 改变了JavaScript的编写方式，更多的语法糖 D 其他请补充 _____________________________
看候选人以什么点来答，选项都是引导候选人去思考的，若答新增特性，提及ES6关键词10个就合格，往上加分。
相关关键词：
- 箭头函数 及使用场景，this指向的坑
- 类的支持 class关键字 extends constructor super
- Math，Number，Array，String，Object等扩展API
- 增强的对象字面量
- 模版字符串
- 解构赋值
- 函数参数 默认值 不定参数 拓展参数
- 块级作用域 let const
- for of遍历 Iterator Generator
- 模块 Module
- 集合类型 Map, Set, WeakMap, WeakSet 及使用场景
- Proxy代理
- 基本数据类型扩展 Symbol
- Promise
了解es7，能说什么 :: @修饰符 async await 加分
- 您对于React框架有哪些认识，请勾选你赞同的说法？
A 一个高效的解决前端V层的 MVVM 框架 B 比原生JS还快的Virtual DOM C React是单向数据流，数据通过Props，State进行传递
D 其他请补充 _____________________________
参考：
React是一个用于构建用户界面的JavaScript库，而不是一个MVC框架，但可以使用React作为MVC架构的View层轻易的在已有项目中使用。
所以说选了A直接扣分，也不用问以下的了。若提到、指正，可加分，延伸：MVVM MVC的不同。考察候选人是否了解Vue、Angular等主流框架。 B Virtual DOM是React高效渲染的关键。但这问法就是有误区的 https://www.zhihu.com/question/31809713/answer/53544875 顺带可问问 React 的一些性能，实际场景的使用方案等。既然提到 VDOM，可顺便问问性能优化方案相关 C 单向数据流没问题，是通过props传递。state只存在于组件内部。可顺便问组件间的传递 父子 子父 非相关组件 React声明周期等。
- 您对于Redux有哪些理解，下面的说法你认同吗？
A 数据状态管理的一种有效解决方案之一 B Redux是一个比较薄的数据层，同时把View的同步刷新也做了 C Redux应用最大的挑战更多来自设计层面
D 其他请补充 _____________________________
A 描述事实，其他方案比如 Mobx Flux 是否有过了解，相比于其他的Redux的优势在哪 B store的变化会反映到组件内部state上来，而this.setState的会触发render重新渲染组件 C 看个人理解和掌握的深度了，在实际项目中如何设计action，设计state树形结构
面谈话题——您是通过怎样的方式来精进自己的技术？方便的话，请谈谈你目前的职业生涯规划。（这个话题就留给老大去谈了）