前端面试题·甄选（持续更新）

2019.04.23 已知如下代码，如何修改才能让图片宽度为 300px ？注意下面代码不可修改

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]