前言
最近在看一些面经，去看看别人面试遇到的题目，然后每看一篇面经就整理一次题目及答案。（之后大概率会持续更新）
关于本文
本文是因为最近投了个滴滴的前端实习岗位，所以在牛客查了查有关滴滴的面经，于是乎看到这个 滴滴sp前端一面 ，整理了一下关于里面题目的答案。当然啦，如果哪里讲得不好的或是讲错的，还是希望大家评论纠正一下我的错误。（涉及到React的题目暂时不讲解，作者时间安排还没学React>_<）
滴滴sp一面题目及解答
1. 手写发布订阅模式
直接第一题我就懵了，想不明白直接到掘金查了查发布订阅模式，原来是有关设计模式的知识。这一块的知识缺了，那就补，因为我还没搞懂这里暂且就不详解了。
2. Vue的双向绑定原理
Vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter、getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
- ① 实现数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
- ② 实现一个指令解析器Compile
- ③ 实现一个Watcher，作为Observer 和 Compile 的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图
- ④ Mvvm入口函数，整合以上三者
3. Vue和React的区别
「相同点：」
- ① 都使用
Virtural Dom - ② 都使用组件化思想，流程基本一致
- ③ 都有成熟的社区，都支持服务端渲染
「不同点：」
- ① 组件通信不同
- ② 模板渲染方式不同
- ③ Diff算法不同
- ④ 事件机制不同
- ⑤ 监听数据变化的实现原理不同
（这里希望大家能帮我补充一下）
4. Webpack了解过吗，讲一下怎么做的？loder和plugin的区别
（1）是什么？
- Webpack是一个模块打包工具，可以使用它管理项目中的模块依赖，并编译输出模块所需的静态文件。它可以很好地管理、打包开发中所用到的HTML、CSS、JS和静态文件等，让开发更高效。对于不同类型的依赖，webpack有对应的模块加载器，而且会分析模块依赖间的依赖关系，最后合并生成优化的静态资源。
（2）怎么做的？（基本功能、工作原理）
- 代码转换、文件优化、代码分割、模块合并、自动刷新、代码校验、自动发布
（3）loder 和 plugin的区别
- 「loder」是使webpack拥有加载和解析非js文件的能力
- 「plugin」可以拓展webpack的功能，使得webpack更加灵活。可以在构建的过程中通过webpack的api改变输出的结果
5. Axios了解吗？Jsonp原理是什么？
（1） Axios是什么？
- axios是一个基于promise的HTTP库，可以用在浏览器和node.js中
（2）「Axios有什么特性」？（拓展）
- 从浏览器中创建
XMLHttpRequests - 从node.js创建http请求
- 支持Promise Api
- 拦截请求和响应
- 可以取消请求
- 自动转换JSON数据
- 客户端支持防御XSRF
（3）Jsonp是什么？（Jsonp原理）
- 通过动态创建script标签，其src指向非同源的url，并传递一个callback参数作为函数名的函数的调用和一系列参数，页面接收到响应后执行回调并对数据进行处理
6. 手写ajax，readyState=1、2、3代表什么？
（1）手写ajax（简易版）
function ajax ( url , successFn ){
const xhr = new XMLHttpRequest()
xhr.open( 'GET' , url , true)
xhr.onreadystatechange = function() {
if( xhr.readyState == 4 ){
if( xhr.status == 200 ){
successFn(xhr.responseText)
}
}
}
xhr.send(null)
}
（2）readyState 是什么？readyState=1、2、3代表什么？
- 是HTTP请求的状态，当一个XMLHttpRequest初次创建时，这个属性的值从0开始，直到接收到完整的HTTP响应，这个值增加到4
- 0：（「未初始化」）对象已建立，但是尚未初始化（尚未调用到open方法）
- 1：（「初始化」）对象已建立，尚未调用
send方法 - 2：（「发送数据」）
send方法已调用，但是当前的状态及http头未知 - 3：（「数据传送中」）已接收部分数据，因为响应及http头不全，这时通过
responseBody和responseText获取部分数据会出现错误 - 4：（「完成」）数据接收完毕，此时可以通过
responseXml和responseText获取完整的回应数据
7. 讲讲深拷贝和浅拷贝
这里参考 聊聊对象深拷贝和浅拷贝
浅拷贝：创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址，所以如果其中一个对象改变了这个地址，就会影响到另一个对象
「浅拷贝方法」
Objcet.assign- 拓展运算符…
Array.prototype.sliceArray.prototype.concat
深拷贝：将一个对象从内存中完整的拷贝一份出来，从堆内存中开辟一个新的区域存放新对象，且修改新对象不会影响原对象
「深拷贝方法」
JSON.stringify()- 手写深拷贝
8. 手写深拷贝
老题目直接上代码了
function deepClone( obj = { } ){
if( typeof obj !== 'object' || obj == null ){
return obj
}
let result
if( obj instanceof Array ){
result = [ ]
} else {
result = { }
}
for( let key in obj ){
if( obj.hasOwnProperty(key) ){
result[key] = deepClone( obj[key] )
}
}
return result
}
9. setTimeout是怎么实现的？放入到队列中吗？代码什么时候放入？
这题我本来也就想着是一个简单的有关任务队列、讲一下Event loop的题目，但是我看了一下这篇面经主人写的回答是这样的
❝不是用队列实现的，是用hash对象实现的，是代码遇到时才放入
❞
--滴滴sp前端一面
我一下子也没想明白是啥意思，我搜了一下相关的知识，也搜不到，不知道有没有大佬能给我科普一下
10. 箭头函数和普通函数有什么区别
「箭头函数区别：」
- ① 不能通过 new 关键字调用, 没有原型
- ② 不可以改变 this 绑定，由外层非箭头函数决定，所以使用 call, apply, bind 也不会影响
- ③ 不支持 arguments，所以根据作用域链，会拿到外层函数的 arguments
- ④ 不支持重复命名参数
- ⑤ 隐式返回
11. 讲讲http和https
这里参考 「查缺补漏」巩固你的HTTP知识体系
HTTP
「http优点」：
- ①灵活可扩展。一个是语法上只规定了基本格式，空格分隔单词，换行分隔字段等。另外一个就是传输形式上不仅可以传输文本， 还可以传输图片，视频等任意数据
- ②请求-应答模式。通常而言，就是一方发送消息，另外一方要 接受消息，或者是做出相应等
- ③可靠传输。HTTP是基于TCP/IP，因此把这一特性继承了下来。
- ④无状态。这个分场景回答即可
「http缺点」：
- ①无状态，有时候，需要保存信息，比如像购物系统，需要保留下顾客信息等等，另外一方面，有时候，无状态也会减少网络开 销，比如类似直播行业这样子等，这个还是分场景来说
- ②明文传输，即协议里的报文(主要指的是头部)不使用二进制数据，而是文本形式。这让HTTP的报文信息暴露给了外界，给攻击者带来了便利
- ③队头阻塞，当http开启长连接时，共用一个TCP连接，当某个请求时间过长时，其他的请求只能处于阻塞状态，这就是队头阻塞问题。
HTTPS
HTTPS 要比 HTTP 多了 secure 安全性这个概念，实际上， HTTPS 并不是一个新的应用层协议，它其实就是 HTTP + TLS/SSL 协议组合而成，而安全性的保证正是 SSL/TLS 所做的工作。
区别：
- HTTP 是明文传输协议，HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比 HTTP 协议安全
- HTTPS比HTTP更加安全，对搜索引擎更友好，利于SEO,谷歌、百度优先索引HTTPS网页
- HTTPS标准端口443，HTTP标准端口80
- HTTPS需要用到SSL证书，而HTTP不用
写在文末
这是第一篇有关我整理面经中题目的文章，之后还会继续更新，如果你觉得我写得还不错的话，可以给我点个赞哦^^。看了一些面经以及面试题之后，还是觉得自己要更加努力才行，因为还有很多没完全掌握的知识点，如果面试官稍微问深一点，可能我就会答不上来了，keep going!
其它文章
本文使用 mdnice 排版
