前端面試題·甄選（持續更新）

2019.04.23 已知以下代碼，如何修改才能讓圖片寬度爲 300px ？注意下面代碼不可修改

<img src="1.jpg" style="width:480px!important;」>

解決方案:

• css3的縮放：

  transform(scale(0.625, 0.625));

• js:

  document.getElementsByTagName("img")[0].setAttribute("style","width:300px!important;")

• css: max-width: 300px; (這個我當時沒想到...)
• css: box-sizing: border-box; padding-left: 90px; padding-right: 90px; (這個我當時也沒想到...)

2019.03.22 Promise 構造函數是同步執行仍是異步執行，那麼 then 方法呢？

這個很明顯，promise構造函數是同步執行的，then方法是異步執行的。
我從回答中選了個稍微複雜點的例子：

const promise = new Promise((resolve, reject) => {
  console.log(1);
  resolve(5);
  console.log(2);
}).then(val => {
  console.log(val);
});

promise.then(() => {
  console.log(3);
});

console.log(4);

setTimeout(function() {
  console.log(6);
});
//執行結果: 124536

這裏會牽涉一個宏任務(macrotask)和微任務(microtask)的執行順序問題，進而牽出javascript的事件循環(EventLoop)。

上乾貨： 這一次，完全弄懂 JavaScript 執行機制，阮一峯 JavaScript 運行機制詳解：再談Event Loop， 這個題，很重要
不想看的也能夠直接看這裏：

先執行一個宏任務(其實運行js的時候這個宏任務已經在運行)，而後執行微任務，清空微任務隊列，再執行宏任務，再執行微任務，清空微任務隊列...

常見的任務類型:

• 微任務 microtask(jobs): promise / ajax / Object.observe(該方法已廢棄)
• 宏任務 macrotask(task): setTimout / script / IO / UI Rendering

2019.01.22 ['1', '2', '3'].map(parseInt) what & why ?

答案: 1, NaN, NaN

這道題的變形:

let unary = fn => val => fn(val)
let parse = unary(parseInt)
console.log(['1.1', '2', '0.3'].map(parse))

答案: 1.1, NaN, 0

解析：

parseInt 定義和用法

• parseInt() 函數可解析一個字符串，並返回一個整數。

• 語法

  • parseInt(string, radix)

  • 參數	描述
    string	必需。要被解析的字符串，只轉化解析有效數字爲止，小數點算無效的。
    radix	可選。表示要解析的數字的基數。該值介於 2 ~ 36 之間。 若是省略該參數或其值爲 0，則數字將以 10 爲基礎來解析。若是它以 「0x」 或 「0X」 開頭，將以 16 爲基數。 若是該參數小於 2 或者大於 36，則 parseInt() 將返回 NaN。

array.map((e, index, arr) => {})比較經常使用， 第一個參數是元素，第二個參數是索引，第三個參數是當前遍歷的數組。

答案也就呼之欲出：

parseInt('2', 1) 1不在2~36之間，返回NaN。
parseInt('3', 2) 3不是二進制中的有效數字，返回NaN。

牛刀小試一下：

['10','10','10','10','10'].map(parseInt);
// [10, NaN, 2, 3, 4]