美团前端暑期实习

### 美团

美团前端实习一面3.16 5:00-6:00左右

总共面了1个小时，面试官是个小伙子。

感觉面了很多面试题，自己试着回想一下吧。

1. 项目相关

首先上来自我介绍+项目介绍完成，还是问项目中的微前端的qinakun框架使用流程以及一些怎么在父应用中使用子应用。

目前可以实现微前端技术有哪些方式，qiankun、iframe、single-spa，以及它们的区别和优缺点。

2. history路由是如何实现的（底层实现），与hash路由的区别，以及各自的优缺点。

hash模式

hash优点:

(1)只需要前端配置路由表, 不需要后端的参与
(2) 兼容性好, 浏览器都能支持
(3) hash值改变不会向后端发送请求, 完全属于前端路由

hash缺点：

存在一个#，url不美观

history模式

优点:
(1) 符合url地址规范, 不需要#, 使用起来比较美观
缺点:
(1) 在用户手动输入地址或刷新页面时会发起url请求, 后端需要配置index.html页面用户匹配不到静态资源的情况, 否则会出现404错误
(2) 兼容性比较差, 是利用了 HTML5 History对象中新增的 pushState() 和 replaceState() 方法,需要特定浏览器的支持.

3. vue的v-model指令即双向数据绑定是如何实现的？Object.defineProperty()和new Proxy()实现双向数据绑定的区别以及优缺点。

4. vue中怎么观察data数据变化的，在什么时候观察到的（created()之后?）

5. 深克隆浅克隆？区别以及怎么实现一个深克隆

数组：[...arr] 、Array.from(arr)

对象：用for in遍历key，然后用JSON.stringify()和JSON.parse()来实现对象的克隆（这里主要考虑到value值也可能是个复杂数据类型对象形式）

  6.宏任务微任务（听都没听过，这啥呀这是！）

异步任务之间，会存在差异，所以它们执行的优先级也会有区别。
大致分为 微任务（microtask，如：[Promise](https://so.csdn.net/so/search?q=Promise&spm=1001.2101.3001.7020)、MutaionObserver等）和
宏任务（macrotask，如：setTimeout、setInterval、I/O等）。

1、setTimeout 定时器，属于js任务队列里的宏任务。
指的是把任务队列塞进执行栈里等待执行线程依次执行。虽然可以把它设置为0，但是仍然需要等待本轮执行环境里面的 **所有同步和异步任务** 执行完毕之后才会去执行它。

2、promise es6的异步语法，属于js任务队列里的微任务。
在执行本轮宏任务的过程中，如果遇到promise，会将其塞入本轮执行过程的微任务，**待本轮宏任务执行完毕之后，才会执行它**。执行完毕之后，开始执行下一轮任务队列。

总结：

（1）存在微任务的话，那么就执行所有的微任务

（2）微任务都执行完之后，执行下一个宏任务

7. 了解Promise吗？读代码写输出：

```js
console.log("start")
setTimeout(() => {//宏任务
    console.log("ddd")
}, 0)
new Promise((resolve, reject) => {
    console.log("eee")  //这是个同步代码，会立即执行的
    resolve(22)
}).then(() => {//微任务
  console.log("fff")  
}).then(() => {
    console.log("ggg")
})
console.log("end")//完蛋我写错了
// 正确顺序是start  eee  end   fff   ggg  ddd
```

```
console.log('script start')

async function async1() {
  await async2()
  console.log('async1 end')
}
async function async2() {
  console.log('async2 end')
}
async1()//执行这个函数的同时，依然在执行之后的代码，因为并没有await async1(),只是async1函数中有await

setTimeout(function() {
  console.log('setTimeout')
}, 0)

new Promise(resolve => {
  console.log('Promise')
  resolve()
})
  .then(function() {
    console.log('promise1')
  })
  .then(function() {
    console.log('promise2')
  })

console.log('script end')
```

```
script start
async2 end
Promise
script end
async1 end
promise1
promise2
setTimeout
```

8. new之后都执行了什么操作

  9.实现跨域的几种方式，及其优缺点

Jsonp方式有什么缺点？

jsonp的缺点：http请求只    支持get方法；jsonp在调用失败的时候不会返回各种HTTP状态码

10. css的定位，有几种，分别阐述下区别

11. 算法题：返回最长的不重复子序列长度：

比如：

[1,2,3,4] 返回4

[1,1,3,2,2,4] 返回3

思路：用map做

 12.反问：什么时候知道面试结果（1周内）+还需要提升哪（底层实现原理能力）+你有博客文章输出吗关注下大佬（推荐用掘金）
#美团前端面经##面经##前端#