上一次美团面试挂掉后，今天美团的另一个部门又把我捞起来面试了，总共面了一个小时十分钟，前端基础知识+代码，也许是我的基础的确不够扎实，问到最后我的汗都要出来了。

趁着我还记得面试内容，抓紧时间来复盘一下，虽然内容基础，但是感觉收获很多，有蛮多知识点我都没有注意到，查漏补缺一波~

自我介绍

面试官先进行了一个简短的自我介绍，讲了讲他的基本情况？其实我没怎么听清，忙着紧张去了。但是第一次面试的那个面试官有很认真的和我介绍了面试的流程，在这一个小时里面要干什么（虽然面试体验很好但挂也挂的毫不留情）。

礼尚往来，我也做了一个自我介绍（ps，自我介绍一定程度上决定了面试官后面问你什么问题，如果不会的东西一定不要提！！我严重怀疑我被问那么多基础问题是因为我说了 “有对前端基础知识进行系统学习”）

我的自我介绍：

本科在 xx，成绩xx，做了什么项目，有过一段实习经历，具体做了什么
研究生在 xx，实习经历，研究生期间做了什么项目，从项目中学到了什么（提了防抖节流，后面就让我手写防抖节流函数了o(╥﹏╥)o）

为什么选择前端

介绍完毕，先问我为什么选择前端？（其实我也不知道为什么，当初本科毕设做大项目被分去做前端就一直做到现在，太惨了。）

一本正经解释了一下自己选择前端的理由，感觉说的很一般，感觉之后得去研究一下这方面话术。

基础知识拷打

写到这么晚我太饿了，头晕眼花，先把题目记下来，后面仔细分析吧

h5标签有哪些

一上来我脑子都是空白的，绞尽脑汁才想出来h5标签是啥

HTML5 新元素 | 菜鸟教程 (runoob.com)

为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如: 图形的绘制，多媒体内容，更好的页面结构，更好的形式处理，和几个api拖放元素，定位，包括网页应用程序缓存，存储，网络工作者，等。

<canvas> 新元素

标签	描述
<canvas>	标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API

新多媒体元素

标签	描述
<audio>	定义音频内容
<video>	定义视频（video 或者 movie）
<source>	定义多媒体资源 <video> 和 <audio>
<embed>	定义嵌入的内容，比如插件。
<track>	为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。

新的语义和结构元素

HTML5提供了新的元素来创建更好的页面结构：

标签	描述
<article>	定义页面独立的内容区域。
<aside>	定义页面的侧边栏内容。
<bdi>	允许您设置一段文本，使其脱离其父元素的文本方向设置。
<command>	定义命令按钮，比如单选按钮、复选框或按钮
<details>	用于描述文档或文档某个部分的细节
<dialog>	定义对话框，比如提示框
<summary>	标签包含 details 元素的标题
<figure>	规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption>	定义 <figure> 元素的标题
<footer>	定义 section 或 document 的页脚。
<header>	定义了文档的头部区域
<section>	定义文档中的节（section、区段）。

为什么添加了这些标签

文档流是什么，如何改变文档流内元素的排布

文档流是由 CSS 定位语句定义的页面元素的排列，以及 HTML 元素的顺序。也就是说，每个元素如何占用空间以及其他元素如何相应地定位自己。

float和position：absolute、fixed可以改变文档流

行内元素与块级元素的区别

position都有什么

absolute和relative都是什么意思

代码实现一个div水平垂直居中

容器A中包含B，B元素的宽和高都未知，让B元素在A中水平垂直居中

CSS选择器优先级

内联样式 > id选择器 > 类选择器、伪类选择器和属性选择器 > 元素选择器和伪元素选择器 > 通配符选择器、后代选择器

JS == 和 === 的区别

null和undefined相等吗

null == undefined，但在非严格相等中，null与undefined互相相等且不与其他任何元素相等

js中的类型比较：

返回的是布尔值
字符串互相比较，先比较第一个字母的大小，越靠后的越大
不同类型相互比较，先全部转换为数字，再进行比较
对于非严格相等，null == undefined，不等于其他元素，与其他比较符号是相互独立的逻辑。因此，

null > 0 //False 因为null被转换为了0
null >= 0 //True 因为null被转换为了0
null == undefined  // True
null == 0  // False

箭头函数与普通有哪些不同

原型对象与this

箭头函数没有原型对象，因此也没有this，普通函数是由Function创建的实例，因此普通函数.prototype = Function

// 箭头函数
let a = () => {};
console.log(a.prototype); // undefined

// 普通函数
function a() {};
console.log(a.prototype); // {constructor:f}

可以new吗？

箭头函数不能作为构造函数使用

构造函数的new都做了些什么？简单来说，分为四步： ① JS内部首先会先生成一个对象； ② 再把函数中的this指向该对象； ③ 然后执行构造函数中的语句； ④ 最终返回该对象实例。

箭头函数没有arguments

箭头函数不绑定arguments，取而代之用rest参数...代替arguments对象，来访问箭头函数的参数列表

// 普通函数
function A(a){
  console.log(arguments);
}
A(1,2,3,4,5,8);  //  [1, 2, 3, 4, 5, 8, callee: ƒ, Symbol(Symbol.iterator): ƒ]

// 箭头函数
let B = (b)=>{
  console.log(arguments);
}
B(2,92,32,32);   // Uncaught ReferenceError: arguments is not defined

// rest参数...
let C = (...c) => {
  console.log(c);
}
C(3,82,32,11323);  // [3, 82, 32, 11323]

箭头函数不能用作Generator函数，不能使用yield关键字

函数声明与函数表达式的区别

没太理解他的意思，于是他写了一段代码

const a = ()=>{}
function b(){}

// 问题：这两种使用方式正确吗
a()
b()

跨域问题

跨域指的是什么

有哪些跨域的方式？

www.meituan.com和www.wmeituan.com以及www.i.meituan.com算跨域吗算跨域，同源策略要求协议、端口号、主域名与子域名必须全部相同

CROS具体如何跨域

具体使用什么字段，怎么设置

Nginx如何跨域

Nginx跨域解决配置示例 - 掘金 (juejin.cn)

HTTP报文包括什么内容

「前端技术基础」HTTP 报文 - 知乎 (zhihu.com)

在CROS问题里面提到了http头，于是又问了这个问题。

HTTP 报文，分为请求报文和响应报文，它们都是由三部分组成：头行、头部和主体

HTTP 请求：请求行、请求头、请求体
HTTP 响应：响应行、响应头、响应体

代码题

使用XML写一个异步请求

使用xml 使用post 异步获取后端接口为/meituan/i/a 的数据 JS XMLHttpRequest入门教程（非常详细） (biancheng.net) （记不起来具体方法是什么，写了伪代码，和他说了思路）

手写防抖函数

递归函数遍历对象

给定一个对象，检查一个对象中是否存在指定的key值poi_id，如果存在则在同层级检测是否存在poi_id_str，如果不存在poi_id_str，将key值的路径输出。

举例：const test = {a: {poi_id: 1, b: {poi_id: 2, poi_id_str: '1111'}}} 

输出： a.poi_id

【面试总结】美团面试官在一个小时内都问了什么问题？