2020.09 中高级前端面试题 - HelloWorld开发者社区

最近因为公司的战略调整与职业发展的缘故离开了老东家，期间变成了求职者的角色，也做了半个月的面试官。现在已经从面试官的职务抽离了出来，故来分享一下 2020 中高级前端工程师常见的面试题。

面试前的准备

中/英文自我介绍
离职的原因

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)

计算题

按顺序写出程序的输出结果:

考察 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，写出你能想到的所有解法。

for (var i = 0;i < 10; i++) {
  setTimeout(() => {
    console.log(i)
  }, 1000);
}

请写出下面代码的运行结果

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");