美团前端暑期实习
### 美团
美团前端实习一面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周内）+还需要提升哪（底层实现原理能力）+你有博客文章输出吗关注下大佬（推荐用掘金）
#美团前端面经##面经##前端#
美团前端实习一面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周内）+还需要提升哪（底层实现原理能力）+你有博客文章输出吗关注下大佬（推荐用掘金）
#美团前端面经##面经##前端#
同程旅行工作强度 20人发布
