1、CSS
（1）#root 是 .box 的父元素，两者宽高都不固定。用CSS实现.box相对于#root水平和垂直居中，至少两种方式。
// 方式一：flex 弹性布局
#root{
display: flex;
justify-content: center;
align-items: center;
}
// 方式二：绝对定位 + transform
#root{
position: relative;
}
.box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
（2）position 有哪几种取值？分别相对于谁进行定位？
| 可能的值 | 描述 |
|---|---|
| absolute | 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| fixed | 生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| relative | 生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| inherit | 规定应该从父元素继承 position 属性的值。 |
2、Javascript Basic Knowledge
（3）let 和 var 的区别？ （let）
| let | var | |
|---|---|---|
| 作用域 | 只在let命令所在的代码块内有效 | 在全局范围内都有效 |
| 变量提升 | 不存在 | |
| 所声明的变量一定要在声明后使用，否则报错。 | 存在 | |
| 所声明的变量在声明之前使用，会输出 undefined | ||
| 暂时性死区 | 存在 | |
| 在代码块内，使用let命令声明变量之前，该变量都是不可用的。 | 不存在 | |
| 重复声明 | 不允许 | 允许 |
（4）写出下面代码的输出？（如果回答正确，用两种方式对代码进行改造，使其输出为6） （let 闭包）
var a = [];
for (var i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6]();
// correct log
// 10 （用var 声明的变量 i 是一个全局变量）
// 使其输出为6的改造
// 改造方式一：直接将 var 改为 let
// 改造方式二：使用闭包
var a = [];
for (var i = 0; i < 10; i++) {
a[i] = (function (i) {
return function () {
console.log(i);
}
})(i)
}
a[6]();
（5）写出下面代码的输出？ （RegExp）
var regex = /foo/g;
regex.test('foo');
regex.test('foo');
regex.test('barfoo')
regex.test('foobar')
// correct log
var regex = /foo/g;
// regex.lastIndex is at 0
regex.test('foo'); // true
// regex.lastIndex is now at 3
regex.test('foo'); // false
// regex.lastIndex is at 0
regex.test('barfoo') // true
// regex.lastIndex is at 6
regex.test('foobar') // false
（6）写出下面代码的输出？（ 箭头函数 this指向）
function Timer() {
this.s1 = 0;
this.s2 = 0;
setInterval(() => this.s1++, 1000);
setInterval(function () {
this.s2++;
}, 1000);
}
var timer = new Timer();
setTimeout(() => console.log('s1: ', timer.s1), 3100);
setTimeout(() => console.log('s2: ', timer.s2), 3100);
// correct log
// s1: 3
// s2: 0
（7）最简单的方式实现数组的深拷贝 （深浅拷贝）
let deepCopyArr = JSON.parse(JSON.stringify(originalArr))
（8）有下面的类定义和实例创建： （原型 prototype）
class Animal extends Object {
}
class Person extends Animal {
}
let jane = new Person()
（8.1）jane.__proto__和下面哪些选项恒等（===）？
A. Person
B. Person.prototype
C. Person.constructor
D. Person.proto
E. Object.getPrototypeOf(jane)
（8.2）jane.prototype和下面哪些选项恒等（===）？
A. Person
B. Person.prototype
C. Person.proto
D. undefined
（8.3）jane.constructor和下面哪些选项恒等（===）？
A. Person
B. Person.prototype
C. Person.prototype.constructor
D. Object.getPrototypeOf(jane)
（8.4）Person.__proto__和下面哪些选项恒等（===）？
A. jane.proto.constructor
B. Object.getPrototypeOf(jane.constructor)
C. Animal.prototype
D. Object.getPrototypeOf(jane.proto).constructor
（9）用一种最简单的方式实现数组的去重 （Set）
// 去除数组的重复成员
[...new Set(array)]
（10）写出下面代码的输出：（Promise）
const p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('success')
}, 1000)
})
const p2 = p1.then(() => {
throw new Error('error~')
})
console.log('p1:', p1)
console.log('p2:', p2)
setTimeout(() => {
console.log('p1:', p1)
console.log('p2:', p2)
}, 2000)
image
（11）Javascript模块化标准有哪些？分别介绍一下它们之间的区别。（模块化）
#50
（12）import 和 require 的区别？（模块化）
| require | import | |
|---|---|---|
| 所属的模块化标准 | CommonJS | ES6语言层面实现的模块功能 |
| 什么时候执行 | 运行时执行模块加载 | 编译时执行模块导入（或者叫静态加载） |
| 加载效率 | 低 | |
| 实质是整体加载整个模块：生成一个对象，然后再从这个对象上面读取方法。这种加载称为“运行时加载”，因为只有运行时才能得到这个对象，导致完全没办法在编译时做“静态优化”。 | 高 | |
ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。import { stat, exists, readFile } from 'fs'; 上面代码的实质是从fs模块加载 3 个方法，其他方法不加载。这种加载称为“编译时加载”或者静态加载，即 ES6 可以在编译时就完成模块加载，效率要比 CommonJS 模块的加载方式高。当然，这也导致了没法引用 ES6 模块本身，因为它不是对象。 |
（13）Javascript实现异步编程的几种方式 （JS对异步编程的实现方式）
- 回调函数
- 事件监听
- 发布/订阅
- Promise 对象
- Generator函数
（14）async函数的实现原理 （Async/Await原理）
3、UI Framework
（15）谈谈对Vue的生命周期的理解？
（16）什么阶段才能访问DOM？
（17）Vue-router 路由模式有几种？
三种： 'hash' 、'history' 、'abstract'
-
hash：使用URL hash值来作路由。支持所有浏览器，包括不支持HTML5 History Api的浏览器。 -
history：依赖HTML5 HistoryAPI 和服务器配置。 -
abstract：支持所有JavaScript 运行环境，如Node.js服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。
（18）谈谈对React的生命周期的理解？
（19）如何实现：在父组件Father的生命周期中直接引用子组件Child中某一个元素（例如一个input元素）？写出实现的代码。
（20）谈谈对React中Context的理解，什么情况下需要使用Context ？
（21）Redux设计的三条重要原则是什么？为什么reducer必须返回一个新的state，而不能修改传入的state对象？
#86
（22）react redux中表象组件和容器组件的区别是什么？
| Presentational Components | Container Components | |
|---|---|---|
| Purpose | How things look (markup, styles) | How things work (data fetching, state updates) |
| Aware of Redux | No | Yes |
| To read data | Read data from props | Subscribe to Redux state |
| To change data | Invoke callbacks from props | Dispatch Redux actions |
| Are written | By hand | Usually generated by React Redux |
（23）谈一谈对React Hooks的理解？
4、Others
（24）大致描述一下浏览器渲染的流程？（浏览器工作原理）
#97