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 有哪几种取值？分别相对于谁进行定位？

2、Javascript Basic Knowledge

（3）let 和 var 的区别？ （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 的区别？（模块化）

（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 History API 和服务器配置。
• abstract：支持所有JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。

（18）谈谈对React的生命周期的理解？

（19）如何实现：在父组件Father的生命周期中直接引用子组件Child中某一个元素（例如一个input元素）？写出实现的代码。

（20）谈谈对React中Context的理解，什么情况下需要使用Context ？

（21）Redux设计的三条重要原则是什么？为什么reducer必须返回一个新的state，而不能修改传入的state对象？

#86

（22）react redux中表象组件和容器组件的区别是什么？

（23）谈一谈对React Hooks的理解？

4、Others

（24）大致描述一下浏览器渲染的流程？（浏览器工作原理）

#97

（25）为了提高用户体验，做过的性能优化有哪些？（性能优化）

（26）谈一谈对微服务的了解。

有任何github star fork follow watch issue 加星之类的疑问， 我都能帮得到你们