├── README.md
└── datum
    └── summary.md


/README.md:
--------------------------------------------------------------------------------
  1 | # Daily-Interview-Question
  2 | 
  3 | 工作日每天一道前端大厂面试题，祝大家天天进步，一年后会看到不一样的自己。
  4 | 
  5 | 欢迎 PR 你认为不错的面试题，欢迎在 Issue 区留下你的答案，共同参与这个伟大的项目。
  6 | 
  7 | <br/>
  8 | 
  9 | 
 10 | ## 今日面试题
 11 | 
 12 | 2019-04-19
 13 | 
 14 | > 第 58 题：箭头函数与普通函数（function）的区别是什么？构造函数（function）可以使用 new 生成实例，那么箭头函数可以吗？为什么？
 15 | 
 16 | 欢迎在 Issue 区留下你的答案
 17 | 
 18 | <br/>
 19 | 
 20 | 
 21 | ## 本周汇总
 22 | 
 23 | 2019-04-18
 24 | 
 25 | > 第 57 题：分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景。 
 26 | 
 27 | 解析：[第 57 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/100)
 28 | 
 29 | <br/>
 30 | 
 31 | 
 32 | 2019-04-17
 33 | 
 34 | > 第 56 题：要求设计 LazyMan 类，实现以下功能。 
 35 | 
 36 | ```js
 37 | LazyMan('Tony');
 38 | // Hi I am Tony
 39 | 
 40 | LazyMan('Tony').sleep(10).eat('lunch');
 41 | // Hi I am Tony
 42 | // 等待了10秒...
 43 | // I am eating lunch
 44 | 
 45 | LazyMan('Tony').eat('lunch').sleep(10).eat('dinner');
 46 | // Hi I am Tony
 47 | // I am eating lunch
 48 | // 等待了10秒...
 49 | // I am eating diner
 50 | 
 51 | LazyMan('Tony').eat('lunch').eat('dinner').sleepFirst(5).sleep(10).eat('junk food');
 52 | // Hi I am Tony
 53 | // 等待了5秒...
 54 | // I am eating lunch
 55 | // I am eating dinner
 56 | // 等待了10秒...
 57 | // I am eating junk food
 58 | ```
 59 | 
 60 | 解析：[第 56 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/98)
 61 | 
 62 | <br/>
 63 | 
 64 | 
 65 | 
 66 | 2019-04-16
 67 | 
 68 | > 第 55 题：某公司 1 到 12 月份的销售额存在一个对象里面，如下：{1:222, 2:123, 5:888}，请把数据处理为如下结构：[222, 123, null, null, 888, null, null, null, null, null, null, null]。
 69 | 
 70 | 解析：[第 55 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/96)
 71 | 
 72 | <br/>
 73 | 
 74 | 
 75 | 
 76 | 2019-04-15
 77 | 
 78 | > 第 54 题：冒泡排序如何实现，时间复杂度是多少， 还可以如何改进？
 79 | 
 80 | 解析：[第 54 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/94)
 81 | 
 82 | <br/>
 83 | 
 84 | 
 85 | 
 86 | ## 历史汇总
 87 | 
 88 | -   [前端面试题及答案汇总](https://github.com/Advanced-Frontend/Daily-Interview-Question/blob/master/datum/summary.md)
 89 | 
 90 | <br/>
 91 | 
 92 | 
 93 | 
 94 | ## 半月刊
 95 | 
 96 | - [【半月刊 1】前端高频面试题及答案汇总](https://juejin.im/post/5c6977e46fb9a049fd1063dc)
 97 | - [【半月刊 2】前端高频面试题及答案汇总](https://juejin.im/post/5c7bd72ef265da2de80f7f17)
 98 | - [【半月刊 3】前端高频面试题及答案汇总](https://juejin.im/post/5c9ac3f66fb9a070e056718f)
 99 | - [【半月刊 4】前端高频面试题及答案汇总](https://juejin.im/post/5cb3376bf265da039c0543da)
100 | 
101 | <br/>
102 | 
103 | 
104 | 
105 | ## 交流
106 | 
107 | 进阶系列文章汇总如下，觉得不错点个 star，欢迎 **加群** 互相学习。
108 | 
109 | > [https://github.com/yygmind/blog](https://github.com/yygmind/blog)
110 | 
111 | 我是木易杨，公众号「高级前端进阶」作者，跟着我**每周重点攻克一个前端面试重难点**。接下来让我带你走进高级前端的世界，在进阶的路上，共勉！
112 | 
113 | ![image](https://github.com/yygmind/blog/raw/master/images/weixin_re.png)
114 | 


--------------------------------------------------------------------------------
/datum/summary.md:
--------------------------------------------------------------------------------
  1 | <!-- START doctoc generated TOC please keep comment here to allow auto update -->
  2 | <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
  3 | 
  4 | 
  5 | - [前端面试题及答案汇总](#%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98%E5%8F%8A%E7%AD%94%E6%A1%88%E6%B1%87%E6%80%BB)
  6 |   - [第 1 题：写 React / Vue 项目时为什么要在列表组件中写 key，其作用是什么？](#%E7%AC%AC-1-%E9%A2%98%E5%86%99-react--vue-%E9%A1%B9%E7%9B%AE%E6%97%B6%E4%B8%BA%E4%BB%80%E4%B9%88%E8%A6%81%E5%9C%A8%E5%88%97%E8%A1%A8%E7%BB%84%E4%BB%B6%E4%B8%AD%E5%86%99-key%E5%85%B6%E4%BD%9C%E7%94%A8%E6%98%AF%E4%BB%80%E4%B9%88)
  7 |   - [第 2 题：`['1', '2', '3'].map(parseInt)` what & why ?](#%E7%AC%AC-2-%E9%A2%981-2-3mapparseint-what--why-)
  8 |   - [第 3 题：什么是防抖和节流？有什么区别？如何实现？](#%E7%AC%AC-3-%E9%A2%98%E4%BB%80%E4%B9%88%E6%98%AF%E9%98%B2%E6%8A%96%E5%92%8C%E8%8A%82%E6%B5%81%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0)
  9 |   - [第 4 题：介绍下 Set、Map、WeakSet 和 WeakMap 的区别？](#%E7%AC%AC-4-%E9%A2%98%E4%BB%8B%E7%BB%8D%E4%B8%8B-setmapweakset-%E5%92%8C-weakmap-%E7%9A%84%E5%8C%BA%E5%88%AB)
 10 |   - [第 5 题：介绍下深度优先遍历和广度优先遍历，如何实现？](#%E7%AC%AC-5-%E9%A2%98%E4%BB%8B%E7%BB%8D%E4%B8%8B%E6%B7%B1%E5%BA%A6%E4%BC%98%E5%85%88%E9%81%8D%E5%8E%86%E5%92%8C%E5%B9%BF%E5%BA%A6%E4%BC%98%E5%85%88%E9%81%8D%E5%8E%86%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0)
 11 |   - [第 6 题：请分别用深度优先思想和广度优先思想实现一个拷贝函数？](#%E7%AC%AC-6-%E9%A2%98%E8%AF%B7%E5%88%86%E5%88%AB%E7%94%A8%E6%B7%B1%E5%BA%A6%E4%BC%98%E5%85%88%E6%80%9D%E6%83%B3%E5%92%8C%E5%B9%BF%E5%BA%A6%E4%BC%98%E5%85%88%E6%80%9D%E6%83%B3%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E6%8B%B7%E8%B4%9D%E5%87%BD%E6%95%B0)
 12 |   - [第 7 题：ES5/ES6 的继承除了写法以外还有什么区别？](#%E7%AC%AC-7-%E9%A2%98es5es6-%E7%9A%84%E7%BB%A7%E6%89%BF%E9%99%A4%E4%BA%86%E5%86%99%E6%B3%95%E4%BB%A5%E5%A4%96%E8%BF%98%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB)
 13 |   - [第 8 题：setTimeout、Promise、Async/Await 的区别](#%E7%AC%AC-8-%E9%A2%98settimeoutpromiseasyncawait-%E7%9A%84%E5%8C%BA%E5%88%AB)
 14 |   - [第 9 题：Async/Await 如何通过同步的方式实现异步](#%E7%AC%AC-9-%E9%A2%98asyncawait-%E5%A6%82%E4%BD%95%E9%80%9A%E8%BF%87%E5%90%8C%E6%AD%A5%E7%9A%84%E6%96%B9%E5%BC%8F%E5%AE%9E%E7%8E%B0%E5%BC%82%E6%AD%A5)
 15 |   - [第 10 题：异步笔试题](#%E7%AC%AC-10-%E9%A2%98%E5%BC%82%E6%AD%A5%E7%AC%94%E8%AF%95%E9%A2%98)
 16 |   - [第 11 题：算法手写题](#%E7%AC%AC-11-%E9%A2%98%E7%AE%97%E6%B3%95%E6%89%8B%E5%86%99%E9%A2%98)
 17 |   - [第 12 题：JS 异步解决方案的发展历程以及优缺点。](#%E7%AC%AC-12-%E9%A2%98js-%E5%BC%82%E6%AD%A5%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88%E7%9A%84%E5%8F%91%E5%B1%95%E5%8E%86%E7%A8%8B%E4%BB%A5%E5%8F%8A%E4%BC%98%E7%BC%BA%E7%82%B9)
 18 |   - [第 13 题：Promise 构造函数是同步执行还是异步执行，那么 then 方法呢？](#%E7%AC%AC-13-%E9%A2%98promise-%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%E6%98%AF%E5%90%8C%E6%AD%A5%E6%89%A7%E8%A1%8C%E8%BF%98%E6%98%AF%E5%BC%82%E6%AD%A5%E6%89%A7%E8%A1%8C%E9%82%A3%E4%B9%88-then-%E6%96%B9%E6%B3%95%E5%91%A2)
 19 |   - [第 14 题：情人节福利题，如何实现一个 new](#%E7%AC%AC-14-%E9%A2%98%E6%83%85%E4%BA%BA%E8%8A%82%E7%A6%8F%E5%88%A9%E9%A2%98%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA-new)
 20 |   - [第 15 题：简单讲解一下http2的多路复用](#%E7%AC%AC-15-%E9%A2%98%E7%AE%80%E5%8D%95%E8%AE%B2%E8%A7%A3%E4%B8%80%E4%B8%8Bhttp2%E7%9A%84%E5%A4%9A%E8%B7%AF%E5%A4%8D%E7%94%A8)
 21 |   - [第 16 题：谈谈你对TCP三次握手和四次挥手的理解](#%E7%AC%AC-16-%E9%A2%98%E8%B0%88%E8%B0%88%E4%BD%A0%E5%AF%B9tcp%E4%B8%89%E6%AC%A1%E6%8F%A1%E6%89%8B%E5%92%8C%E5%9B%9B%E6%AC%A1%E6%8C%A5%E6%89%8B%E7%9A%84%E7%90%86%E8%A7%A3)
 22 |   - [第 17 题：A、B 机器正常连接后，B 机器突然重启，问 A 此时处于 TCP 什么状态](#%E7%AC%AC-17-%E9%A2%98ab-%E6%9C%BA%E5%99%A8%E6%AD%A3%E5%B8%B8%E8%BF%9E%E6%8E%A5%E5%90%8Eb-%E6%9C%BA%E5%99%A8%E7%AA%81%E7%84%B6%E9%87%8D%E5%90%AF%E9%97%AE-a-%E6%AD%A4%E6%97%B6%E5%A4%84%E4%BA%8E-tcp-%E4%BB%80%E4%B9%88%E7%8A%B6%E6%80%81)
 23 |   - [第 18 题：React 中 setState 什么时候是同步的，什么时候是异步的？](#%E7%AC%AC-18-%E9%A2%98react-%E4%B8%AD-setstate-%E4%BB%80%E4%B9%88%E6%97%B6%E5%80%99%E6%98%AF%E5%90%8C%E6%AD%A5%E7%9A%84%E4%BB%80%E4%B9%88%E6%97%B6%E5%80%99%E6%98%AF%E5%BC%82%E6%AD%A5%E7%9A%84)
 24 |   - [第 19 题：React setState 笔试题，下面的代码输出什么？](#%E7%AC%AC-19-%E9%A2%98react-setstate-%E7%AC%94%E8%AF%95%E9%A2%98%E4%B8%8B%E9%9D%A2%E7%9A%84%E4%BB%A3%E7%A0%81%E8%BE%93%E5%87%BA%E4%BB%80%E4%B9%88)
 25 |   - [第 20 题：介绍下 npm 模块安装机制，为什么输入 npm install 就可以自动安装对应的模块？](#%E7%AC%AC-20-%E9%A2%98%E4%BB%8B%E7%BB%8D%E4%B8%8B-npm-%E6%A8%A1%E5%9D%97%E5%AE%89%E8%A3%85%E6%9C%BA%E5%88%B6%E4%B8%BA%E4%BB%80%E4%B9%88%E8%BE%93%E5%85%A5-npm-install-%E5%B0%B1%E5%8F%AF%E4%BB%A5%E8%87%AA%E5%8A%A8%E5%AE%89%E8%A3%85%E5%AF%B9%E5%BA%94%E7%9A%84%E6%A8%A1%E5%9D%97)
 26 |   - [第 21 题：有以下 3 个判断数组的方法，请分别介绍它们之间的区别和优劣](#%E7%AC%AC-21-%E9%A2%98%E6%9C%89%E4%BB%A5%E4%B8%8B-3-%E4%B8%AA%E5%88%A4%E6%96%AD%E6%95%B0%E7%BB%84%E7%9A%84%E6%96%B9%E6%B3%95%E8%AF%B7%E5%88%86%E5%88%AB%E4%BB%8B%E7%BB%8D%E5%AE%83%E4%BB%AC%E4%B9%8B%E9%97%B4%E7%9A%84%E5%8C%BA%E5%88%AB%E5%92%8C%E4%BC%98%E5%8A%A3)
 27 |   - [第 22 题：介绍下重绘和回流（Repaint & Reflow），以及如何进行优化](#%E7%AC%AC-22-%E9%A2%98%E4%BB%8B%E7%BB%8D%E4%B8%8B%E9%87%8D%E7%BB%98%E5%92%8C%E5%9B%9E%E6%B5%81repaint--reflow%E4%BB%A5%E5%8F%8A%E5%A6%82%E4%BD%95%E8%BF%9B%E8%A1%8C%E4%BC%98%E5%8C%96)
 28 |   - [第 23 题：介绍下观察者模式和订阅-发布模式的区别，各自适用于什么场景](#%E7%AC%AC-23-%E9%A2%98%E4%BB%8B%E7%BB%8D%E4%B8%8B%E8%A7%82%E5%AF%9F%E8%80%85%E6%A8%A1%E5%BC%8F%E5%92%8C%E8%AE%A2%E9%98%85-%E5%8F%91%E5%B8%83%E6%A8%A1%E5%BC%8F%E7%9A%84%E5%8C%BA%E5%88%AB%E5%90%84%E8%87%AA%E9%80%82%E7%94%A8%E4%BA%8E%E4%BB%80%E4%B9%88%E5%9C%BA%E6%99%AF)
 29 |   - [第 24 题：聊聊 Redux 和 Vuex 的设计思想](#%E7%AC%AC-24-%E9%A2%98%E8%81%8A%E8%81%8A-redux-%E5%92%8C-vuex-%E7%9A%84%E8%AE%BE%E8%AE%A1%E6%80%9D%E6%83%B3)
 30 |   - [第 25 题：说说浏览器和 Node 事件循环的区别](#%E7%AC%AC-25-%E9%A2%98%E8%AF%B4%E8%AF%B4%E6%B5%8F%E8%A7%88%E5%99%A8%E5%92%8C-node-%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF%E7%9A%84%E5%8C%BA%E5%88%AB)
 31 |   - [第 26 题：介绍模块化发展历程](#%E7%AC%AC-26-%E9%A2%98%E4%BB%8B%E7%BB%8D%E6%A8%A1%E5%9D%97%E5%8C%96%E5%8F%91%E5%B1%95%E5%8E%86%E7%A8%8B)
 32 |   - [第 27 题：全局作用域中，用 const 和 let 声明的变量不在 window 上，那到底在哪里？如何去获取？。](#%E7%AC%AC-27-%E9%A2%98%E5%85%A8%E5%B1%80%E4%BD%9C%E7%94%A8%E5%9F%9F%E4%B8%AD%E7%94%A8-const-%E5%92%8C-let-%E5%A3%B0%E6%98%8E%E7%9A%84%E5%8F%98%E9%87%8F%E4%B8%8D%E5%9C%A8-window-%E4%B8%8A%E9%82%A3%E5%88%B0%E5%BA%95%E5%9C%A8%E5%93%AA%E9%87%8C%E5%A6%82%E4%BD%95%E5%8E%BB%E8%8E%B7%E5%8F%96)
 33 |   - [第 28 题：cookie 和 token 都存放在 header 中，为什么不会劫持 token？](#%E7%AC%AC-28-%E9%A2%98cookie-%E5%92%8C-token-%E9%83%BD%E5%AD%98%E6%94%BE%E5%9C%A8-header-%E4%B8%AD%E4%B8%BA%E4%BB%80%E4%B9%88%E4%B8%8D%E4%BC%9A%E5%8A%AB%E6%8C%81-token)
 34 |   - [第 29 题：聊聊 Vue 的双向数据绑定，Model 如何改变 View，View 又是如何改变 Model 的](#%E7%AC%AC-29-%E9%A2%98%E8%81%8A%E8%81%8A-vue-%E7%9A%84%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9Amodel-%E5%A6%82%E4%BD%95%E6%94%B9%E5%8F%98-viewview-%E5%8F%88%E6%98%AF%E5%A6%82%E4%BD%95%E6%94%B9%E5%8F%98-model-%E7%9A%84)
 35 |   - [第 30 题：两个数组合并成一个数组](#%E7%AC%AC-30-%E9%A2%98%E4%B8%A4%E4%B8%AA%E6%95%B0%E7%BB%84%E5%90%88%E5%B9%B6%E6%88%90%E4%B8%80%E4%B8%AA%E6%95%B0%E7%BB%84)
 36 |   - [第 31 题：改造下面的代码，使之输出0 - 9，写出你能想到的所有解法。](#%E7%AC%AC-31-%E9%A2%98%E6%94%B9%E9%80%A0%E4%B8%8B%E9%9D%A2%E7%9A%84%E4%BB%A3%E7%A0%81%E4%BD%BF%E4%B9%8B%E8%BE%93%E5%87%BA0---9%E5%86%99%E5%87%BA%E4%BD%A0%E8%83%BD%E6%83%B3%E5%88%B0%E7%9A%84%E6%89%80%E6%9C%89%E8%A7%A3%E6%B3%95)
 37 |   - [第 32 题：Virtual DOM 真的比操作原生 DOM 快吗？谈谈你的想法。](#%E7%AC%AC-32-%E9%A2%98virtual-dom-%E7%9C%9F%E7%9A%84%E6%AF%94%E6%93%8D%E4%BD%9C%E5%8E%9F%E7%94%9F-dom-%E5%BF%AB%E5%90%97%E8%B0%88%E8%B0%88%E4%BD%A0%E7%9A%84%E6%83%B3%E6%B3%95)
 38 |   - [第 33 题：下面的代码打印什么内容，为什么？](#%E7%AC%AC-33-%E9%A2%98%E4%B8%8B%E9%9D%A2%E7%9A%84%E4%BB%A3%E7%A0%81%E6%89%93%E5%8D%B0%E4%BB%80%E4%B9%88%E5%86%85%E5%AE%B9%E4%B8%BA%E4%BB%80%E4%B9%88)
 39 |   - [第 34 题：简单改造下面的代码，使之分别打印 10 和 20。](#%E7%AC%AC-34-%E9%A2%98%E7%AE%80%E5%8D%95%E6%94%B9%E9%80%A0%E4%B8%8B%E9%9D%A2%E7%9A%84%E4%BB%A3%E7%A0%81%E4%BD%BF%E4%B9%8B%E5%88%86%E5%88%AB%E6%89%93%E5%8D%B0-10-%E5%92%8C-20)
 40 |   - [第 35 题：浏览器缓存读取规则](#%E7%AC%AC-35-%E9%A2%98%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BC%93%E5%AD%98%E8%AF%BB%E5%8F%96%E8%A7%84%E5%88%99)
 41 |   - [第 36 题：使用迭代的方式实现 flatten 函数。](#%E7%AC%AC-36-%E9%A2%98%E4%BD%BF%E7%94%A8%E8%BF%AD%E4%BB%A3%E7%9A%84%E6%96%B9%E5%BC%8F%E5%AE%9E%E7%8E%B0-flatten-%E5%87%BD%E6%95%B0)
 42 |   - [第 37 题：为什么 Vuex 的 mutation 和 Redux 的 reducer 中不能做异步操作？](#%E7%AC%AC-37-%E9%A2%98%E4%B8%BA%E4%BB%80%E4%B9%88-vuex-%E7%9A%84-mutation-%E5%92%8C-redux-%E7%9A%84-reducer-%E4%B8%AD%E4%B8%8D%E8%83%BD%E5%81%9A%E5%BC%82%E6%AD%A5%E6%93%8D%E4%BD%9C)
 43 |   - [第 38 题：下面代码中 a 在什么情况下会打印 1？](#%E7%AC%AC-38-%E9%A2%98%E4%B8%8B%E9%9D%A2%E4%BB%A3%E7%A0%81%E4%B8%AD-a-%E5%9C%A8%E4%BB%80%E4%B9%88%E6%83%85%E5%86%B5%E4%B8%8B%E4%BC%9A%E6%89%93%E5%8D%B0-1)
 44 |   - [第 39 题：介绍下 BFC 及其应用。](#%E7%AC%AC-39-%E9%A2%98%E4%BB%8B%E7%BB%8D%E4%B8%8B-bfc-%E5%8F%8A%E5%85%B6%E5%BA%94%E7%94%A8)
 45 |   - [第 40 题：在 Vue 中，子组件为何不可以修改父组件传递的 Prop](#%E7%AC%AC-40-%E9%A2%98%E5%9C%A8-vue-%E4%B8%AD%E5%AD%90%E7%BB%84%E4%BB%B6%E4%B8%BA%E4%BD%95%E4%B8%8D%E5%8F%AF%E4%BB%A5%E4%BF%AE%E6%94%B9%E7%88%B6%E7%BB%84%E4%BB%B6%E4%BC%A0%E9%80%92%E7%9A%84-prop)
 46 |   - [第 41 题：下面代码输出什么](#%E7%AC%AC-41-%E9%A2%98%E4%B8%8B%E9%9D%A2%E4%BB%A3%E7%A0%81%E8%BE%93%E5%87%BA%E4%BB%80%E4%B9%88)
 47 |   - [第 42 题：实现一个 sleep 函数](#%E7%AC%AC-42-%E9%A2%98%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA-sleep-%E5%87%BD%E6%95%B0)
 48 |   - [第 43 题：使用 sort() 对数组 [3, 15, 8, 29, 102, 22] 进行排序，输出结果](#%E7%AC%AC-43-%E9%A2%98%E4%BD%BF%E7%94%A8-sort-%E5%AF%B9%E6%95%B0%E7%BB%84-3-15-8-29-102-22-%E8%BF%9B%E8%A1%8C%E6%8E%92%E5%BA%8F%E8%BE%93%E5%87%BA%E7%BB%93%E6%9E%9C)
 49 |   - [第 44 题：介绍 HTTPS 握手过程](#%E7%AC%AC-44-%E9%A2%98%E4%BB%8B%E7%BB%8D-https-%E6%8F%A1%E6%89%8B%E8%BF%87%E7%A8%8B)
 50 |   - [第 45 题：HTTPS 握手过程中，客户端如何验证证书的合法性](#%E7%AC%AC-45-%E9%A2%98https-%E6%8F%A1%E6%89%8B%E8%BF%87%E7%A8%8B%E4%B8%AD%E5%AE%A2%E6%88%B7%E7%AB%AF%E5%A6%82%E4%BD%95%E9%AA%8C%E8%AF%81%E8%AF%81%E4%B9%A6%E7%9A%84%E5%90%88%E6%B3%95%E6%80%A7)
 51 |   - [第 46 题：输出以下代码执行的结果并解释为什么](#%E7%AC%AC-46-%E9%A2%98%E8%BE%93%E5%87%BA%E4%BB%A5%E4%B8%8B%E4%BB%A3%E7%A0%81%E6%89%A7%E8%A1%8C%E7%9A%84%E7%BB%93%E6%9E%9C%E5%B9%B6%E8%A7%A3%E9%87%8A%E4%B8%BA%E4%BB%80%E4%B9%88)
 52 |   - [第 47 题：双向绑定和 vuex 是否冲突](#%E7%AC%AC-47-%E9%A2%98%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E5%92%8C-vuex-%E6%98%AF%E5%90%A6%E5%86%B2%E7%AA%81)
 53 |   - [第 48 题：call 和 apply 的区别是什么，哪个性能更好一些](#%E7%AC%AC-48-%E9%A2%98call-%E5%92%8C-apply-%E7%9A%84%E5%8C%BA%E5%88%AB%E6%98%AF%E4%BB%80%E4%B9%88%E5%93%AA%E4%B8%AA%E6%80%A7%E8%83%BD%E6%9B%B4%E5%A5%BD%E4%B8%80%E4%BA%9B)
 54 |   - [第 49 题：为什么通常在发送数据埋点请求的时候使用的是 1x1 像素的透明 gif 图片？](#%E7%AC%AC-49-%E9%A2%98%E4%B8%BA%E4%BB%80%E4%B9%88%E9%80%9A%E5%B8%B8%E5%9C%A8%E5%8F%91%E9%80%81%E6%95%B0%E6%8D%AE%E5%9F%8B%E7%82%B9%E8%AF%B7%E6%B1%82%E7%9A%84%E6%97%B6%E5%80%99%E4%BD%BF%E7%94%A8%E7%9A%84%E6%98%AF-1x1-%E5%83%8F%E7%B4%A0%E7%9A%84%E9%80%8F%E6%98%8E-gif-%E5%9B%BE%E7%89%87)
 55 |   - [第 50 题：实现 (5).add(3).minus(2) 功能。](#%E7%AC%AC-50-%E9%A2%98%E5%AE%9E%E7%8E%B0-5add3minus2-%E5%8A%9F%E8%83%BD)
 56 |   - [第 51 题：Vue 的响应式原理中 Object.defineProperty 有什么缺陷？](#%E7%AC%AC-51-%E9%A2%98vue-%E7%9A%84%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86%E4%B8%AD-objectdefineproperty-%E6%9C%89%E4%BB%80%E4%B9%88%E7%BC%BA%E9%99%B7)
 57 |   - [第 52 题：怎么让一个 div 水平垂直居中](#%E7%AC%AC-52-%E9%A2%98%E6%80%8E%E4%B9%88%E8%AE%A9%E4%B8%80%E4%B8%AA-div-%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD)
 58 |   - [第 53 题：输出以下代码的执行结果并解释为什么](#%E7%AC%AC-53-%E9%A2%98%E8%BE%93%E5%87%BA%E4%BB%A5%E4%B8%8B%E4%BB%A3%E7%A0%81%E7%9A%84%E6%89%A7%E8%A1%8C%E7%BB%93%E6%9E%9C%E5%B9%B6%E8%A7%A3%E9%87%8A%E4%B8%BA%E4%BB%80%E4%B9%88)
 59 | 
 60 | <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 61 | 
 62 | 
 63 | 
 64 | 
 65 | 
 66 | ## 前端面试题及答案汇总
 67 | 
 68 | 
 69 | 
 70 | ### 第 1 题：写 React / Vue 项目时为什么要在列表组件中写 key，其作用是什么？
 71 | 
 72 | 解析：[第 1 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/1)
 73 | 
 74 | <br/>
 75 | 
 76 | 
 77 | 
 78 | ### 第 2 题：`['1', '2', '3'].map(parseInt)` what & why ?
 79 | 
 80 | 解析：[第 2 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/4)
 81 | 
 82 | <br/>
 83 | 
 84 | 
 85 | 
 86 | ### 第 3 题：什么是防抖和节流？有什么区别？如何实现？
 87 | 
 88 | 解析：[第 3 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/5)
 89 | 
 90 | <br/>
 91 | 
 92 | 
 93 | 
 94 | ### 第 4 题：介绍下 Set、Map、WeakSet 和 WeakMap 的区别？
 95 | 
 96 | 解析：[第 4 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/6)
 97 | 
 98 | <br/>
 99 | 
100 | 
101 | 
102 | ### 第 5 题：介绍下深度优先遍历和广度优先遍历，如何实现？
103 | 
104 | 解析：[第 5 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/9)
105 | 
106 | <br/>
107 | 
108 | 
109 | 
110 | ### 第 6 题：请分别用深度优先思想和广度优先思想实现一个拷贝函数？
111 | 
112 | 解析：[第 6 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/10)
113 | 
114 | <br/>
115 | 
116 | 
117 | 
118 | ### 第 7 题：ES5/ES6 的继承除了写法以外还有什么区别？
119 | 
120 | 解析：[第 7 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/20)
121 | 
122 | <br/>
123 | 
124 | 
125 | 
126 | ### 第 8 题：setTimeout、Promise、Async/Await 的区别
127 | 
128 | 解析：[第 8 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/33)
129 | 
130 | <br/>
131 | 
132 | 
133 | 
134 | ### 第 9 题：Async/Await 如何通过同步的方式实现异步
135 | 
136 | 欢迎在 Issue 区留下你的答案。
137 | 
138 | <br/>
139 | 
140 | 
141 | 
142 | ### 第 10 题：异步笔试题
143 | 
144 | > 请写出下面代码的运行结果
145 | 
146 | ```js
147 | async function async1() {
148 |     console.log('async1 start');
149 |     await async2();
150 |     console.log('async1 end');
151 | }
152 | async function async2() {
153 |     console.log('async2');
154 | }
155 | console.log('script start');
156 | setTimeout(function() {
157 |     console.log('setTimeout');
158 | }, 0)
159 | async1();
160 | new Promise(function(resolve) {
161 |     console.log('promise1');
162 |     resolve();
163 | }).then(function() {
164 |     console.log('promise2');
165 | });
166 | console.log('script end');
167 | ```
168 | 
169 | 解析：[第 10 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/7)
170 | 
171 | <br/>
172 | 
173 | 
174 | 
175 | ### 第 11 题：算法手写题
176 | 
177 | > 已知如下数组：
178 | >
179 | > var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];
180 | >
181 | > 编写一个程序将数组扁平化去并除其中重复部分数据，最终得到一个升序且不重复的数组
182 | 
183 | 解析：[第 11 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/8)
184 | 
185 | <br/>
186 | 
187 | 
188 | 
189 | ### 第 12 题：JS 异步解决方案的发展历程以及优缺点。
190 | 
191 | 解析：[第 12 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/11)
192 | 
193 | <br/>
194 | 
195 | 
196 | 
197 | ### 第 13 题：Promise 构造函数是同步执行还是异步执行，那么 then 方法呢？
198 | 
199 | 解析：[第 13 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/19)
200 | 
201 | <br/>
202 | 
203 | 
204 | 
205 | ### 第 14 题：情人节福利题，如何实现一个 new
206 | 
207 | 解析：[第 14 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/12)
208 | 
209 | <br/>
210 | 
211 | 
212 | 
213 | ### 第 15 题：简单讲解一下http2的多路复用
214 | 
215 | 解析：[第 15 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/14)
216 | 
217 | <br/>
218 | 
219 | 
220 | 
221 | ### 第 16 题：谈谈你对TCP三次握手和四次挥手的理解
222 | 
223 | 解析：[第 16 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/15)
224 | 
225 | <br/>
226 | 
227 | 
228 | 
229 | ### 第 17 题：A、B 机器正常连接后，B 机器突然重启，问 A 此时处于 TCP 什么状态
230 | 
231 | > 如果A 与 B 建立了正常连接后，从未相互发过数据，这个时候 B 突然机器重启，问 A 此时处于 TCP 什么状态？如何消除服务器程序中的这个状态？（超纲题，了解即可）
232 | 
233 | 解析：[第 17 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/21)
234 | 
235 | <br/>
236 | 
237 | 
238 | 
239 | ### 第 18 题：React 中 setState 什么时候是同步的，什么时候是异步的？
240 | 
241 | 解析：[第 18 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/17)
242 | 
243 | <br/>
244 | 
245 | 
246 | 
247 | ### 第 19 题：React setState 笔试题，下面的代码输出什么？
248 | 
249 | ```js
250 | class Example extends React.Component {
251 |   constructor() {
252 |     super();
253 |     this.state = {
254 |       val: 0
255 |     };
256 |   }
257 |   
258 |   componentDidMount() {
259 |     this.setState({val: this.state.val + 1});
260 |     console.log(this.state.val);    // 第 1 次 log
261 | 
262 |     this.setState({val: this.state.val + 1});
263 |     console.log(this.state.val);    // 第 2 次 log
264 | 
265 |     setTimeout(() => {
266 |       this.setState({val: this.state.val + 1});
267 |       console.log(this.state.val);  // 第 3 次 log
268 | 
269 |       this.setState({val: this.state.val + 1});
270 |       console.log(this.state.val);  // 第 4 次 log
271 |     }, 0);
272 |   }
273 | 
274 |   render() {
275 |     return null;
276 |   }
277 | };
278 | ```
279 | 
280 | 解析：[第 19 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/18)
281 | 
282 | <br/>
283 | 
284 | 
285 | 
286 | ### 第 20 题：介绍下 npm 模块安装机制，为什么输入 npm install 就可以自动安装对应的模块？
287 | 
288 | 解析：[第 20 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/22)
289 | 
290 | <br/>
291 | 
292 | 
293 | 
294 | ### 第 21 题：有以下 3 个判断数组的方法，请分别介绍它们之间的区别和优劣
295 | 
296 | > Object.prototype.toString.call() 、 instanceof 以及 Array.isArray() 
297 | 
298 | 解析：[第 21 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/23)
299 | 
300 | <br/>
301 | 
302 | 
303 | 
304 | ### 第 22 题：介绍下重绘和回流（Repaint & Reflow），以及如何进行优化
305 | 
306 | 解析：[第 22 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/24)
307 | 
308 | <br/>
309 | 
310 | 
311 | 
312 | ### 第 23 题：介绍下观察者模式和订阅-发布模式的区别，各自适用于什么场景
313 | 
314 | 解析：[第 23 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/25)
315 | 
316 | <br/>
317 | 
318 | 
319 | 
320 | ### 第 24 题：聊聊 Redux 和 Vuex 的设计思想
321 | 
322 | 解析：[第 24 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/45)
323 | 
324 | <br/>
325 | 
326 | 
327 | 
328 | ### 第 25 题：说说浏览器和 Node 事件循环的区别
329 | 
330 | 解析：[第 25 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/26)
331 | 
332 | <br/> 
333 | 
334 | ### 第 26 题：介绍模块化发展历程
335 | 
336 | 可从IIFE、AMD、CMD、CommonJS、UMD、webpack(require.ensure)、ES Module、`<script type="module">` 这几个角度考虑。
337 | 
338 | 解析：[第 26 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/28)
339 | 
340 | <br/>
341 | 
342 | 
343 | 
344 | ### 第 27 题：全局作用域中，用 const 和 let 声明的变量不在 window 上，那到底在哪里？如何去获取？。
345 | 
346 | 解析：[第 27 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/30)
347 | 
348 | <br/>
349 | 
350 | 
351 | 
352 | ### 第 28 题：cookie 和 token 都存放在 header 中，为什么不会劫持 token？
353 | 
354 | 解析：[第 28 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/31)
355 | 
356 | <br/>
357 | 
358 | 
359 | 
360 | ### 第 29 题：聊聊 Vue 的双向数据绑定，Model 如何改变 View，View 又是如何改变 Model 的
361 | 
362 | 解析：[第 29 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/34)
363 | 
364 | <br/>
365 | 
366 | 
367 | 
368 | ### 第 30 题：两个数组合并成一个数组
369 | 
370 | 请把两个数组 ['A1', 'A2', 'B1', 'B2', 'C1', 'C2', 'D1', 'D2'] 和 ['A', 'B', 'C', 'D']，合并为 ['A1', 'A2', 'A', 'B1', 'B2', 'B', 'C1', 'C2', 'C', 'D1', 'D2', 'D']。
371 | 
372 | 解析： [第 30 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/39)
373 | 
374 | <br/>
375 | 
376 | 
377 | 
378 | ### 第 31 题：改造下面的代码，使之输出0 - 9，写出你能想到的所有解法。
379 | 
380 | ```js
381 | for (var i = 0; i< 10; i++){
382 | 	setTimeout(() => {
383 | 		console.log(i);
384 |     }, 1000)
385 | }
386 | ```
387 | 
388 | 解析：[第 31 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/43)
389 | 
390 | <br/>
391 | 
392 | 
393 | 
394 | ### 第 32 题：Virtual DOM 真的比操作原生 DOM 快吗？谈谈你的想法。
395 | 
396 | 解析：[第 32 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/47)
397 | 
398 | <br/>
399 | 
400 | 
401 | 
402 | ### 第 33 题：下面的代码打印什么内容，为什么？
403 | 
404 | ```js
405 | var b = 10;
406 | (function b(){
407 |     b = 20;
408 |     console.log(b); 
409 | })();
410 | ```
411 | 
412 | 解析：[第 33 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/48)
413 | 
414 | <br/>
415 | 
416 | 
417 | 
418 | ### 第 34 题：简单改造下面的代码，使之分别打印 10 和 20。
419 | 
420 | ```js
421 | var b = 10;
422 | (function b(){
423 |     b = 20;
424 |     console.log(b); 
425 | })();
426 | ```
427 | 
428 | 解析：[第 34 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/51)
429 | 
430 | <br/>
431 | 
432 | 
433 | 
434 | ### 第 35 题：浏览器缓存读取规则
435 | 
436 | 可以分成 Service Worker、Memory Cache、Disk Cache 和 Push Cache，那请求的时候 from memory cache 和 from disk cache 的依据是什么，哪些数据什么时候存放在 Memory Cache 和 Disk Cache中？
437 | 
438 | 解析：[第 35 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/53)
439 | 
440 | <br/>
441 | 
442 | 
443 | 
444 | ### 第 36 题：使用迭代的方式实现 flatten 函数。
445 | 
446 | 解析：[第 36 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/54)
447 | 
448 | <br/>
449 | 
450 | 
451 | 
452 | ### 第 37 题：为什么 Vuex 的 mutation 和 Redux 的 reducer 中不能做异步操作？
453 | 
454 | 解析：[第 37 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/65)
455 | 
456 | <br/>
457 | 
458 | 
459 | 
460 | ### 第 38 题：下面代码中 a 在什么情况下会打印 1？
461 | 
462 | ```js
463 | var a = ?;
464 | if(a == 1 && a == 2 && a == 3){
465 |  	console.log(1);
466 | }
467 | ```
468 | 
469 | 解析：[第 38 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/57)
470 | 
471 | <br/>
472 | 
473 | 
474 | 
475 | ### 第 39 题：介绍下 BFC 及其应用。
476 | 
477 | 解析：[第 39 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/59)
478 | 
479 | <br/>
480 | 
481 | 
482 | 
483 | ### 第 40 题：在 Vue 中，子组件为何不可以修改父组件传递的 Prop
484 | 
485 | 如果修改了，Vue 是如何监控到属性的修改并给出警告的。
486 | 
487 | 解析：[第 40 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/60)
488 | 
489 | <br/>
490 | 
491 | 
492 | 
493 | ### 第 41 题：下面代码输出什么
494 | 
495 | ```js
496 | var a = 10;
497 | (function () {
498 |     console.log(a)
499 |     a = 5
500 |     console.log(window.a)
501 |     var a = 20;
502 |     console.log(a)
503 | })()
504 | ```
505 | 
506 | 解析：[第 41题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/61)
507 | 
508 | <br/>
509 | 
510 | 
511 | 
512 | ### 第 42 题：实现一个 sleep 函数
513 | 
514 | 比如 sleep(1000) 意味着等待1000毫秒，可从 Promise、Generator、Async/Await 等角度实现
515 | 
516 | 解析：[第 42 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/63)
517 | 
518 | <br/>
519 | 
520 | 
521 | 
522 | ### 第 43 题：使用 sort() 对数组 [3, 15, 8, 29, 102, 22] 进行排序，输出结果
523 | 
524 | 解析：[第 43 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/66)
525 | 
526 | <br/>
527 | 
528 | 
529 | 
530 | ### 第 44 题：介绍 HTTPS 握手过程
531 | 
532 | 解析：[第 44 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/70)
533 | 
534 | <br/>
535 | 
536 | 
537 | 
538 | ### 第 45 题：HTTPS 握手过程中，客户端如何验证证书的合法性
539 | 
540 | 解析：[第 45 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/74)
541 | 
542 | <br/>
543 | 
544 | 
545 | 
546 | ### 第 46 题：输出以下代码执行的结果并解释为什么
547 | 
548 | ```js
549 | var obj = {
550 |     '2': 3,
551 |     '3': 4,
552 |     'length': 2,
553 |     'splice': Array.prototype.splice,
554 |     'push': Array.prototype.push
555 | }
556 | obj.push(1)
557 | obj.push(2)
558 | console.log(obj)
559 | ```
560 | 
561 | 解析：[第 46 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/76)
562 | 
563 | <br/>
564 | 
565 | 
566 | 
567 | ### 第 47 题：双向绑定和 vuex 是否冲突
568 | 
569 | 解析：[第 47 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/81)
570 | 
571 | <br/>
572 | 
573 | 
574 | 
575 | ### 第 48 题：call 和 apply 的区别是什么，哪个性能更好一些
576 | 
577 | 解析：[第 48 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/84)
578 | 
579 | <br/>
580 | 
581 | 
582 | 
583 | ### 第 49 题：为什么通常在发送数据埋点请求的时候使用的是 1x1 像素的透明 gif 图片？
584 | 
585 | 解析：[第 49 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/87)
586 | 
587 | <br/>
588 | 
589 | 
590 | 
591 | ### 第 50 题：实现 (5).add(3).minus(2) 功能。
592 | 
593 | > 例： 5 + 3 - 2，结果为 6
594 | 
595 | 解析：[第 50 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/88)
596 | 
597 | <br/>
598 | 
599 | 
600 | 
601 | ### 第 51 题：Vue 的响应式原理中 Object.defineProperty 有什么缺陷？
602 | 
603 | 为什么在 Vue3.0 采用了 Proxy，抛弃了 Object.defineProperty？
604 | 
605 | 解析：[第 51 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/90)
606 | 
607 | <br/>
608 | 
609 | 
610 | 
611 | ### 第 52 题：怎么让一个 div 水平垂直居中
612 | 
613 | 解析：[第 52 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/92)
614 | 
615 | <br/>
616 | 
617 | 
618 | 
619 | ### 第 53 题：输出以下代码的执行结果并解释为什么
620 | 
621 | ```js
622 | var a = {n: 1};
623 | var b = a;
624 | a.x = a = {n: 2};
625 | 
626 | console.log(a.x) 	
627 | console.log(b.x)
628 | ```
629 | 
630 | 解析：[第 53 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/93)
631 | 
632 | <br/>
633 | 
634 | 


--------------------------------------------------------------------------------