Repository: Advanced-Frontend/Daily-Interview-Question
Branch: master
Commit: 46a268536dc0
Files: 5
Total size: 90.6 KB
Directory structure:
gitextract_2doicp7v/
├── .gitattributes
├── .gitignore
├── README.md
└── datum/
├── summary-english.md
└── summary.md
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitattributes
================================================
*.md linguist-language=JavaScript
*.js linguist-language=JavaScript
*.css linguist-language=JavaScript
*.html linguist-language=JavaScript
================================================
FILE: .gitignore
================================================
.DS_Store
================================================
FILE: README.md
================================================
# Daily-Interview-Question
加入「前端面试互助群」学习小组，搜索公众号「高级前端进阶」，关注即可加入！
工作日每天一道大厂前端面试题，一年后再回头，会感谢曾经努力的自己！
[线上版本阅读更流畅，点击阅读](https://muyiy.cn/question/)
<br/>
[推荐一个不错的前端算法系列，点击查看](https://github.com/sisterAn/JavaScript-Algorithms)
<br/>
推荐扫码使用微信小程序，除了本项目之外，还囊括了算法题、选择题等多种类型题目和详细解析
记住我们的 Slogan：上下班路上刷一点，半年突击进大厂
<img src="http://resource.muyiy.cn/image/20200106214930.jpg" height="250px">
<br/>
## 今日面试题
第 162 题：实现对象的 Map 函数类似 Array.prototype.map
解析：[第 162 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/431)
<br/>
## 最近汇总
第 161 题：用最精炼的代码实现数组非零非负最小值 index
```js
// 例如：[10,21,0,-7,35,7,9,23,18] 输出 5, 7 最小
function getIndex(arr){
let index=null;
...
return index;
}
```
解析：[第 161 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/421)
<br/>
第 160 题：输出以下代码运行结果，为什么？如果希望每隔 1s 输出一个结果，应该如何改造？注意不可改动 square 方法
```js
const list = [1, 2, 3]
const square = num => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(num * num)
}, 1000)
})
}
function test() {
list.forEach(async x=> {
const res = await square(x)
console.log(res)
})
}
test()
```
解析：[第 160 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/389)
<br/>
第 159 题：实现 `Promise.retry`，成功后 `resolve` 结果，失败后重试，尝试超过一定次数才真正的 `reject`
解析：[第 159 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/387)
<br/>
第 158 题：如何模拟实现 Array.prototype.splice
解析：[第 158 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/384)
<br/>
第 157 题：浏览器缓存 ETag 里的值是怎么生成的
解析：[第 157 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/383)
<br/>
第 156 题：求最终 left、right 的宽度
```js
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
<style>
* {
padding: 0;
margin: 0;
}
.container {
width: 600px;
height: 300px;
display: flex;
}
.left {
flex: 1 2 300px;
background: red;
}
.right {
flex: 2 1 200px;
background: blue;
}
</style>
```
注：此题和 155 题 left、right 样式有些不同
解析：[第 156 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/382)
<br/>
第 155 题：求最终 left、right 的宽度
```js
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
<style>
* {
padding: 0;
margin: 0;
}
.container {
width: 600px;
height: 300px;
display: flex;
}
.left {
flex: 1 2 500px;
background: red;
}
.right {
flex: 2 1 400px;
background: blue;
}
</style>
```
解析：[第 155 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/381)
<br/>
第 154 题：弹性盒子中 flex: 0 1 auto 表示什么意思
解析：[第 154 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/380)
<br/>
第 153 题：实现一个批量请求函数 multiRequest(urls, maxNum)
要求如下：
1. 要求最大并发数 maxNum
2. 每当有一个请求返回，就留下一个空位，可以增加新的请求
3. 所有请求完成后，结果按照 urls 里面的顺序依次打出
解析：[第 153 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/378)
<br/>
2019-12-31
> 第 152 题：实现一个 normalize 函数，能将输入的特定的字符串转化为特定的结构化数据
解析：[第 152 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/331)
<br/>
2019-11-25
> 第 151 题：用最简洁代码实现 indexOf 方法
>
解析：[第 151 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/321)
<br/>
2019-11-21
> 第 150 题：二分查找如何定位左边界和右边界
>
> 不使用JS数组API，查找有序数列最先出现的位置和最后出现的位置
解析：[第 150 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/320)
<br/>
2019-11-12
> 第 149 题：babel 怎么把字符串解析成 AST，是怎么进行词法/语法分析的？
解析：[第 149 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/315)
<br/>
2019-11-01
> 第 148 题： webpack 中 loader 和 plugin 的区别是什么（平安）
解析：[第 148 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/308)
<br/>
2019-10-31
> 第 147 题：v-if、v-show、v-html 的原理是什么，它是如何封装的？
解析：[第 147 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/307)
<br/>
2019-10-29
> 第 146 题：Vue 中的 computed 和 watch 的区别在哪里（虾皮）
解析：[第 146 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/304)
<br/>
2019-10-24
> 第 145 题：前端项目如何找出性能瓶颈（阿里）
解析：[第 145 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/300)
<br/>
2019-10-22
> 第 144 题：手写二进制转 Base64（阿里）
解析：[第 144 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/299)
<br/>
2019-10-21
> 第 143 题：将 '10000000000' 形式的字符串，以每 3 位进行分隔展示 '10.000.000.000'
解析：[第 143 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/296)
<br/>
2019-10-17
> 第 142 题：（算法题）求多个数组之间的交集（阿里）
解析：[第 142 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/293)
<br/>
2019-10-15
> 第 141 题：Vue 中的 computed 是如何实现的（腾讯、平安）
解析：[第 141 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/291)
<br/>
2019-10-14
> 第 140 题：为什么 HTTP1.1 不能实现多路复用（腾讯）
解析：[第 140 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/290)
<br/>
2019-09-17
> 第 139 题：谈一谈 nextTick 的原理
解析：[第 139 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/281)
<br/>
2019-09-11
> 第 138 题：反转链表，每 k 个节点反转一次，不足 k 就保持原有顺序（哔哩哔哩）
解析：[第 138 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/278)
<br/>
2019-09-04
> 第 137 题：如何在 H5 和小程序项目中计算白屏时间和首屏时间，说说你的思路
解析：[第 137 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/272)
<br/>
## 所有面试题汇总
- [壹题所有题目及答案汇总](https://github.com/Advanced-Frontend/Daily-Interview-Question/blob/master/datum/summary.md)
<br/>
## 半月刊
- [前端 100 问：能搞懂 80% 的请把简历给我](https://github.com/yygmind/blog/issues/43)
- [【半月刊 1】前端高频面试题及答案汇总](https://juejin.im/post/5c6977e46fb9a049fd1063dc)
- [【半月刊 2】前端高频面试题及答案汇总](https://juejin.im/post/5c7bd72ef265da2de80f7f17)
- [【半月刊 3】前端高频面试题及答案汇总](https://juejin.im/post/5c9ac3f66fb9a070e056718f)
- [【半月刊 4】前端高频面试题及答案汇总](https://juejin.im/post/5cb3376bf265da039c0543da)
<br/>
## 联系我
进阶系列文章汇总如下，觉得不错点个 star，欢迎 **加群** 互相学习。
> [https://github.com/yygmind/blog](https://github.com/yygmind/blog)
我是木易杨，公众号「高级前端进阶」作者，跟着我**每周重点攻克一个前端面试重难点**。接下来让我带你走进高级前端的世界，在进阶的路上，共勉！
================================================
FILE: datum/summary-english.md
================================================
## Front-end interview questions and answers summary
### Question 1: Why do you write a key in a list of a component when writing a React / Vue project? What is the purpose?
Company: Drip, hungry?
Analysis: [Question 1](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/1)
<br/>
### Question 2：`['1', '2', '3'].map(parseInt)` what & why ?
Analysis: [Question 2](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/4)
<br/>
### Question 3：What is anti-shake and throttling? What's the difference? How to achieve?
Company: Digging for money
Analysis: [Question 3](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/5)
<br/>
### Question 4：Introduce the difference between Set, Map, WeakSet and WeakMap?
Analysis: [Question 4](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/6)
<br/>
### Question 5： Introducing depth-first traversal and breadth-first traversal, how to achieve it?
Analysis: [Question 5](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/9)
<br/>
### Question 6：Do you implement a copy function with depth-first thinking and breadth-first thinking?
Analysis: [Question 6](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/10)
<br/>
### Question 7：What is the difference between ES5/ES6 inheritance and writing?
Analysis: [Question 7](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/20)
<br/>
### Question 8：The difference between setTimeout, Promise, Async/Await
Analysis: [Question 8](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/33)
<br/>
### Question 9：How does Async/Await implement asynchronously by means of synchronization?
Company: headline, micro doctor
Analysis: [Question 9](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/156)
<br/>
### Question 10：Asynchronous pen test questions
>Please write the result of the following code
```js
async function async1() {
console.log('async1 start');
await async2();
console.log('async1 end');
}
async function async2() {
console.log('async2');
}
console.log('script start');
setTimeout(function() {
console.log('setTimeout');
}, 0)
async1();
new Promise(function(resolve) {
console.log('promise1');
resolve();
}).then(function() {
console.log('promise2');
});
console.log('script end');
```
Analysis: [Question 10](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/7)
Company: Headline
<br/>
### Question 11：Algorithm handwritten questions
>The following array is known:
>
> var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];
>
> Write a program to flatten the array and repeat some of the data, and finally get an ascending and non-repeating array
Company: Ctrip
Analysis: [Question 11](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/8)
<br/>
### Question 12：The evolution and advantages and disadvantages of the JS asynchronous solution.
Company: Drip, Dig, Micro, Haikang
Analysis: [Question 12](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/11)
<br/>
### Question 13：Is the Promise constructor executed synchronously or asynchronously, then what about the then method?
Company: Micromedical
Analysis: [Question 13](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/19)
<br/>
### Question 14：Valentine's Day Welfare, how to implement a new
Company: Redeem
Analysis: [Question 14](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/12)
<br/>
### Question 15：Briefly explain the multiplexing of http2
Company: Netease
Analysis: [Question 15](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/14)
<br/>
### Question 16：Talk about your understanding of TCP three-way handshake and four wavers
Analysis: [Question 16](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/15)
<br/>
### Question 17：After the A and B machines are connected normally, the B machine suddenly restarts and asks A what state is in TCP at this time.
>If A and B establish a normal connection, they never send data to each other. At this time, B suddenly restarts the machine and asks A what state is TCP at this time? How to eliminate this state in the server program? (Super-level questions, understand)
Analysis: [Question 17](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/21)
<br/>
### Question 18：When is setState in React synchronous and when is it asynchronous?
Company: Micromedical
Analysis: [Question 18](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/17)
<br/>
### Question 19： React setState pen test, what does the following code output?
```js
class Example extends React.Component {
constructor() {
super();
this.state = {
val: 0
};
}
componentDidMount() {
this.setState({val: this.state.val + 1});
console.log(this.state.val); // first log
this.setState({val: this.state.val + 1});
console.log(this.state.val); // 2nd log
setTimeout(() => {
this.setState({val: this.state.val + 1});
console.log(this.state.val); // 3rd log
this.setState({val: this.state.val + 1});
console.log(this.state.val); // 4th log
}, 0);
}
render() {
return null;
}
};
```
Analysis: [Question 19](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/18)
<br/>
### Question 20： Introduce the npm module installation mechanism. Why can I automatically install the corresponding module by entering npm install?
Analysis: [Question 20](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/22)
<br/>
### Question 21：There are three methods for judging arrays. Please introduce the differences and advantages between them.
> Object.prototype.toString.call() , instanceof , and Array.isArray()
Analysis: [Question 21](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/23)
<br/>
### Question 22： Introducing Repaint & Reflow and how to optimize it
Analysis: [Question 22](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/24)
<br/>
### Question 23： Introduce the difference between the observer mode and the subscription-release mode, and what scenarios are applicable to each
Analysis: [Question 23](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/25)
<br/>
### Question 24：Talk about the design ideas of Redux and Vuex
Analysis: [Question 24](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/45)
<br/>
### Question 25：Tell the difference between the browser and the Node event loop
Analysis: [Question 25](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/26)
<br/>
### Question 26：Introducing the development of modularity
It can be considered from the perspectives of IIFE, AMD, CMD, CommonJS, UMD, webpack (require.ensure), ES Module, <script type="module">.
Analysis: [Question 26](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/28)
<br/>
### Question 27：In the global scope, the variables declared with const and let are not on the window. So where exactly? How to get it?
Analysis: [Question 27](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/30)
<br/>
### Question 28：Both the cookie and the token are stored in the header. Why not hijack the token?
Analysis: [Question 28](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/31)
<br/>
### Question 29： Talk about Vue's two-way data binding, how the Model changes the View, and how the View changes the Model.
Analysis: [Question 29](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/34)
<br/>
### Question 30：Combining two arrays into one array
Please put two arrays ['A1', 'A2', 'B1', 'B2', 'C1', 'C2', 'D1', 'D2'] and ['A', 'B', 'C ', 'D'], merged into ['A1', 'A2', 'A', 'B1', 'B2', 'B', 'C1', 'C2', 'C', 'D1', 'D2', 'D'].
Analysis: [Question 30](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/39)
<br/>
### Question 31：ransform the code below to output 0 - 9, and write out all the solutions you can think of.
```js
for (var i = 0; i< 10; i++){
setTimeout(() => {
console.log(i);
}, 1000)
}
```
Analysis: [Question 31](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/43)
<br/>
### Question 32：Is Virtual DOM really faster than operating a native DOM? Talk about your thoughts.
Analysis: [Question 32](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/47)
<br/>
### Question 33：What does the following code print, and why?
```js
var b = 10;
(function b(){
b = 20;
console.log(b);
})();
```
Analysis: [Question 33](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/48)
<br/>
### Question 34：Simply modify the code below to print 10 and 20 respectively.
```js
var b = 10;
(function b(){
b = 20;
console.log(b);
})();
```
Analysis: [Question 34](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/51)
<br/>
### Question 35：Browser Cache Read Rules
Can be divided into Service Worker, Memory Cache, Disk Cache and Push Cache, what is the basis of the request from memory cache and from disk cache, and when is the data stored in Memory Cache and Disk Cache?
Analysis: [Question 35](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/53)
<br/>
### Question 36：Implement the flatten function in an iterative manner.
Analysis: [Question 36](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/54)
<br/>
### Question 37：Why can't Vuex's mutation and Redux's reducer do asynchronous operations?
Analysis: [Question 37](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/65)
<br/>
### Question 38：In the following code a Under what circumstances will I print 1?
```js
var a = ?;
if(a == 1 && a == 2 && a == 3){
console.log(1);
}
```
Analysis: [Question 38](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/57)
公司：京东
<br/>
### Question 39：Introduce the BFC and its applications.
Analysis: [Question 39](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/59)
<br/>
### Question 40：In Vue, why subcomponents cannot modify the Prop passed by the parent component
If modified, how Vue monitors the modification of the property and gives a warning.
Analysis: [Question 40](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/60)
<br/>
### Question 41：What does the following code output?
```js
var a = 10;
(function () {
console.log(a)
a = 5
console.log(window.a)
var a = 20;
console.log(a)
})()
```
Analysis: [Question 41题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/61)
<br/>
### Question 42：Implementing a sleep function
For example, sleep(1000) means waiting for 1000 milliseconds, which can be achieved from the perspectives of Promise, Generator, Async/Await, etc.
Analysis: [Question 42](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/63)
<br/>
### Question 43：Sorting arrays [3, 15, 8, 29, 102, 22] using sort(), outputting the result
Analysis: [Question 43](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/66)
<br/>
### Question 44：Introducing the HTTPS handshake process
Analysis: [Question 44](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/70)
<br/>
### Question 45：How does the client verify the validity of the certificate during the HTTPS handshake?
Analysis: [Question 45](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/74)
<br/>
### Question 46：Output the results of the following code execution and explain why
```js
var obj = {
'2': 3,
'3': 4,
'length': 2,
'splice': Array.prototype.splice,
'push': Array.prototype.push
}
obj.push(1)
obj.push(2)
console.log(obj)
```
Analysis: [Question 46](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/76)
<br/>
### Question 47：Two-way binding and vuex conflict
Analysis: [Question 47](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/81)
<br/>
### Question 48：What is the difference between call and apply, which is better?
Analysis: [Question 48](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/84)
<br/>
### Question 49：Why is it usually a 1x1 pixel transparent gif image when sending a data burying request?
Analysis: [Question 49](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/87)
<br/>
### Question 50： Implementation (5).add(3).minus(2) Function.
> Example: 5 + 3 - 2, the result is 6
Analysis: [Question 50](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/88)
Company: Baidu
<br/>
### Question 51： What is the flaw in Object.defineProperty in Vue's responsive principle?
Why did you use Proxy in Vue 3.0 and discard Object.defineProperty?
Analysis: [Question 51](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/90)
<br/>
### Question 52：How to make a div horizontally centered vertically
Analysis: [Question 52](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/92)
<br/>
### Question 53：Output the execution results of the following code and explain why
```js
var a = {n: 1};
var b = a;
a.x = a = {n: 2};
console.log(a.x)
console.log(b.x)
```
Analysis: [Question 53](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/93)
<br/>
### Question 54：How is the bubble sorting achieved, what is the time complexity, and how can it be improved?
Analysis: [Question 54](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/94)
<br/>
### Question 55：A company's sales from January to December exist in an object
As follows: {1:222, 2:123, 5:888}, please process the data as follows: [222, 123, null, null, 888, null, null, null, null, null, null, null].
Analysis: [Question 55](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/96)
<br/>
### Question 56：Requires the design of the LazyMan class to implement the following features.
```js
LazyMan('Tony');
// Hi I am Tony
LazyMan('Tony').sleep(10).eat('lunch');
// Hi I am Tony
// Waited for 10 seconds...
// I am eating lunch
LazyMan('Tony').eat('lunch').sleep(10).eat('dinner');
// Hi I am Tony
// I am eating lunch
// Waited for 10 seconds...
// I am eating diner
LazyMan('Tony').eat('lunch').eat('dinner').sleepFirst(5).sleep(10).eat('junk food');
// Hi I am Tony
// Waited for 5 seconds...
// I am eating lunch
// I am eating dinner
// Waited for 10 seconds...
// I am eating junk food
```
Analysis: [Question 56](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/98)
<br/>
### Question 57：Analysis and comparison opacity: 0, visibility: hidden, display: none Advantages and disadvantages and applicable scenarios.
Analysis: [Question 57](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/100)
<br/>
### Question 58：What is the difference between an arrow function and a normal function? The constructor can generate instances using new , so can the arrow function work? why?
Analysis: [Question 58](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/101)
<br/>
### Question 59：: Given two arrays, write a method to calculate their intersection.
> For example: Given nums1 = [1, 2, 2, 1], nums2 = [2, 2], return [2, 2].
Analysis: [Question 59](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/102)
<br/>
### Question 60：The following code is known. How can I modify the image width to 300px? Note that the code below cannot be modified.
> <img src="1.jpg" style="width:480px!important;">
Analysis: [Question 60](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/105)
<br/>
### Question 61：Introducing how to implement token encryption
Analysis: [Question 61](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/106)
<br/>
### Question 62：Why does redux design reducer as a pure function?
Analysis: [Question 62](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/107)
<br/>
### Question 63：How to design a seamless carousel
Analysis: [Question 63](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/108)
<br/>
### Question 64：Simulating a Promise.finally
Analysis: [Question 64](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/109)
<br/>
### Question 65： `a.b.c.d` and `a['b']['c']['d']`， which one is higher?
Analysis: [Question 65](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/111)
<br/>
### Question 66：What is the implementation of ES6 code conversion to ES5 code?
Analysis: [Question 66](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/112)
<br/>
### Question 67：Array Programming Questions
Randomly generate an array of integer types of length 10, such as `[2, 10, 3, 4, 5, 11, 10, 11, 20]`, arrange them into a new array, requiring the new array form as follows, for example `[[ 2, 3, 4, 5], [10, 11], [20]]`.
Analysis: [Question 67](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/113)
<br/>
### Question 68： How to solve the mobile Retina screen 1px pixel problem
Analysis: [Question 68](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/115)
<br/>
### Question 69： How to reverse the case of a string (uppercase to lowercase and uppercase), for example, 'AbC' becomes 'aBc'.
Analysis: [Question 69](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/116)
<br/>
### Question 70： Introduce the principle of webpack hot update, how to update the page without refreshing the browser
Analysis: [Question 70](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/118)
<br/>
### Question 71： Implement a string matching algorithm. From the string S of length n, find whether there is a string T. The length of T is m, if there is a return position.
Analysis: [Question 71](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/119)
<br/>
### Question 72： Why the performance of a normal `for` loop is much higher than the performance of `forEach`, please explain why.
Analysis: [Question 72](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/121)
<br/>
### Question 73： Introduction to BFC, IFC, GFC and FFC
Analysis: [Question 73](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/122)
<br/>
### Question 74： Simple data binding with JavaScript Proxy
Analysis: [Question 74](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/123)
<br/>
### Question 75：There are 100,000 data in the array. How much difference is the time between the first element and the 100,000th element?
Analysis: [Question 75](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/124)
<br/>
### Question 76：Output the following code to run the result
```js
// example 1
var a={}, b='123', c=123;
a[b]='b';
a[c]='c';
console.log(a[b]);
---------------------
// example 2
var a={}, b=Symbol('123'), c=Symbol('123');
a[b]='b';
a[c]='c';
console.log(a[b]);
---------------------
// example 3
var a={}, b={key:'123'}, c={key:'456'};
a[b]='b';
a[c]='c';
console.log(a[b]);
```
Analysis: [Question 76](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/125)
<br/>
### Question 77：Algorithm title "Rotating array"
> Given an array, move the elements in the array to the right by k positions, where k is a non-negative number.
Example 1：
```js
Enter: [1, 2, 3, 4, 5, 6, 7] 和 k = 3
Output: [5, 6, 7, 1, 2, 3, 4]
Explanation:
Rotate right 1 steps: [7, 1, 2, 3, 4, 5, 6]
Rotate right 2 steps:: [6, 7, 1, 2, 3, 4, 5]
Rotate right 3 steps: [5, 6, 7, 1, 2, 3, 4]
```
Example 2：
```js
Enter: [-1, -100, 3, 99] 和 k = 2
Output: [3, 99, -1, -100]
Explanation:
Rotate right 1 steps: [99, -1, -100, 3]
Rotate right 2 steps: [3, 99, -1, -100]
```
Analysis: [Question 77](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/126)
<br/>
### Question 78： What is the order of execution of Vue's parent and child component lifecycle hooks?
Analysis: [Question 78](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/128)
<br/>
### Question 79：Input Search How to Anti-Shake, How to Handle Chinese Input
Analysis: [Question 79](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/129)
<br/>
### Question 80：Introducing Promise.all usage, principle implementation, and error handling
Analysis: [Question 80](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/130)
<br/>
### Question 81：Print out all symmetrical numbers between 1 and 10000
> For example: 121, 1331, etc.
Analysis: [Question 81](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/131)
<br/>
### Question 82："Mobile Zero" on Monday's algorithm
> Given an array of nums, write a function that moves all 0s to the end of the array while maintaining the relative order of non-zero elements.
>
> Example:
>
> ```
> Input: [0,1,0,3,12]
> Output: [1,3,12,0,0]
> ```
>
> Description:
>
> 1. Must be manipulated on the original array, no extra arrays can be copied.
>
> 1. Minimize the number of operations.
Analysis: [Question 82](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/132)
<br/>
### Question 83：What is the implementation principle of the difference between var, let, and const?
Analysis: [Question 83](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/133)
<br/>
### Question 84：Implement an add function that satisfies the following features.
> ```js
> add(1); // 1
> add(1)(2); // 3
> add(1)(2)(3)；// 6
> add(1)(2, 3); // 6
> add(1, 2)(3); // 6
> add(1, 2, 3); // 6
> ```
Analysis: [Question 84](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/134)
<br/>
### Question 85：What is the difference between the <Link> tag and the <a> tag in the react-router?
> How to disable the `<a>` tag default event, how to implement the jump after the ban.
Analysis: [Question 85](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/135)
<br/>
### Question 86：: "The sum of two numbers" on Monday's algorithm
Given an array of integers and a target value, find the two numbers in the array that are the target values.
You can assume that each input corresponds to only one answer, and the same elements cannot be reused.
Example:
```js
Given nums = [2, 7, 11, 15], target = 9
Because nums[0] + nums[1] = 2 + 7 = 9
So return [0, 1]
```
Analysis: [Question 86](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/136)
公司：京东、快手
<br/>
### Question 87：How to judge the input is a correct URL in the input box.
Analysis: [Question 87](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/138)
<br/>
### Question 88：实现 convert 方法，把原始 list 转换成树形结构，要求尽可能降低时间复杂度
Implementing the convert method, converting the original list into a tree structure requires as much time complexity as possible
In the following data structure, id represents the department number, name is the department name, parentId is the parent department number, and 0 is the first-level department. Now it is required to implement a convert method, convert the original list into a tree structure, and mount the originalId as the number. Under the attribute children array of the id, the structure is as follows:
```js
// The original list is as follows
let list =[
{id:1,name:'Department A',parentId:0},
{id:2,name:'Department B',parentId:0},
{id:3,name:'Department C',parentId:1},
{id:4,name:'Department D',parentId:1},
{id:5,name:'Department E',parentId:2},
{id:6,name:'Department F',parentId:3},
{id:7,name:'Department G',parentId:2},
{id:8,name:'Department H',parentId:4}
];
const result = convert(list, ...);
// The result after conversion is as follows
let result = [
{
id: 1,
name: 'Department A',
parentId: 0,
children: [
{
id: 3,
name: 'Department C',
parentId: 1,
children: [
{
id: 6,
name: 'Department F',
parentId: 3
}, {
id: 16,
name: 'Department L',
parentId: 3
}
]
},
{
id: 4,
name: 'Department D',
parentId: 1,
children: [
{
id: 8,
name: 'Department H',
parentId: 4
}
]
}
]
},
···
];
```
Analysis: [Question 88](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/139)
<br/>
### Question 89：Designing and implementing Promise.race()
Analysis: [Question 89](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/140)
<br/>
### Question 90：Keyword highlighting for fuzzy search results
<img src="https://ws3.sinaimg.cn/large/006tNc79ly1g43dykaccuj30u01hc49s.jpg" height="800"/>
Analysis: [Question 90](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/141)
<br/>
### Question 91：Introducing HTTPS man-in-the-middle attacks
Analysis: [Question 91](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/142)
<br/>
### Question 92：Known data formats, implement a function fn Find all parent ids in the chain
> ```js
> const value = '112'
> const fn = (value) => {
> ...
> }
> fn(value) // output [1， 11， 112]
> ```
<img src="https://ws1.sinaimg.cn/large/006tNc79gy1g45a04ntttj30k20wen01.jpg" height="800"/>
Analysis: [Question 92](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/143)
<br/>
### Question 93：Given two ordered arrays of size nums1 and nums2 of size m and n. Find the median of these two ordered arrays. The time complexity of the algorithm is required to be O(log(m+n)).
Example 1：
```js
nums1 = [1, 3]
nums2 = [2]
```
The median is 2.0
Example 2:
```js
nums1 = [1, 2]
nums2 = [3, 4]
```
The median is s(2 + 3) / 2 = 2.5
Analysis: [Question 93](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/144)
<br/>
### Question 94：Does vue need to use an event proxy to bind events to each element in v-for? why?
Analysis: [Question 94](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/145)
<br/>
### Question 95：Simulating a deep copy and considering the mutual reference of objects and the copy of Symbol
Analysis: [Question 95](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/148)
<br/>
### Question 96：Introducing common scenarios and methods for front-end encryption
Analysis: [Question 96](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/150)
<br/>
### Question 97： How does the diff time complexity of React and Vue be optimized from O(n^3) to O(n), then how are O(n^3) and O(n) calculated?
Analysis: [Question 97](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/151)
<br/>
### Question 98：Write the print result of the following code
```js
function changeObjProperty(o) {
o.siteUrl = "http://www.baidu.com"
o = new Object()
o.siteUrl = "http://www.google.com"
}
let webSite = new Object();
changeObjProperty(webSite);
console.log(webSite.siteUrl);
```
Company: Jingdong
Analysis: [Question 98](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/152)
<br/>
### Question 99：Programming Algorithm Questions
> Write a function in JavaScript, type int, and return the string after the integer is reversed. For example, enter integer 1234 and return the string "4321". Requires that you must use a recursive function call. You cannot use a global variable. The input function must have only one argument passed in, and must return a string.
Company: bilibili
Analysis: [Question 99](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/153)
<br/>
================================================
FILE: datum/summary.md
================================================
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
- [前端面试题及答案汇总](#%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)
- [第 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)
- [第 2 题：`['1', '2', '3'].map(parseInt)` what & why ?](#%E7%AC%AC-2-%E9%A2%981-2-3mapparseint-what--why-)
- [第 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)
- [第 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)
- [第 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)
- [第 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)
- [第 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)
- [第 8 题：setTimeout、Promise、Async/Await 的区别](#%E7%AC%AC-8-%E9%A2%98settimeoutpromiseasyncawait-%E7%9A%84%E5%8C%BA%E5%88%AB)
- [第 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)
- [第 10 题：异步笔试题](#%E7%AC%AC-10-%E9%A2%98%E5%BC%82%E6%AD%A5%E7%AC%94%E8%AF%95%E9%A2%98)
- [第 11 题：算法手写题](#%E7%AC%AC-11-%E9%A2%98%E7%AE%97%E6%B3%95%E6%89%8B%E5%86%99%E9%A2%98)
- [第 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)
- [第 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)
- [第 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)
- [第 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)
- [第 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)
- [第 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)
- [第 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)
- [第 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)
- [第 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)
- [第 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)
- [第 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)
- [第 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)
- [第 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)
- [第 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)
- [第 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)
- [第 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)
- [第 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)
- [第 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)
- [第 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)
- [第 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)
- [第 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)
- [第 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)
- [第 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)
- [第 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)
- [第 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)
- [第 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)
- [第 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)
- [第 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)
- [第 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)
- [第 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)
- [第 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)
- [第 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)
- [第 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)
- [第 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)
- [第 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)
- [第 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)
- [第 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)
- [第 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)
- [第 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)
- [第 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)
- [第 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)
- [第 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)
- [第 54 题：冒泡排序如何实现，时间复杂度是多少， 还可以如何改进？](#%E7%AC%AC-54-%E9%A2%98%E5%86%92%E6%B3%A1%E6%8E%92%E5%BA%8F%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E6%97%B6%E9%97%B4%E5%A4%8D%E6%9D%82%E5%BA%A6%E6%98%AF%E5%A4%9A%E5%B0%91-%E8%BF%98%E5%8F%AF%E4%BB%A5%E5%A6%82%E4%BD%95%E6%94%B9%E8%BF%9B)
- [第 55 题：某公司 1 到 12 月份的销售额存在一个对象里面](#%E7%AC%AC-55-%E9%A2%98%E6%9F%90%E5%85%AC%E5%8F%B8-1-%E5%88%B0-12-%E6%9C%88%E4%BB%BD%E7%9A%84%E9%94%80%E5%94%AE%E9%A2%9D%E5%AD%98%E5%9C%A8%E4%B8%80%E4%B8%AA%E5%AF%B9%E8%B1%A1%E9%87%8C%E9%9D%A2)
- [第 56 题：要求设计 LazyMan 类，实现以下功能。](#%E7%AC%AC-56-%E9%A2%98%E8%A6%81%E6%B1%82%E8%AE%BE%E8%AE%A1-lazyman-%E7%B1%BB%E5%AE%9E%E7%8E%B0%E4%BB%A5%E4%B8%8B%E5%8A%9F%E8%83%BD)
- [第 57 题：分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景。](#%E7%AC%AC-57-%E9%A2%98%E5%88%86%E6%9E%90%E6%AF%94%E8%BE%83-opacity-0visibility-hiddendisplay-none-%E4%BC%98%E5%8A%A3%E5%92%8C%E9%80%82%E7%94%A8%E5%9C%BA%E6%99%AF)
- [第 58 题：箭头函数与普通函数（function）的区别是什么？构造函数（function）可以使用 new 生成实例，那么箭头函数可以吗？为什么？](#%E7%AC%AC-58-%E9%A2%98%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0%E4%B8%8E%E6%99%AE%E9%80%9A%E5%87%BD%E6%95%B0function%E7%9A%84%E5%8C%BA%E5%88%AB%E6%98%AF%E4%BB%80%E4%B9%88%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0function%E5%8F%AF%E4%BB%A5%E4%BD%BF%E7%94%A8-new-%E7%94%9F%E6%88%90%E5%AE%9E%E4%BE%8B%E9%82%A3%E4%B9%88%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0%E5%8F%AF%E4%BB%A5%E5%90%97%E4%B8%BA%E4%BB%80%E4%B9%88)
- [第 59 题：给定两个数组，写一个方法来计算它们的交集。](#%E7%AC%AC-59-%E9%A2%98%E7%BB%99%E5%AE%9A%E4%B8%A4%E4%B8%AA%E6%95%B0%E7%BB%84%E5%86%99%E4%B8%80%E4%B8%AA%E6%96%B9%E6%B3%95%E6%9D%A5%E8%AE%A1%E7%AE%97%E5%AE%83%E4%BB%AC%E7%9A%84%E4%BA%A4%E9%9B%86)
- [第 60 题：已知如下代码，如何修改才能让图片宽度为 300px ？注意下面代码不可修改。](#%E7%AC%AC-60-%E9%A2%98%E5%B7%B2%E7%9F%A5%E5%A6%82%E4%B8%8B%E4%BB%A3%E7%A0%81%E5%A6%82%E4%BD%95%E4%BF%AE%E6%94%B9%E6%89%8D%E8%83%BD%E8%AE%A9%E5%9B%BE%E7%89%87%E5%AE%BD%E5%BA%A6%E4%B8%BA-300px-%E6%B3%A8%E6%84%8F%E4%B8%8B%E9%9D%A2%E4%BB%A3%E7%A0%81%E4%B8%8D%E5%8F%AF%E4%BF%AE%E6%94%B9)
- [第 61 题：介绍下如何实现 token 加密](#%E7%AC%AC-61-%E9%A2%98%E4%BB%8B%E7%BB%8D%E4%B8%8B%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0-token-%E5%8A%A0%E5%AF%86)
- [第 62 题：redux 为什么要把 reducer 设计成纯函数](#%E7%AC%AC-62-%E9%A2%98redux-%E4%B8%BA%E4%BB%80%E4%B9%88%E8%A6%81%E6%8A%8A-reducer-%E8%AE%BE%E8%AE%A1%E6%88%90%E7%BA%AF%E5%87%BD%E6%95%B0)
- [第 63 题：如何设计实现无缝轮播](#%E7%AC%AC-63-%E9%A2%98%E5%A6%82%E4%BD%95%E8%AE%BE%E8%AE%A1%E5%AE%9E%E7%8E%B0%E6%97%A0%E7%BC%9D%E8%BD%AE%E6%92%AD)
- [第 64 题：模拟实现一个 Promise.finally](#%E7%AC%AC-64-%E9%A2%98%E6%A8%A1%E6%8B%9F%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA-promisefinally)
- [第 65 题： `a.b.c.d` 和 `a['b']['c']['d']`，哪个性能更高？](#%E7%AC%AC-65-%E9%A2%98-abcd-%E5%92%8C-abcd%E5%93%AA%E4%B8%AA%E6%80%A7%E8%83%BD%E6%9B%B4%E9%AB%98)
- [第 66 题：ES6 代码转成 ES5 代码的实现思路是什么](#%E7%AC%AC-66-%E9%A2%98es6-%E4%BB%A3%E7%A0%81%E8%BD%AC%E6%88%90-es5-%E4%BB%A3%E7%A0%81%E7%9A%84%E5%AE%9E%E7%8E%B0%E6%80%9D%E8%B7%AF%E6%98%AF%E4%BB%80%E4%B9%88)
- [第 67 题：数组编程题](#%E7%AC%AC-67-%E9%A2%98%E6%95%B0%E7%BB%84%E7%BC%96%E7%A8%8B%E9%A2%98)
- [第 68 题： 如何解决移动端 Retina 屏 1px 像素问题](#%E7%AC%AC-68-%E9%A2%98-%E5%A6%82%E4%BD%95%E8%A7%A3%E5%86%B3%E7%A7%BB%E5%8A%A8%E7%AB%AF-retina-%E5%B1%8F-1px-%E5%83%8F%E7%B4%A0%E9%97%AE%E9%A2%98)
- [第 69 题： 如何把一个字符串的大小写取反（大写变小写小写变大写），例如 ’AbC' 变成 'aBc' 。](#%E7%AC%AC-69-%E9%A2%98-%E5%A6%82%E4%BD%95%E6%8A%8A%E4%B8%80%E4%B8%AA%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%9A%84%E5%A4%A7%E5%B0%8F%E5%86%99%E5%8F%96%E5%8F%8D%E5%A4%A7%E5%86%99%E5%8F%98%E5%B0%8F%E5%86%99%E5%B0%8F%E5%86%99%E5%8F%98%E5%A4%A7%E5%86%99%E4%BE%8B%E5%A6%82-abc-%E5%8F%98%E6%88%90-abc-)
- [第 70 题： 介绍下 webpack 热更新原理，是如何做到在不刷新浏览器的前提下更新页面的](#%E7%AC%AC-70-%E9%A2%98-%E4%BB%8B%E7%BB%8D%E4%B8%8B-webpack-%E7%83%AD%E6%9B%B4%E6%96%B0%E5%8E%9F%E7%90%86%E6%98%AF%E5%A6%82%E4%BD%95%E5%81%9A%E5%88%B0%E5%9C%A8%E4%B8%8D%E5%88%B7%E6%96%B0%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84%E5%89%8D%E6%8F%90%E4%B8%8B%E6%9B%B4%E6%96%B0%E9%A1%B5%E9%9D%A2%E7%9A%84)
- [第 71 题： 实现一个字符串匹配算法，从长度为 n 的字符串 S 中，查找是否存在字符串 T，T 的长度是 m，若存在返回所在位置。](#%E7%AC%AC-71-%E9%A2%98-%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%8C%B9%E9%85%8D%E7%AE%97%E6%B3%95%E4%BB%8E%E9%95%BF%E5%BA%A6%E4%B8%BA-n-%E7%9A%84%E5%AD%97%E7%AC%A6%E4%B8%B2-s-%E4%B8%AD%E6%9F%A5%E6%89%BE%E6%98%AF%E5%90%A6%E5%AD%98%E5%9C%A8%E5%AD%97%E7%AC%A6%E4%B8%B2-tt-%E7%9A%84%E9%95%BF%E5%BA%A6%E6%98%AF-m%E8%8B%A5%E5%AD%98%E5%9C%A8%E8%BF%94%E5%9B%9E%E6%89%80%E5%9C%A8%E4%BD%8D%E7%BD%AE)
- [第 72 题： 为什么普通 `for` 循环的性能远远高于 `forEach` 的性能，请解释其中的原因。](#%E7%AC%AC-72-%E9%A2%98-%E4%B8%BA%E4%BB%80%E4%B9%88%E6%99%AE%E9%80%9A-for-%E5%BE%AA%E7%8E%AF%E7%9A%84%E6%80%A7%E8%83%BD%E8%BF%9C%E8%BF%9C%E9%AB%98%E4%BA%8E-foreach-%E7%9A%84%E6%80%A7%E8%83%BD%E8%AF%B7%E8%A7%A3%E9%87%8A%E5%85%B6%E4%B8%AD%E7%9A%84%E5%8E%9F%E5%9B%A0)
- [第 73 题： 介绍下 BFC、IFC、GFC 和 FFC](#%E7%AC%AC-73-%E9%A2%98-%E4%BB%8B%E7%BB%8D%E4%B8%8B-bfcifcgfc-%E5%92%8C-ffc)
- [第 74 题： 使用 JavaScript Proxy 实现简单的数据绑定](#%E7%AC%AC-74-%E9%A2%98-%E4%BD%BF%E7%94%A8-javascript-proxy-%E5%AE%9E%E7%8E%B0%E7%AE%80%E5%8D%95%E7%9A%84%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A)
- [第 75 题：数组里面有10万个数据，取第一个元素和第10万个元素的时间相差多少](#%E7%AC%AC-75-%E9%A2%98%E6%95%B0%E7%BB%84%E9%87%8C%E9%9D%A2%E6%9C%8910%E4%B8%87%E4%B8%AA%E6%95%B0%E6%8D%AE%E5%8F%96%E7%AC%AC%E4%B8%80%E4%B8%AA%E5%85%83%E7%B4%A0%E5%92%8C%E7%AC%AC10%E4%B8%87%E4%B8%AA%E5%85%83%E7%B4%A0%E7%9A%84%E6%97%B6%E9%97%B4%E7%9B%B8%E5%B7%AE%E5%A4%9A%E5%B0%91)
- [第 76 题：输出以下代码运行结果](#%E7%AC%AC-76-%E9%A2%98%E8%BE%93%E5%87%BA%E4%BB%A5%E4%B8%8B%E4%BB%A3%E7%A0%81%E8%BF%90%E8%A1%8C%E7%BB%93%E6%9E%9C)
- [第 77 题：算法题「旋转数组」](#%E7%AC%AC-77-%E9%A2%98%E7%AE%97%E6%B3%95%E9%A2%98%E6%97%8B%E8%BD%AC%E6%95%B0%E7%BB%84)
- [第 78 题：Vue 的父组件和子组件生命周期钩子执行顺序是什么](#%E7%AC%AC-78-%E9%A2%98vue-%E7%9A%84%E7%88%B6%E7%BB%84%E4%BB%B6%E5%92%8C%E5%AD%90%E7%BB%84%E4%BB%B6%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90%E6%89%A7%E8%A1%8C%E9%A1%BA%E5%BA%8F%E6%98%AF%E4%BB%80%E4%B9%88)
- [第 79 题：input 搜索如何防抖，如何处理中文输入](#%E7%AC%AC-79-%E9%A2%98input-%E6%90%9C%E7%B4%A2%E5%A6%82%E4%BD%95%E9%98%B2%E6%8A%96%E5%A6%82%E4%BD%95%E5%A4%84%E7%90%86%E4%B8%AD%E6%96%87%E8%BE%93%E5%85%A5)
- [第 80 题：介绍下 Promise.all 使用、原理实现及错误处理](#%E7%AC%AC-80-%E9%A2%98%E4%BB%8B%E7%BB%8D%E4%B8%8B-promiseall-%E4%BD%BF%E7%94%A8%E5%8E%9F%E7%90%86%E5%AE%9E%E7%8E%B0%E5%8F%8A%E9%94%99%E8%AF%AF%E5%A4%84%E7%90%86)
- [第 81 题：打印出 1 - 10000 之间的所有对称数](#%E7%AC%AC-81-%E9%A2%98%E6%89%93%E5%8D%B0%E5%87%BA-1---10000-%E4%B9%8B%E9%97%B4%E7%9A%84%E6%89%80%E6%9C%89%E5%AF%B9%E7%A7%B0%E6%95%B0)
- [第 82 题：周一算法题之「移动零」](#%E7%AC%AC-82-%E9%A2%98%E5%91%A8%E4%B8%80%E7%AE%97%E6%B3%95%E9%A2%98%E4%B9%8B%E7%A7%BB%E5%8A%A8%E9%9B%B6)
- [第 83 题：var、let 和 const 区别的实现原理是什么](#%E7%AC%AC-83-%E9%A2%98varlet-%E5%92%8C-const-%E5%8C%BA%E5%88%AB%E7%9A%84%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86%E6%98%AF%E4%BB%80%E4%B9%88)
- [第 84 题：请实现一个 add 函数，满足以下功能。](#%E7%AC%AC-84-%E9%A2%98%E8%AF%B7%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA-add-%E5%87%BD%E6%95%B0%E6%BB%A1%E8%B6%B3%E4%BB%A5%E4%B8%8B%E5%8A%9F%E8%83%BD)
- [第 85 题：react-router 里的 `<Link>` 标签和 `<a>` 标签有什么区别](#%E7%AC%AC-85-%E9%A2%98react-router-%E9%87%8C%E7%9A%84-link-%E6%A0%87%E7%AD%BE%E5%92%8C-a-%E6%A0%87%E7%AD%BE%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB)
- [第 86 题：周一算法题之「两数之和」](#%E7%AC%AC-86-%E9%A2%98%E5%91%A8%E4%B8%80%E7%AE%97%E6%B3%95%E9%A2%98%E4%B9%8B%E4%B8%A4%E6%95%B0%E4%B9%8B%E5%92%8C)
- [第 87 题：在输入框中如何判断输入的是一个正确的网址。](#%E7%AC%AC-87-%E9%A2%98%E5%9C%A8%E8%BE%93%E5%85%A5%E6%A1%86%E4%B8%AD%E5%A6%82%E4%BD%95%E5%88%A4%E6%96%AD%E8%BE%93%E5%85%A5%E7%9A%84%E6%98%AF%E4%B8%80%E4%B8%AA%E6%AD%A3%E7%A1%AE%E7%9A%84%E7%BD%91%E5%9D%80)
- [第 88 题：实现 convert 方法，把原始 list 转换成树形结构，要求尽可能降低时间复杂度](#%E7%AC%AC-88-%E9%A2%98%E5%AE%9E%E7%8E%B0-convert-%E6%96%B9%E6%B3%95%E6%8A%8A%E5%8E%9F%E5%A7%8B-list-%E8%BD%AC%E6%8D%A2%E6%88%90%E6%A0%91%E5%BD%A2%E7%BB%93%E6%9E%84%E8%A6%81%E6%B1%82%E5%B0%BD%E5%8F%AF%E8%83%BD%E9%99%8D%E4%BD%8E%E6%97%B6%E9%97%B4%E5%A4%8D%E6%9D%82%E5%BA%A6)
- [第 89 题：设计并实现 Promise.race()](#%E7%AC%AC-89-%E9%A2%98%E8%AE%BE%E8%AE%A1%E5%B9%B6%E5%AE%9E%E7%8E%B0-promiserace)
- [第 90 题：实现模糊搜索结果的关键词高亮显示](#%E7%AC%AC-90-%E9%A2%98%E5%AE%9E%E7%8E%B0%E6%A8%A1%E7%B3%8A%E6%90%9C%E7%B4%A2%E7%BB%93%E6%9E%9C%E7%9A%84%E5%85%B3%E9%94%AE%E8%AF%8D%E9%AB%98%E4%BA%AE%E6%98%BE%E7%A4%BA)
- [第 91 题：介绍下 HTTPS 中间人攻击](#%E7%AC%AC-91-%E9%A2%98%E4%BB%8B%E7%BB%8D%E4%B8%8B-https-%E4%B8%AD%E9%97%B4%E4%BA%BA%E6%94%BB%E5%87%BB)
- [第 92 题：已知数据格式，实现一个函数 fn 找出链条中所有的父级 id](#%E7%AC%AC-92-%E9%A2%98%E5%B7%B2%E7%9F%A5%E6%95%B0%E6%8D%AE%E6%A0%BC%E5%BC%8F%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E5%87%BD%E6%95%B0-fn-%E6%89%BE%E5%87%BA%E9%93%BE%E6%9D%A1%E4%B8%AD%E6%89%80%E6%9C%89%E7%9A%84%E7%88%B6%E7%BA%A7-id)
- [第 93 题：给定两个大小为 m 和 n 的有序数组 nums1 和 nums2。请找出这两个有序数组的中位数。要求算法的时间复杂度为 O(log(m+n))。](#%E7%AC%AC-93-%E9%A2%98%E7%BB%99%E5%AE%9A%E4%B8%A4%E4%B8%AA%E5%A4%A7%E5%B0%8F%E4%B8%BA-m-%E5%92%8C-n-%E7%9A%84%E6%9C%89%E5%BA%8F%E6%95%B0%E7%BB%84-nums1-%E5%92%8C-nums2%E8%AF%B7%E6%89%BE%E5%87%BA%E8%BF%99%E4%B8%A4%E4%B8%AA%E6%9C%89%E5%BA%8F%E6%95%B0%E7%BB%84%E7%9A%84%E4%B8%AD%E4%BD%8D%E6%95%B0%E8%A6%81%E6%B1%82%E7%AE%97%E6%B3%95%E7%9A%84%E6%97%B6%E9%97%B4%E5%A4%8D%E6%9D%82%E5%BA%A6%E4%B8%BA-ologmn)
- [第 94 题：vue 在 v-for 时给每项元素绑定事件需要用事件代理吗？为什么？](#%E7%AC%AC-94-%E9%A2%98vue-%E5%9C%A8-v-for-%E6%97%B6%E7%BB%99%E6%AF%8F%E9%A1%B9%E5%85%83%E7%B4%A0%E7%BB%91%E5%AE%9A%E4%BA%8B%E4%BB%B6%E9%9C%80%E8%A6%81%E7%94%A8%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86%E5%90%97%E4%B8%BA%E4%BB%80%E4%B9%88)
- [第 95 题：模拟实现一个深拷贝，并考虑对象相互引用以及 Symbol 拷贝的情况](#%E7%AC%AC-95-%E9%A2%98%E6%A8%A1%E6%8B%9F%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%B9%B6%E8%80%83%E8%99%91%E5%AF%B9%E8%B1%A1%E7%9B%B8%E4%BA%92%E5%BC%95%E7%94%A8%E4%BB%A5%E5%8F%8A-symbol-%E6%8B%B7%E8%B4%9D%E7%9A%84%E6%83%85%E5%86%B5)
- [第 96 题：介绍下前端加密的常见场景和方法](#%E7%AC%AC-96-%E9%A2%98%E4%BB%8B%E7%BB%8D%E4%B8%8B%E5%89%8D%E7%AB%AF%E5%8A%A0%E5%AF%86%E7%9A%84%E5%B8%B8%E8%A7%81%E5%9C%BA%E6%99%AF%E5%92%8C%E6%96%B9%E6%B3%95)
- [第 97 题：React 和 Vue 的 diff 时间复杂度从 O(n^3) 优化到 O(n) ，那么 O(n^3) 和 O(n) 是如何计算出来的？](#%E7%AC%AC-97-%E9%A2%98react-%E5%92%8C-vue-%E7%9A%84-diff-%E6%97%B6%E9%97%B4%E5%A4%8D%E6%9D%82%E5%BA%A6%E4%BB%8E-on%5E3-%E4%BC%98%E5%8C%96%E5%88%B0-on-%E9%82%A3%E4%B9%88-on%5E3-%E5%92%8C-on-%E6%98%AF%E5%A6%82%E4%BD%95%E8%AE%A1%E7%AE%97%E5%87%BA%E6%9D%A5%E7%9A%84)
- [第 98 题：写出如下代码的打印结果](#%E7%AC%AC-98-%E9%A2%98%E5%86%99%E5%87%BA%E5%A6%82%E4%B8%8B%E4%BB%A3%E7%A0%81%E7%9A%84%E6%89%93%E5%8D%B0%E7%BB%93%E6%9E%9C)
- [第 99 题：编程算法题](#%E7%AC%AC-99-%E9%A2%98%E7%BC%96%E7%A8%8B%E7%AE%97%E6%B3%95%E9%A2%98)
- [第 100 题：请写出如下代码的打印结果](#%E7%AC%AC-100-%E9%A2%98%E8%AF%B7%E5%86%99%E5%87%BA%E5%A6%82%E4%B8%8B%E4%BB%A3%E7%A0%81%E7%9A%84%E6%89%93%E5%8D%B0%E7%BB%93%E6%9E%9C)
- [第 101 题：修改以下 print 函数，使之输出 0 到 99，或者 99 到 0](#%E7%AC%AC-101-%E9%A2%98%E4%BF%AE%E6%94%B9%E4%BB%A5%E4%B8%8B-print-%E5%87%BD%E6%95%B0%E4%BD%BF%E4%B9%8B%E8%BE%93%E5%87%BA-0-%E5%88%B0-99%E6%88%96%E8%80%85-99-%E5%88%B0-0)
- [第 102 题：不用加减乘除运算符，求整数的7倍](#%E7%AC%AC-102-%E9%A2%98%E4%B8%8D%E7%94%A8%E5%8A%A0%E5%87%8F%E4%B9%98%E9%99%A4%E8%BF%90%E7%AE%97%E7%AC%A6%E6%B1%82%E6%95%B4%E6%95%B0%E7%9A%847%E5%80%8D)
- [第 103 题：模拟实现一个 localStorage](#%E7%AC%AC-103-%E9%A2%98%E6%A8%A1%E6%8B%9F%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA-localstorage)
- [第 104 题：模拟 localStorage 时如何实现过期时间功能](#%E7%AC%AC-104-%E9%A2%98%E6%A8%A1%E6%8B%9F-localstorage-%E6%97%B6%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E8%BF%87%E6%9C%9F%E6%97%B6%E9%97%B4%E5%8A%9F%E8%83%BD)
- [第 105 题：编程题](#%E7%AC%AC-105-%E9%A2%98%E7%BC%96%E7%A8%8B%E9%A2%98)
- [第 106 题：分别写出如下代码的返回值](#%E7%AC%AC-106-%E9%A2%98%E5%88%86%E5%88%AB%E5%86%99%E5%87%BA%E5%A6%82%E4%B8%8B%E4%BB%A3%E7%A0%81%E7%9A%84%E8%BF%94%E5%9B%9E%E5%80%BC)
- [第 107 题：考虑到性能问题，如何快速从一个巨大的数组中随机获取部分元素。](#%E7%AC%AC-107-%E9%A2%98%E8%80%83%E8%99%91%E5%88%B0%E6%80%A7%E8%83%BD%E9%97%AE%E9%A2%98%E5%A6%82%E4%BD%95%E5%BF%AB%E9%80%9F%E4%BB%8E%E4%B8%80%E4%B8%AA%E5%B7%A8%E5%A4%A7%E7%9A%84%E6%95%B0%E7%BB%84%E4%B8%AD%E9%9A%8F%E6%9C%BA%E8%8E%B7%E5%8F%96%E9%83%A8%E5%88%86%E5%85%83%E7%B4%A0)
- [第 108 题：请写出如下代码的打印结果](#%E7%AC%AC-108-%E9%A2%98%E8%AF%B7%E5%86%99%E5%87%BA%E5%A6%82%E4%B8%8B%E4%BB%A3%E7%A0%81%E7%9A%84%E6%89%93%E5%8D%B0%E7%BB%93%E6%9E%9C)
- [第 109 题：扩展题，请写出如下代码的打印结果](#%E7%AC%AC-109-%E9%A2%98%E6%89%A9%E5%B1%95%E9%A2%98%E8%AF%B7%E5%86%99%E5%87%BA%E5%A6%82%E4%B8%8B%E4%BB%A3%E7%A0%81%E7%9A%84%E6%89%93%E5%8D%B0%E7%BB%93%E6%9E%9C)
- [第 110 题：编程题，请写一个函数，完成以下功能](#%E7%AC%AC-110-%E9%A2%98%E7%BC%96%E7%A8%8B%E9%A2%98%E8%AF%B7%E5%86%99%E4%B8%80%E4%B8%AA%E5%87%BD%E6%95%B0%E5%AE%8C%E6%88%90%E4%BB%A5%E4%B8%8B%E5%8A%9F%E8%83%BD)
- [第 111 题：编程题，写个程序把 entry 转换成如下对象](#%E7%AC%AC-111-%E9%A2%98%E7%BC%96%E7%A8%8B%E9%A2%98%E5%86%99%E4%B8%AA%E7%A8%8B%E5%BA%8F%E6%8A%8A-entry-%E8%BD%AC%E6%8D%A2%E6%88%90%E5%A6%82%E4%B8%8B%E5%AF%B9%E8%B1%A1)
- [第 112 题：编程题，写个程序把 entry 转换成如下对象（跟昨日题目相反）](#%E7%AC%AC-112-%E9%A2%98%E7%BC%96%E7%A8%8B%E9%A2%98%E5%86%99%E4%B8%AA%E7%A8%8B%E5%BA%8F%E6%8A%8A-entry-%E8%BD%AC%E6%8D%A2%E6%88%90%E5%A6%82%E4%B8%8B%E5%AF%B9%E8%B1%A1%E8%B7%9F%E6%98%A8%E6%97%A5%E9%A2%98%E7%9B%AE%E7%9B%B8%E5%8F%8D)
- [第 113 题：编程题，根据以下要求，写一个数组去重函数（蘑菇街）](#%E7%AC%AC-113-%E9%A2%98%E7%BC%96%E7%A8%8B%E9%A2%98%E6%A0%B9%E6%8D%AE%E4%BB%A5%E4%B8%8B%E8%A6%81%E6%B1%82%E5%86%99%E4%B8%80%E4%B8%AA%E6%95%B0%E7%BB%84%E5%8E%BB%E9%87%8D%E5%87%BD%E6%95%B0%E8%98%91%E8%8F%87%E8%A1%97)
- [第 114 题：编程题，找出字符串中连续出现最多的字符和个数（蘑菇街）](#%E7%AC%AC-114-%E9%A2%98%E7%BC%96%E7%A8%8B%E9%A2%98%E6%89%BE%E5%87%BA%E5%AD%97%E7%AC%A6%E4%B8%B2%E4%B8%AD%E8%BF%9E%E7%BB%AD%E5%87%BA%E7%8E%B0%E6%9C%80%E5%A4%9A%E7%9A%84%E5%AD%97%E7%AC%A6%E5%92%8C%E4%B8%AA%E6%95%B0%E8%98%91%E8%8F%87%E8%A1%97)
- [第 115 题：写一个单向链数据结构的 js 实现并标注复杂度（水滴筹）](#%E7%AC%AC-115-%E9%A2%98%E5%86%99%E4%B8%80%E4%B8%AA%E5%8D%95%E5%90%91%E9%93%BE%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E7%9A%84-js-%E5%AE%9E%E7%8E%B0%E5%B9%B6%E6%A0%87%E6%B3%A8%E5%A4%8D%E6%9D%82%E5%BA%A6%E6%B0%B4%E6%BB%B4%E7%AD%B9)
- [第 116 题：输出以下代码运行结果](#%E7%AC%AC-116-%E9%A2%98%E8%BE%93%E5%87%BA%E4%BB%A5%E4%B8%8B%E4%BB%A3%E7%A0%81%E8%BF%90%E8%A1%8C%E7%BB%93%E6%9E%9C)
- [第 117 题：介绍下 http1.0、1.1、2.0 协议的区别？](#%E7%AC%AC-117-%E9%A2%98%E4%BB%8B%E7%BB%8D%E4%B8%8B-http101120-%E5%8D%8F%E8%AE%AE%E7%9A%84%E5%8C%BA%E5%88%AB)
- [第 118 题：vue 渲染大量数据时应该怎么优化？](#%E7%AC%AC-118-%E9%A2%98vue-%E6%B8%B2%E6%9F%93%E5%A4%A7%E9%87%8F%E6%95%B0%E6%8D%AE%E6%97%B6%E5%BA%94%E8%AF%A5%E6%80%8E%E4%B9%88%E4%BC%98%E5%8C%96)
- [第 119 题：vue 如何优化首页的加载速度？vue 首页白屏是什么问题引起的？如何解决呢？](#%E7%AC%AC-119-%E9%A2%98vue-%E5%A6%82%E4%BD%95%E4%BC%98%E5%8C%96%E9%A6%96%E9%A1%B5%E7%9A%84%E5%8A%A0%E8%BD%BD%E9%80%9F%E5%BA%A6vue-%E9%A6%96%E9%A1%B5%E7%99%BD%E5%B1%8F%E6%98%AF%E4%BB%80%E4%B9%88%E9%97%AE%E9%A2%98%E5%BC%95%E8%B5%B7%E7%9A%84%E5%A6%82%E4%BD%95%E8%A7%A3%E5%86%B3%E5%91%A2)
- [第 120 题：为什么 for 循环嵌套顺序会影响性能？](#%E7%AC%AC-120-%E9%A2%98%E4%B8%BA%E4%BB%80%E4%B9%88-for-%E5%BE%AA%E7%8E%AF%E5%B5%8C%E5%A5%97%E9%A1%BA%E5%BA%8F%E4%BC%9A%E5%BD%B1%E5%93%8D%E6%80%A7%E8%83%BD)
- [第 121 题：统计 1 ~ n 整数中出现 1 的次数。](#%E7%AC%AC-121-%E9%A2%98%E7%BB%9F%E8%AE%A1-1--n-%E6%95%B4%E6%95%B0%E4%B8%AD%E5%87%BA%E7%8E%B0-1-%E7%9A%84%E6%AC%A1%E6%95%B0)
- [第 122 题：webpack 打包 vue 速度太慢怎么办？](#%E7%AC%AC-122-%E9%A2%98webpack-%E6%89%93%E5%8C%85-vue-%E9%80%9F%E5%BA%A6%E5%A4%AA%E6%85%A2%E6%80%8E%E4%B9%88%E5%8A%9E)
- [第 123 题：vue 是如何对数组方法进行变异的？例如 push、pop、splice 等方法](#%E7%AC%AC-123-%E9%A2%98vue-%E6%98%AF%E5%A6%82%E4%BD%95%E5%AF%B9%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E8%BF%9B%E8%A1%8C%E5%8F%98%E5%BC%82%E7%9A%84%E4%BE%8B%E5%A6%82-pushpopsplice-%E7%AD%89%E6%96%B9%E6%B3%95)
- [第 124 题：永久性重定向（301）和临时性重定向（302）对 SEO 有什么影响](#%E7%AC%AC-124-%E9%A2%98%E6%B0%B8%E4%B9%85%E6%80%A7%E9%87%8D%E5%AE%9A%E5%90%91301%E5%92%8C%E4%B8%B4%E6%97%B6%E6%80%A7%E9%87%8D%E5%AE%9A%E5%90%91302%E5%AF%B9-seo-%E6%9C%89%E4%BB%80%E4%B9%88%E5%BD%B1%E5%93%8D)
- [第 125 题：算法题](#%E7%AC%AC-125-%E9%A2%98%E7%AE%97%E6%B3%95%E9%A2%98)
- [第 126 题：扑克牌问题](#%E7%AC%AC-126-%E9%A2%98%E6%89%91%E5%85%8B%E7%89%8C%E9%97%AE%E9%A2%98)
- [第 127 题：如何用 css 或 js 实现多行文本溢出省略效果，考虑兼容性](#%E7%AC%AC-127-%E9%A2%98%E5%A6%82%E4%BD%95%E7%94%A8-css-%E6%88%96-js-%E5%AE%9E%E7%8E%B0%E5%A4%9A%E8%A1%8C%E6%96%87%E6%9C%AC%E6%BA%A2%E5%87%BA%E7%9C%81%E7%95%A5%E6%95%88%E6%9E%9C%E8%80%83%E8%99%91%E5%85%BC%E5%AE%B9%E6%80%A7)
- [第 128 题：Http 状态码 301 和 302 的应用场景分别是什么](#%E7%AC%AC-128-%E9%A2%98http-%E7%8A%B6%E6%80%81%E7%A0%81-301-%E5%92%8C-302-%E7%9A%84%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF%E5%88%86%E5%88%AB%E6%98%AF%E4%BB%80%E4%B9%88)
- [第 129 题：输出以下代码执行结果](#%E7%AC%AC-129-%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%BB%93%E6%9E%9C)
- [第 130 题：输出以下代码执行结果，大致时间就好（不同于上题）](#%E7%AC%AC-130-%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%BB%93%E6%9E%9C%E5%A4%A7%E8%87%B4%E6%97%B6%E9%97%B4%E5%B0%B1%E5%A5%BD%E4%B8%8D%E5%90%8C%E4%BA%8E%E4%B8%8A%E9%A2%98)
- [第 131 题：接口如何防刷](#%E7%AC%AC-131-%E9%A2%98%E6%8E%A5%E5%8F%A3%E5%A6%82%E4%BD%95%E9%98%B2%E5%88%B7)
- [第 132 题：实现一个 Dialog 类，Dialog可以创建 dialog 对话框，对话框支持可拖拽（腾讯）](#%E7%AC%AC-132-%E9%A2%98%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA-dialog-%E7%B1%BBdialog%E5%8F%AF%E4%BB%A5%E5%88%9B%E5%BB%BA-dialog-%E5%AF%B9%E8%AF%9D%E6%A1%86%E5%AF%B9%E8%AF%9D%E6%A1%86%E6%94%AF%E6%8C%81%E5%8F%AF%E6%8B%96%E6%8B%BD%E8%85%BE%E8%AE%AF)
- [第 133 题：用 setTimeout 实现 setInterval，阐述实现的效果与 setInterval 的差异](#%E7%AC%AC-133-%E9%A2%98%E7%94%A8-settimeout-%E5%AE%9E%E7%8E%B0-setinterval%E9%98%90%E8%BF%B0%E5%AE%9E%E7%8E%B0%E7%9A%84%E6%95%88%E6%9E%9C%E4%B8%8E-setinterval-%E7%9A%84%E5%B7%AE%E5%BC%82)
- [第 134 题：求两个日期中间的有效日期](#%E7%AC%AC-134-%E9%A2%98%E6%B1%82%E4%B8%A4%E4%B8%AA%E6%97%A5%E6%9C%9F%E4%B8%AD%E9%97%B4%E7%9A%84%E6%9C%89%E6%95%88%E6%97%A5%E6%9C%9F)
- [第 135 题：算法题（盛大）](#%E7%AC%AC-135-%E9%A2%98%E7%AE%97%E6%B3%95%E9%A2%98%E7%9B%9B%E5%A4%A7)
- [第 136 题：如何实现骨架屏，说说你的思路](#%E7%AC%AC-136-%E9%A2%98%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E9%AA%A8%E6%9E%B6%E5%B1%8F%E8%AF%B4%E8%AF%B4%E4%BD%A0%E7%9A%84%E6%80%9D%E8%B7%AF)
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
## 前端面试题及答案汇总
### 第 1 题：写 React / Vue 项目时为什么要在列表组件中写 key，其作用是什么？
公司：滴滴、饿了么
解析：[第 1 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/1)
<br/>
### 第 2 题：`['1', '2', '3'].map(parseInt)` what & why ?
解析：[第 2 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/4)
<br/>
### 第 3 题：什么是防抖和节流？有什么区别？如何实现？
公司：挖财
解析：[第 3 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/5)
<br/>
### 第 4 题：介绍下 Set、Map、WeakSet 和 WeakMap 的区别？
解析：[第 4 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/6)
<br/>
### 第 5 题：介绍下深度优先遍历和广度优先遍历，如何实现？
解析：[第 5 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/9)
<br/>
### 第 6 题：请分别用深度优先思想和广度优先思想实现一个拷贝函数？
解析：[第 6 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/10)
<br/>
### 第 7 题：ES5/ES6 的继承除了写法以外还有什么区别？
解析：[第 7 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/20)
<br/>
### 第 8 题：setTimeout、Promise、Async/Await 的区别
解析：[第 8 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/33)
<br/>
### 第 9 题：Async/Await 如何通过同步的方式实现异步
公司：头条、微医
解析：[第 9 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/156)
<br/>
### 第 10 题：异步笔试题
> 请写出下面代码的运行结果
```js
async function async1() {
console.log('async1 start');
await async2();
console.log('async1 end');
}
async function async2() {
console.log('async2');
}
console.log('script start');
setTimeout(function() {
console.log('setTimeout');
}, 0)
async1();
new Promise(function(resolve) {
console.log('promise1');
resolve();
}).then(function() {
console.log('promise2');
});
console.log('script end');
```
解析：[第 10 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/7)
公司：头条
<br/>
### 第 11 题：算法手写题
> 已知如下数组：
>
> var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];
>
> 编写一个程序将数组扁平化去并除其中重复部分数据，最终得到一个升序且不重复的数组
公司：携程
解析：[第 11 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/8)
<br/>
### 第 12 题：JS 异步解决方案的发展历程以及优缺点。
公司：滴滴、挖财、微医、海康
解析：[第 12 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/11)
<br/>
### 第 13 题：Promise 构造函数是同步执行还是异步执行，那么 then 方法呢？
公司：微医
解析：[第 13 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/19)
<br/>
### 第 14 题：情人节福利题，如何实现一个 new
公司：兑吧
解析：[第 14 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/12)
<br/>
### 第 15 题：简单讲解一下http2的多路复用
公司：网易
解析：[第 15 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/14)
<br/>
### 第 16 题：谈谈你对TCP三次握手和四次挥手的理解
解析：[第 16 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/15)
<br/>
### 第 17 题：A、B 机器正常连接后，B 机器突然重启，问 A 此时处于 TCP 什么状态
> 如果A 与 B 建立了正常连接后，从未相互发过数据，这个时候 B 突然机器重启，问 A 此时处于 TCP 什么状态？如何消除服务器程序中的这个状态？（超纲题，了解即可）
解析：[第 17 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/21)
<br/>
### 第 18 题：React 中 setState 什么时候是同步的，什么时候是异步的？
公司：微医
解析：[第 18 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/17)
<br/>
### 第 19 题：React setState 笔试题，下面的代码输出什么？
```js
class Example extends React.Component {
constructor() {
super();
this.state = {
val: 0
};
}
componentDidMount() {
this.setState({val: this.state.val + 1});
console.log(this.state.val); // 第 1 次 log
this.setState({val: this.state.val + 1});
console.log(this.state.val); // 第 2 次 log
setTimeout(() => {
this.setState({val: this.state.val + 1});
console.log(this.state.val); // 第 3 次 log
this.setState({val: this.state.val + 1});
console.log(this.state.val); // 第 4 次 log
}, 0);
}
render() {
return null;
}
};
```
解析：[第 19 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/18)
<br/>
### 第 20 题：介绍下 npm 模块安装机制，为什么输入 npm install 就可以自动安装对应的模块？
解析：[第 20 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/22)
<br/>
### 第 21 题：有以下 3 个判断数组的方法，请分别介绍它们之间的区别和优劣
> Object.prototype.toString.call() 、 instanceof 以及 Array.isArray()
解析：[第 21 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/23)
<br/>
### 第 22 题：介绍下重绘和回流（Repaint & Reflow），以及如何进行优化
解析：[第 22 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/24)
<br/>
### 第 23 题：介绍下观察者模式和订阅-发布模式的区别，各自适用于什么场景
解析：[第 23 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/25)
<br/>
### 第 24 题：聊聊 Redux 和 Vuex 的设计思想
解析：[第 24 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/45)
<br/>
### 第 25 题：说说浏览器和 Node 事件循环的区别
解析：[第 25 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/26)
<br/>
### 第 26 题：介绍模块化发展历程
可从IIFE、AMD、CMD、CommonJS、UMD、webpack(require.ensure)、ES Module、`<script type="module">` 这几个角度考虑。
解析：[第 26 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/28)
<br/>
### 第 27 题：全局作用域中，用 const 和 let 声明的变量不在 window 上，那到底在哪里？如何去获取？。
解析：[第 27 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/30)
<br/>
### 第 28 题：cookie 和 token 都存放在 header 中，为什么不会劫持 token？
解析：[第 28 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/31)
<br/>
### 第 29 题：聊聊 Vue 的双向数据绑定，Model 如何改变 View，View 又是如何改变 Model 的
解析：[第 29 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/34)
<br/>
### 第 30 题：两个数组合并成一个数组
请把两个数组 ['A1', 'A2', 'B1', 'B2', 'C1', 'C2', 'D1', 'D2'] 和 ['A', 'B', 'C', 'D']，合并为 ['A1', 'A2', 'A', 'B1', 'B2', 'B', 'C1', 'C2', 'C', 'D1', 'D2', 'D']。
解析： [第 30 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/39)
<br/>
### 第 31 题：改造下面的代码，使之输出0 - 9，写出你能想到的所有解法。
```js
for (var i = 0; i< 10; i++){
setTimeout(() => {
console.log(i);
}, 1000)
}
```
解析：[第 31 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/43)
<br/>
### 第 32 题：Virtual DOM 真的比操作原生 DOM 快吗？谈谈你的想法。
解析：[第 32 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/47)
<br/>
### 第 33 题：下面的代码打印什么内容，为什么？
```js
var b = 10;
(function b(){
b = 20;
console.log(b);
})();
```
解析：[第 33 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/48)
<br/>
### 第 34 题：简单改造下面的代码，使之分别打印 10 和 20。
```js
var b = 10;
(function b(){
b = 20;
console.log(b);
})();
```
解析：[第 34 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/51)
<br/>
### 第 35 题：浏览器缓存读取规则
可以分成 Service Worker、Memory Cache、Disk Cache 和 Push Cache，那请求的时候 from memory cache 和 from disk cache 的依据是什么，哪些数据什么时候存放在 Memory Cache 和 Disk Cache中？
解析：[第 35 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/53)
<br/>
### 第 36 题：使用迭代的方式实现 flatten 函数。
解析：[第 36 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/54)
<br/>
### 第 37 题：为什么 Vuex 的 mutation 和 Redux 的 reducer 中不能做异步操作？
解析：[第 37 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/65)
<br/>
### 第 38 题：下面代码中 a 在什么情况下会打印 1？
```js
var a = ?;
if(a == 1 && a == 2 && a == 3){
console.log(1);
}
```
解析：[第 38 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/57)
公司：京东
<br/>
### 第 39 题：介绍下 BFC 及其应用。
解析：[第 39 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/59)
<br/>
### 第 40 题：在 Vue 中，子组件为何不可以修改父组件传递的 Prop
如果修改了，Vue 是如何监控到属性的修改并给出警告的。
解析：[第 40 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/60)
<br/>
### 第 41 题：下面代码输出什么
```js
var a = 10;
(function () {
console.log(a)
a = 5
console.log(window.a)
var a = 20;
console.log(a)
})()
```
解析：[第 41题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/61)
<br/>
### 第 42 题：实现一个 sleep 函数
比如 sleep(1000) 意味着等待1000毫秒，可从 Promise、Generator、Async/Await 等角度实现
解析：[第 42 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/63)
<br/>
### 第 43 题：使用 sort() 对数组 [3, 15, 8, 29, 102, 22] 进行排序，输出结果
解析：[第 43 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/66)
<br/>
### 第 44 题：介绍 HTTPS 握手过程
解析：[第 44 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/70)
<br/>
### 第 45 题：HTTPS 握手过程中，客户端如何验证证书的合法性
解析：[第 45 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/74)
<br/>
### 第 46 题：输出以下代码执行的结果并解释为什么
```js
var obj = {
'2': 3,
'3': 4,
'length': 2,
'splice': Array.prototype.splice,
'push': Array.prototype.push
}
obj.push(1)
obj.push(2)
console.log(obj)
```
解析：[第 46 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/76)
<br/>
### 第 47 题：双向绑定和 vuex 是否冲突
解析：[第 47 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/81)
<br/>
### 第 48 题：call 和 apply 的区别是什么，哪个性能更好一些
解析：[第 48 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/84)
<br/>
### 第 49 题：为什么通常在发送数据埋点请求的时候使用的是 1x1 像素的透明 gif 图片？
解析：[第 49 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/87)
<br/>
### 第 50 题：实现 (5).add(3).minus(2) 功能。
> 例： 5 + 3 - 2，结果为 6
解析：[第 50 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/88)
公司：百度
<br/>
### 第 51 题：Vue 的响应式原理中 Object.defineProperty 有什么缺陷？
为什么在 Vue3.0 采用了 Proxy，抛弃了 Object.defineProperty？
解析：[第 51 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/90)
<br/>
### 第 52 题：怎么让一个 div 水平垂直居中
解析：[第 52 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/92)
<br/>
### 第 53 题：输出以下代码的执行结果并解释为什么
```js
var a = {n: 1};
var b = a;
a.x = a = {n: 2};
console.log(a.x)
console.log(b.x)
```
解析：[第 53 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/93)
<br/>
### 第 54 题：冒泡排序如何实现，时间复杂度是多少， 还可以如何改进？
解析：[第 54 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/94)
<br/>
### 第 55 题：某公司 1 到 12 月份的销售额存在一个对象里面
如下：{1:222, 2:123, 5:888}，请把数据处理为如下结构：[222, 123, null, null, 888, null, null, null, null, null, null, null]。
解析：[第 55 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/96)
<br/>
### 第 56 题：要求设计 LazyMan 类，实现以下功能。
```js
LazyMan('Tony');
// Hi I am Tony
LazyMan('Tony').sleep(10).eat('lunch');
// Hi I am Tony
// 等待了10秒...
// I am eating lunch
LazyMan('Tony').eat('lunch').sleep(10).eat('dinner');
// Hi I am Tony
// I am eating lunch
// 等待了10秒...
// I am eating diner
LazyMan('Tony').eat('lunch').eat('dinner').sleepFirst(5).sleep(10).eat('junk food');
// Hi I am Tony
// 等待了5秒...
// I am eating lunch
// I am eating dinner
// 等待了10秒...
// I am eating junk food
```
解析：[第 56 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/98)
<br/>
### 第 57 题：分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景。
解析：[第 57 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/100)
<br/>
### 第 58 题：箭头函数与普通函数（function）的区别是什么？构造函数（function）可以使用 new 生成实例，那么箭头函数可以吗？为什么？
解析：[第 58 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/101)
<br/>
### 第 59 题：给定两个数组，写一个方法来计算它们的交集。
> 例如：给定 nums1 = [1, 2, 2, 1]，nums2 = [2, 2]，返回 [2, 2]。
解析：[第 59 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/102)
<br/>
### 第 60 题：已知如下代码，如何修改才能让图片宽度为 300px ？注意下面代码不可修改。
> `<img src="1.jpg" style="width:480px!important;”>`
解析：[第 60 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/105)
<br/>
### 第 61 题：介绍下如何实现 token 加密
解析：[第 61 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/106)
<br/>
### 第 62 题：redux 为什么要把 reducer 设计成纯函数
解析：[第 62 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/107)
<br/>
### 第 63 题：如何设计实现无缝轮播
解析：[第 63 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/108)
<br/>
### 第 64 题：模拟实现一个 Promise.finally
解析：[第 64 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/109)
<br/>
### 第 65 题： `a.b.c.d` 和 `a['b']['c']['d']`，哪个性能更高？
解析：[第 65 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/111)
<br/>
### 第 66 题：ES6 代码转成 ES5 代码的实现思路是什么
解析：[第 66 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/112)
<br/>
### 第 67 题：数组编程题
随机生成一个长度为 10 的整数类型的数组，例如 `[2, 10, 3, 4, 5, 11, 10, 11, 20]`，将其排列成一个新数组，要求新数组形式如下，例如 `[[2, 3, 4, 5], [10, 11], [20]]`。
解析：[第 67 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/113)
<br/>
### 第 68 题： 如何解决移动端 Retina 屏 1px 像素问题
解析：[第 68 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/115)
<br/>
### 第 69 题： 如何把一个字符串的大小写取反（大写变小写小写变大写），例如 ’AbC' 变成 'aBc' 。
解析：[第 69 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/116)
<br/>
### 第 70 题： 介绍下 webpack 热更新原理，是如何做到在不刷新浏览器的前提下更新页面的
解析：[第 70 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/118)
<br/>
### 第 71 题： 实现一个字符串匹配算法，从长度为 n 的字符串 S 中，查找是否存在字符串 T，T 的长度是 m，若存在返回所在位置。
解析：[第 71 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/119)
<br/>
### 第 72 题： 为什么普通 `for` 循环的性能远远高于 `forEach` 的性能，请解释其中的原因。
解析：[第 72 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/121)
<br/>
### 第 73 题： 介绍下 BFC、IFC、GFC 和 FFC
解析：[第 73 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/122)
<br/>
### 第 74 题： 使用 JavaScript Proxy 实现简单的数据绑定
解析：[第 74 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/123)
<br/>
### 第 75 题：数组里面有10万个数据，取第一个元素和第10万个元素的时间相差多少
解析：[第 75 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/124)
<br/>
### 第 76 题：输出以下代码运行结果
```js
// example 1
var a={}, b='123', c=123;
a[b]='b';
a[c]='c';
console.log(a[b]);
---------------------
// example 2
var a={}, b=Symbol('123'), c=Symbol('123');
a[b]='b';
a[c]='c';
console.log(a[b]);
---------------------
// example 3
var a={}, b={key:'123'}, c={key:'456'};
a[b]='b';
a[c]='c';
console.log(a[b]);
```
解析：[第 76 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/125)
<br/>
### 第 77 题：算法题「旋转数组」
> 给定一个数组，将数组中的元素向右移动 k 个位置，其中 k 是非负数。
示例 1：
```js
输入: [1, 2, 3, 4, 5, 6, 7] 和 k = 3
输出: [5, 6, 7, 1, 2, 3, 4]
解释:
向右旋转 1 步: [7, 1, 2, 3, 4, 5, 6]
向右旋转 2 步: [6, 7, 1, 2, 3, 4, 5]
向右旋转 3 步: [5, 6, 7, 1, 2, 3, 4]
```
示例 2：
```js
输入: [-1, -100, 3, 99] 和 k = 2
输出: [3, 99, -1, -100]
解释:
向右旋转 1 步: [99, -1, -100, 3]
向右旋转 2 步: [3, 99, -1, -100]
```
解析：[第 77 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/126)
<br/>
### 第 78 题：Vue 的父组件和子组件生命周期钩子执行顺序是什么
解析：[第 78 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/128)
<br/>
### 第 79 题：input 搜索如何防抖，如何处理中文输入
解析：[第 79 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/129)
<br/>
### 第 80 题：介绍下 Promise.all 使用、原理实现及错误处理
解析：[第 80 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/130)
<br/>
### 第 81 题：打印出 1 - 10000 之间的所有对称数
> 例如：121、1331 等
解析：[第 81 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/131)
<br/>
### 第 82 题：周一算法题之「移动零」
> 给定一个数组 nums，编写一个函数将所有 0 移动到数组的末尾，同时保持非零元素的相对顺序。
>
> 示例:
>
> ```
> 输入: [0,1,0,3,12]
> 输出: [1,3,12,0,0]
> ```
>
> 说明:
>
> 1. 必须在原数组上操作，不能拷贝额外的数组。
>
> 1. 尽量减少操作次数。
解析：[第 82 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/132)
<br/>
### 第 83 题：var、let 和 const 区别的实现原理是什么
解析：[第 83 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/133)
<br/>
### 第 84 题：请实现一个 add 函数，满足以下功能。
> ```js
> add(1); // 1
> add(1)(2); // 3
> add(1)(2)(3)；// 6
> add(1)(2, 3); // 6
> add(1, 2)(3); // 6
> add(1, 2, 3); // 6
> ```
解析：[第 84 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/134)
<br/>
### 第 85 题：react-router 里的 `<Link>` 标签和 `<a>` 标签有什么区别
> 如何禁掉 `<a>` 标签默认事件，禁掉之后如何实现跳转。
解析：[第 85 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/135)
<br/>
### 第 86 题：周一算法题之「两数之和」
给定一个整数数组和一个目标值，找出数组中和为目标值的两个数。
你可以假设每个输入只对应一种答案，且同样的元素不能被重复利用。
示例：
```js
给定 nums = [2, 7, 11, 15], target = 9
因为 nums[0] + nums[1] = 2 + 7 = 9
所以返回 [0, 1]
```
解析：[第 86 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/136)
公司：京东、快手
<br/>
### 第 87 题：在输入框中如何判断输入的是一个正确的网址。
解析：[第 87 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/138)
<br/>
### 第 88 题：实现 convert 方法，把原始 list 转换成树形结构，要求尽可能降低时间复杂度
以下数据结构中，id 代表部门编号，name 是部门名称，parentId 是父部门编号，为 0 代表一级部门，现在要求实现一个 convert 方法，把原始 list 转换成树形结构，parentId 为多少就挂载在该 id 的属性 children 数组下，结构如下：
```js
// 原始 list 如下
let list =[
{id:1,name:'部门A',parentId:0},
{id:2,name:'部门B',parentId:0},
{id:3,name:'部门C',parentId:1},
{id:4,name:'部门D',parentId:1},
{id:5,name:'部门E',parentId:2},
{id:6,name:'部门F',parentId:3},
{id:7,name:'部门G',parentId:2},
{id:8,name:'部门H',parentId:4}
];
const result = convert(list, ...);
// 转换后的结果如下
let result = [
{
id: 1,
name: '部门A',
parentId: 0,
children: [
{
id: 3,
name: '部门C',
parentId: 1,
children: [
{
id: 6,
name: '部门F',
parentId: 3
}, {
id: 16,
name: '部门L',
parentId: 3
}
]
},
{
id: 4,
name: '部门D',
parentId: 1,
children: [
{
id: 8,
name: '部门H',
parentId: 4
}
]
}
]
},
···
];
```
解析：[第 88 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/139)
<br/>
### 第 89 题：设计并实现 Promise.race()
解析：[第 89 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/140)
<br/>
### 第 90 题：实现模糊搜索结果的关键词高亮显示
<img src="https://ws3.sinaimg.cn/large/006tNc79ly1g43dykaccuj30u01hc49s.jpg" height="800"/>
解析：[第 90 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/141)
<br/>
### 第 91 题：介绍下 HTTPS 中间人攻击
解析：[第 91 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/142)
<br/>
### 第 92 题：已知数据格式，实现一个函数 fn 找出链条中所有的父级 id
> ```js
> const value = '112'
> const fn = (value) => {
> ...
> }
> fn(value) // 输出 [1， 11， 112]
> ```
<img src="https://ws1.sinaimg.cn/large/006tNc79gy1g45a04ntttj30k20wen01.jpg" height="800"/>
解析：[第 92 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/143)
<br/>
### 第 93 题：给定两个大小为 m 和 n 的有序数组 nums1 和 nums2。请找出这两个有序数组的中位数。要求算法的时间复杂度为 O(log(m+n))。
示例 1：
```js
nums1 = [1, 3]
nums2 = [2]
```
中位数是 2.0
示例 2：
```js
nums1 = [1, 2]
nums2 = [3, 4]
```
中位数是(2 + 3) / 2 = 2.5
解析：[第 93 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/144)
<br/>
### 第 94 题：vue 在 v-for 时给每项元素绑定事件需要用事件代理吗？为什么？
解析：[第 94 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/145)
<br/>
### 第 95 题：模拟实现一个深拷贝，并考虑对象相互引用以及 Symbol 拷贝的情况
解析：[第 95 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/148)
<br/>
### 第 96 题：介绍下前端加密的常见场景和方法
解析：[第 96 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/150)
<br/>
### 第 97 题：React 和 Vue 的 diff 时间复杂度从 O(n^3) 优化到 O(n) ，那么 O(n^3) 和 O(n) 是如何计算出来的？
解析：[第 97 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/151)
<br/>
### 第 98 题：写出如下代码的打印结果
```js
function changeObjProperty(o) {
o.siteUrl = "http://www.baidu.com"
o = new Object()
o.siteUrl = "http://www.google.com"
}
let webSite = new Object();
changeObjProperty(webSite);
console.log(webSite.siteUrl);
```
公司：京东
解析：[第 98 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/152)
<br/>
### 第 99 题：编程算法题
> 用 JavaScript 写一个函数，输入 int 型，返回整数逆序后的字符串。如：输入整型 1234，返回字符串“4321”。要求必须使用递归函数调用，不能用全局变量，输入函数必须只有一个参数传入，必须返回字符串。
公司：bilibili
解析：[第 99 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/153)
<br/>
### 第 100 题：请写出如下代码的打印结果
> ```js
> function Foo() {
> Foo.a = function() {
> console.log(1)
> }
> this.a = function() {
> console.log(2)
> }
> }
> Foo.prototype.a = function() {
> console.log(3)
> }
> Foo.a = function() {
> console.log(4)
> }
> Foo.a();
> let obj = new Foo();
> obj.a();
> Foo.a();
> ```
公司：京东
解析：[第 100 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/155)
<br/>
### 第 101 题：修改以下 print 函数，使之输出 0 到 99，或者 99 到 0
> 要求：
>
> 1、只能修改 `setTimeout` 到 `Math.floor(Math.random() * 1000` 的代码
>
> 2、不能修改 `Math.floor(Math.random() * 1000`
>
> 3、不能使用全局变量
>
> ```js
> function print(n){
> setTimeout(() => {
> console.log(n);
> }, Math.floor(Math.random() * 1000));
> }
> for(var i = 0; i < 100; i++){
> print(i);
> }
> ```
公司：头条
解析：[第 101 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/158)
<br/>
### 第 102 题：不用加减乘除运算符，求整数的7倍
解析：[第 102 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/161)
<br/>
### 第 103 题：模拟实现一个 localStorage
公司：阿里
解析：[第 103 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/166)
<br/>
### 第 104 题：模拟 localStorage 时如何实现过期时间功能
公司：阿里
解析：[第 104 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/171)
<br/>
### 第 105 题：编程题
> url有三种情况
>
> ```js
> https://www.xx.cn/api?keyword=&level1=&local_batch_id=&elective=&local_province_id=33
> https://www.xx.cn/api?keyword=&level1=&local_batch_id=&elective=800&local_province_id=33
> https://www.xx.cn/api?keyword=&level1=&local_batch_id=&elective=800,700&local_province_id=33
> ```
>
> 匹配elective后的数字输出（写出你认为的最优解法）:
>
> ```js
> [] || ['800'] || ['800','700']
> ```
解析：[第 105 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/177)
<br/>
### 第 106 题：分别写出如下代码的返回值
> ```js
> String('11') == new String('11');
> String('11') === new String('11');
> ```
公司：京东
解析：[第 106 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/180)
<br/>
### 第 107 题：考虑到性能问题，如何快速从一个巨大的数组中随机获取部分元素。
> 比如有个数组有100K个元素，从中不重复随机选取10K个元素。
解析：[第 107 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/187)
<br/>
### 第 108 题：请写出如下代码的打印结果
> ```js
> var name = 'Tom';
> (function() {
> if (typeof name == 'undefined') {
> var name = 'Jack';
> console.log('Goodbye ' + name);
> } else {
> console.log('Hello ' + name);
> }
> })();
> ```
公司：京东
解析：[第 108 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/190)
<br/>
### 第 109 题：扩展题，请写出如下代码的打印结果
> ```js
> var name = 'Tom';
> (function() {
> if (typeof name == 'undefined') {
> name = 'Jack';
> console.log('Goodbye ' + name);
> } else {
> console.log('Hello ' + name);
> }
> })();
> ```
公司：京东
解析：[第 109 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/198)
<br/>
### 第 110 题：编程题，请写一个函数，完成以下功能
> 输入
> ``'1, 2, 3, 5, 7, 8, 10'``
> 输出
> ``'1~3, 5, 7~8, 10'``
解析：[第 110 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/201)
<br/>
### 第 111 题：编程题，写个程序把 entry 转换成如下对象
> ```js
> var entry = {
> a: {
> b: {
> c: {
> dd: 'abcdd'
> }
> },
> d: {
> xx: 'adxx'
> },
> e: 'ae'
> }
> }
>
> // 要求转换成如下对象
> var output = {
> 'a.b.c.dd': 'abcdd',
> 'a.d.xx': 'adxx',
> 'a.e': 'ae'
> }
> ```
解析：[第 111 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/206)
<br/>
### 第 112 题：编程题，写个程序把 entry 转换成如下对象（跟昨日题目相反）
> ```js
> var entry = {
> 'a.b.c.dd': 'abcdd',
> 'a.d.xx': 'adxx',
> 'a.e': 'ae'
> }
>
> // 要求转换成如下对象
> var output = {
> a: {
> b: {
> c: {
> dd: 'abcdd'
> }
> },
> d: {
> xx: 'adxx'
> },
> e: 'ae'
> }
> }
> ```
解析：[第 112 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/212)
<br/>
### 第 113 题：编程题，根据以下要求，写一个数组去重函数（蘑菇街）
> 1. 如传入的数组元素为`[123, "meili", "123", "mogu", 123]`，则输出：`[123, "meili", "123", "mogu"]`
> 2. 如传入的数组元素为`[123, [1, 2, 3], [1, "2", 3], [1, 2, 3], "meili"]`，则输出：`[123, [1, 2, 3], [1, "2", 3], "meili"]`
> 3. 如传入的数组元素为`[123, {a: 1}, {a: {b: 1}}, {a: "1"}, {a: {b: 1}}, "meili"]`，则输出：`[123, {a: 1}, {a: {b: 1}}, {a: "1"}, "meili"]`
解析：[第 113 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/215)
<br/>
### 第 114 题：编程题，找出字符串中连续出现最多的字符和个数（蘑菇街）
> ```js
> 'abcaakjbb' => {'a':2,'b':2}
> 'abbkejsbcccwqaa' => {'c':3}
> ```
解析：[第 114 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/220)
<br/>
### 第 115 题：写一个单向链数据结构的 js 实现并标注复杂度（水滴筹）
解析：[第 115 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/226)
<br/>
### 第 116 题：输出以下代码运行结果
> ```js
> 1 + "1"
>
> 2 * "2"
>
> [1, 2] + [2, 1]
>
> "a" + + "b"
> ```
解析：[第 116 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/229)
<br/>
### 第 117 题：介绍下 http1.0、1.1、2.0 协议的区别？
解析：[第 117 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/232)
<br/>
### 第 118 题：vue 渲染大量数据时应该怎么优化？
解析：[第 118 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/233)
<br/>
### 第 119 题：vue 如何优化首页的加载速度？vue 首页白屏是什么问题引起的？如何解决呢？
解析：[第 119 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/234)
<br/>
### 第 120 题：为什么 for 循环嵌套顺序会影响性能？
```js
var t1 = new Date().getTime()
for (let i = 0; i < 100; i++) {
for (let j = 0; j < 1000; j++) {
for (let k = 0; k < 10000; k++) {
}
}
}
var t2 = new Date().getTime()
console.log('first time', t2 - t1)
for (let i = 0; i < 10000; i++) {
for (let j = 0; j < 1000; j++) {
for (let k = 0; k < 100; k++) {
}
}
}
var t3 = new Date().getTime()
console.log('two time', t3 - t2)
```
解析：[第 120 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/235)
<br/>
### 第 121 题：统计 1 ~ n 整数中出现 1 的次数。
例如统计 1 ~ 400W 出现 1 的次数。
解析：[第 121 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/237)
<br/>
### 第 122 题：webpack 打包 vue 速度太慢怎么办？
解析：[第 122 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/238)
<br/>
### 第 123 题：vue 是如何对数组方法进行变异的？例如 push、pop、splice 等方法
解析：[第 123 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/239)
<br/>
### 第 124 题：永久性重定向（301）和临时性重定向（302）对 SEO 有什么影响
解析：[第 124 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/241)
<br/>
### 第 125 题：算法题
如何将`[{id: 1}, {id: 2, pId: 1}, ...]` 的重复数组（有重复数据）转成树形结构的数组 `[{id: 1, child: [{id: 2, pId: 1}]}, ...]` （需要去重）
解析：[第 125 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/243)
<br/>
### 第 126 题：扑克牌问题
> 有一堆扑克牌，将牌堆第一张放到桌子上，再将接下来的牌堆的第一张放到牌底，如此往复；
>
> 最后桌子上的牌顺序为： (牌底) 1,2,3,4,5,6,7,8,9,10,11,12,13 (牌顶)；
>
> 问：原来那堆牌的顺序，用函数实现。
解析：[第 126 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/245)
<br/>
### 第 127 题：如何用 css 或 js 实现多行文本溢出省略效果，考虑兼容性
解析：[第 127 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/246)
<br/>
### 第 128 题：Http 状态码 301 和 302 的应用场景分别是什么
解析：[第 128 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/249)
<br/>
### 第 129 题：输出以下代码执行结果
> ```js
> function wait() {
> return new Promise(resolve =>
> setTimeout(resolve, 10 * 1000)
> )
> }
>
> async function main() {
> console.time();
> const x = wait();
> const y = wait();
> const z = wait();
> await x;
> await y;
> await z;
> console.timeEnd();
> }
> main();
> ```
解析：[第 129 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/251)
<br/>
### 第 130 题：输出以下代码执行结果，大致时间就好（不同于上题）
> ```js
> function wait() {
> return new Promise(resolve =>
> setTimeout(resolve, 10 * 1000)
> )
> }
>
> async function main() {
> console.time();
> await wait();
> await wait();
> await wait();
> console.timeEnd();
> }
> main();
> ```
解析：[第 130 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/253)
<br/>
### 第 131 题：接口如何防刷
解析：[第 131 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/254)
<br/>
### 第 132 题：实现一个 Dialog 类，Dialog可以创建 dialog 对话框，对话框支持可拖拽（腾讯）
解析：[第 132 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/257)
<br/>
### 第 133 题：用 setTimeout 实现 setInterval，阐述实现的效果与 setInterval 的差异
解析：[第 133 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/259)
<br/>
### 第 134 题：求两个日期中间的有效日期
> 如 2015-2-8 到 2015-3-3，返回【2015-2-8 2015-2-9...】
解析：[第 134 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/264)
<br/>
### 第 135 题：算法题（盛大）
> 在一个字符串数组中有红、黄、蓝三种颜色的球，且个数不相等、顺序不一致，请为该数组排序。使得排序后数组中球的顺序为:黄、红、蓝。
>
> 例如：红蓝蓝黄红黄蓝红红黄红，排序后为：黄黄黄红红红红红蓝蓝蓝。
解析：[第 135 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/266)
<br/>
### 第 136 题：如何实现骨架屏，说说你的思路
解析：[第 136 题](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/270)
<br/>
gitextract_2doicp7v/
├── .gitattributes
├── .gitignore
├── README.md
└── datum/
├── summary-english.md
└── summary.md
Condensed preview — 5 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (97K chars).
[
{
"path": ".gitattributes",
"chars": 138,
"preview": "*.md linguist-language=JavaScript\n*.js linguist-language=JavaScript\n*.css linguist-language=JavaScript\n*.html linguist-l"
},
{
"path": ".gitignore",
"chars": 10,
"preview": ".DS_Store\n"
},
{
"path": "README.md",
"chars": 6290,
"preview": "# Daily-Interview-Question\n\n加入「前端面试互助群」学习小组，搜索公众号「高级前端进阶」，关注即可加入！\n\n工作日每天一道大厂前端面试题，一年后再回头，会感谢曾经努力的自己！\n\n[线上版本阅读更流畅，点击阅读](h"
},
{
"path": "datum/summary-english.md",
"chars": 28512,
"preview": "## Front-end interview questions and answers summary\n\n\n### Question 1: Why do you write a key in a list of a component w"
},
{
"path": "datum/summary.md",
"chars": 57828,
"preview": "<!-- START doctoc generated TOC please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD "
}
]
About this extraction
This page contains the full source code of the Advanced-Frontend/Daily-Interview-Question GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 5 files (90.6 KB), approximately 41.5k tokens. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.