1殖妇、CSS

（1）#root 是 .box 的父元素狱从，兩者寬高都不固定抱怔。用CSS實(shí)現(xiàn).box相對(duì)于#root水平和垂直居中劣坊，至少兩種方式。

// 方式一：flex 彈性布局
#root{
   display: flex;
   justify-content: center;
  align-items: center;
}

// 方式二：絕對(duì)定位 + transform
#root{
   position: relative;
}
.box{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

（2）position 有哪幾種取值屈留？分別相對(duì)于誰進(jìn)行定位？

2、Javascript Basic Knowledge

（3）let 和 var 的區(qū)別怨绣？ （let）

（4）寫出下面代碼的輸出未蝌？（如果回答正確，用兩種方式對(duì)代碼進(jìn)行改造质欲，使其輸出為6） （let 閉包）

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6]();

// correct log
// 10 （用var 聲明的變量 i 是一個(gè)全局變量）

// 使其輸出為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）寫出下面代碼的輸出？（ 箭頭函數(shù) 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）最簡單的方式實(shí)現(xiàn)數(shù)組的深拷貝 （深淺拷貝）

let deepCopyArr = JSON.parse(JSON.stringify(originalArr))

（8）有下面的類定義和實(shí)例創(chuàng)建： （原型 prototype）

class Animal extends Object {
}

class Person extends Animal {
}

let jane = new Person()

（8.1）jane.__proto__和下面哪些選項(xiàng)恒等（===）嘶伟？
A. Person
B. Person.prototype
C. Person.constructor
D. Person.proto
E. Object.getPrototypeOf(jane)

（8.2）jane.prototype和下面哪些選項(xiàng)恒等（===）怎憋？
A. Person
B. Person.prototype
C. Person.proto
D. undefined

（8.3）jane.constructor和下面哪些選項(xiàng)恒等（===）？
A. Person
B. Person.prototype
C. Person.prototype.constructor
D. Object.getPrototypeOf(jane)

（8.4）Person.__proto__和下面哪些選項(xiàng)恒等（===）？
A. jane.proto.constructor
B. Object.getPrototypeOf(jane.constructor)
C. Animal.prototype
D. Object.getPrototypeOf(jane.proto).constructor

（9）用一種最簡單的方式實(shí)現(xiàn)數(shù)組的去重 （Set）

// 去除數(shù)組的重復(fù)成員
[...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模塊化標(biāo)準(zhǔn)有哪些绊袋？分別介紹一下它們之間的區(qū)別毕匀。（模塊化）

#50

（12）import 和 require 的區(qū)別？（模塊化）

（13）Javascript實(shí)現(xiàn)異步編程的幾種方式 （JS對(duì)異步編程的實(shí)現(xiàn)方式）

• 回調(diào)函數(shù)
• 事件監(jiān)聽
• 發(fā)布/訂閱
• Promise 對(duì)象
• Generator函數(shù)

（14）async函數(shù)的實(shí)現(xiàn)原理 （Async/Await原理）

3后德、UI Framework

（15）談?wù)剬?duì)Vue的生命周期的理解？

（16）什么階段才能訪問DOM唤蔗？

（17）Vue-router 路由模式有幾種探遵？

三種： 'hash' 、'history' 妓柜、'abstract'

• hash：使用 URL hash值來作路由箱季。支持所有瀏覽器，包括不支持 HTML5 History Api的瀏覽器棍掐。
• history ：依賴 HTML5 History API 和服務(wù)器配置藏雏。
• abstract：支持所有JavaScript 運(yùn)行環(huán)境，如 Node.js 服務(wù)器端作煌。如果發(fā)現(xiàn)沒有瀏覽器的 API掘殴，路由會(huì)自動(dòng)強(qiáng)制進(jìn)入這個(gè)模式。

（18）談?wù)剬?duì)React的生命周期的理解粟誓？

（19）如何實(shí)現(xiàn)：在父組件Father的生命周期中直接引用子組件Child中某一個(gè)元素（例如一個(gè)input元素）奏寨？寫出實(shí)現(xiàn)的代碼。

（20）談?wù)剬?duì)React中Context的理解鹰服，什么情況下需要使用Context 病瞳？

（21）Redux設(shè)計(jì)的三條重要原則是什么揽咕？為什么reducer必須返回一個(gè)新的state，而不能修改傳入的state對(duì)象套菜？

#86

（22）react redux中表象組件和容器組件的區(qū)別是什么亲善？

（23）談一談對(duì)React Hooks的理解？

4逗柴、Others

（24）大致描述一下瀏覽器渲染的流程蛹头？（瀏覽器工作原理）

#97

（25）為了提高用戶體驗(yàn)，做過的性能優(yōu)化有哪些戏溺？（性能優(yōu)化）

（26）談一談對(duì)微服務(wù)的了解渣蜗。

有任何github star fork follow watch issue 加星之類的疑問， 我都能幫得到你們