2020.09 中高級前端面試題

時間 2020-12-01

標籤 css html 前端 vue node react webpack git github web 欄目 CSS 简体版

原文原文鏈接

最近由於公司的戰略調整與職業發展的緣故離開了老東家，期間變成了求職者的角色，也作了半個月的面試官。如今已經從面試官的職務抽離了出來，故來分享一下 2020 中高級前端工程師常見的面試題。css

面試前的準備

中/英文自我介紹
離職的緣由

html

把帶 css 連接的 <link> 標籤放在 <head> 標籤內，而帶 js 連接的 <script> 標籤儘可能靠近 </body>, 爲何會有這種提議？若是必須不這樣作，如何處理？

css

列舉水平垂直居中的實現
簡述一下什麼是盒子模型
瞭解過 flex 佈局、 grid 佈局嗎
計算樣式權重

JavaScript

數組去重
數組多層扁平化
深拷貝數組和對象
數組裏面有 10 萬個數據，取第 1 個數據與第 10 萬個數據的時間相差多少？
數組的 map 和 forEach 有什麼區別？
Fetch 與 XHR 的區別?
bind、call、apply 的區別?
如何檢測變量的類型(儘量多，描述可能出現的問題)?
簡述一下原型鏈
使用過 ES6 嗎？你經常使用的有哪一些？
簡述一下 Promise 的特色
Promise 怎麼作異常處理?
Promise 串聯加載?
Promise 並行加載?
Promise 限流併發?
async/await?
必定要使用 async/await 嗎，若是我不作異步處理，可能只是處理簡單的關閉彈框不能用 Promise 嗎?
事件循環 (event-loop)

計算題

按順序寫出程序的輸出結果:html

考察 this 問題

var length = 10;

function fn() { alert(this.length); }
var obj = {
  length: 5,
  callApi: function(fn) {
    fn();
    arguments[0]();
  }
}

obj.callApi(fn, 3)

列出下面代碼的不足及優化方案前端

var node = document.querySelectorAll('ul');
for (var i = 0;i < node.length; i++) {
  node[i].addEventListener('click', function() {
    alert('click' + i);
  });
}

改造下面的代碼，使之輸出 0 ~ 9，寫出你能想到的全部解法。vue
```
for (var i = 0;i < 10; i++) {
  setTimeout(() => {
    console.log(i)
  }, 1000);
}
```

請寫出下面代碼的運行結果node

async function async1() {
 console.log("async1 start");
 await async2();
 console.log("async1 end");
}

async function async2() {
    console.log("async2");
}

console.log("script start");

setTimeout(() => {
    console.log('setTimeout');
}, 0);

async1();

new Promise((reslove) => {
    console.log("promise1");
    reslove();
}).then(() => {
    console.log("promise2");
})

console.log("script end");