2020面试题汇总

持续更新中...

记录一下面试被问到的技术问题，顺便回顾一下知识点。

>> 02.19 18:06 --------------------------------------------

原生发一个ajax请求

1. 创建异步对象 var xhr = new XMLHttpRequest();
2. 设置请求行 open(请求方式，请求url) xhr.open("get","validate.php?username="+name)
3. 设置请求（GET方式忽略此步骤）头:setRequestHeader() xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
4. 设置请求体 send()xhr.send(null) 或 xhr.send("username="+name);
5. 让异步对象接收服务器的响应数据

xhr.onreadystatechange = function(){ 
    if(xhr.status == 200 && xhr.readyState == 4){ 
        console.log(xhr.responseText);
    }
}

• readyState
  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成，且响应已就绪

浏览器敲回车到渲染整个页面的过程

1. 读取缓存：搜索自身的 DNS 缓存。(如果 DNS 缓存中找到IP 地址就跳过了接下来查找 IP 地址步骤，直接访问该 IP 地址。)
2. DNS 解析：将域名解析成 IP 地址
3. TCP 连接：TCP 三次握手，简易描述三次握手
   • 客户端：服务端你在么？
   • 服务端：客户端我在，你要连接我么？
   • 客户端：是的服务端，我要连接。
   • 连接打通，可以开始请求了
4. 发送 HTTP 请求
5. 服务器处理请求并返回 HTTP 报文
6. 浏览器解析渲染页面
7. 断开连接：TCP 四次挥手

http和https的区别

• HTTPS协议可以理解为HTTP协议的升级，就是在HTTP的基础上增加了 数据加密。在数据进行传输之前，对数据进行加密，然后再发送到服务器。这样，就算数据被第三者所截获，但是由于数据是加密的，所以你的个人信息让然是安全的。这就是HTTP和HTTPS的最大区别。

闭包的应用场景

• 参考
• 原生的setTimeout传递的第一个函数不能带参数，通过闭包可以实现传参效果
• 函数防抖
• 封装私有变量

react 的事件和原生事件区别

• 参考
• React合成事件一套机制：React并不是将click事件直接绑定在dom上面，而是采用事件冒泡的形式冒泡到document上面，然后React将事件封装给正式的函数处理运行和处理。

>> 02.19 17:06 --------------------------------------------

箭头函数和普通函数的区别

• 箭头函数是匿名函数，不能作为构造函数，不能使用new
• 箭头函数不绑定arguments，取而代之用rest参数...解决
• 箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值

let和var的区别，什么时变量提升

• let、const不存在变量提升、不允许重复声明、块级作用域
• 变量提升：变量可以在声明之前使用，值为undefined

for in 和 for of 的区别 怎么避免原型链属性被遍历？

• for in 取 key； for of 取 value
• for of 无法遍历对象
• 一个数据结构只要部署了 Symbol.iterator 属性, 就被视为具有 iterator接口, 就可以使用 for of循环

Promise的用法

• new Promise((resolve, reject) => ...).then().catch()

setState时发生了什么

• 参考
• 可以接受一个对象或者一个函数（接受参数为前一个state和props），第二个参数是一个回调函数用于处理状态更新后的操作
• setState()方法通过一个队列机制实现state更新，当执行setState()的时候，会将需要更新的state合并之后放入状态队列，而不会立即更新this.state(可以和浏览器的事件队列类比)。如果我们不使用setState而是使用this.state.key来修改，将不会触发组件的re-render。

react hook的设计原由

• 参考
• 在组件之间复用状态逻辑很难
• 相互关联且需要对照修改的代码被进行了拆分，而完全不相关的代码却在同一个方法中组合在一起。如此很容易产生 bug，并且导致逻辑不一致。

react如何阻止状态更新

• 利用shouldComponentUpdate

react中key的作用 有相同key时怎么处理

• 有了key属性后，就可以与组件建立了一种对应关系，每个key 对应一个组件，相同的key react认为是同一个组件，这样后续相同的key对应组件都不会被创建
• 如果你选择不指定显式的 key 值，那么 React 将默认使用索引用作为列表项目的 key 值

react父子组件之间传递数据的方式

• props
• context
• redux

ts中函数默认值和可选参数

• function buildName(firstName = "XXX", lastName?: string) {}

描述一下设计点赞组件的思路

>> 02.19 15:37 --------------------------------------------

let与var区别

• let、const不存在变量提升、不允许重复声明、块级作用域

浏览器存储

• sessionStorage：仅在当前浏览器窗口关闭之前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，本地存储，因此用作持久数据；cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭

React生命周期

项目迁移怎么考虑

• 参考
• 理清项目结构、页面结构、使用技术栈，规范代码。

组件式开发的见解

• 参考

React Hook 版本

• @16.8

函数组件和Class组件的区别

• 函数组件没有状态、生命周期、this

pushy热更新

• react-native-update

除了redux还了解过其他状态管理库吗？

• React 自带的 Context
• 参考

地图定点数据有很多时怎么处理？

• 分批渲染？
• 子线程？

antDesign 和 Bootstrap 的区别

• antDesign 组件库
• Bootstrap 样式库

>> 02.05 17:00 --------------------------------------------

this.$nextTick

• 参考
• 将回调延迟到下次 DOM 更新循环之后执行。状态改变后页面不会立即改变，而是等到下一次更新才会改变。
• 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中
• 在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中。
• 内部实现，先判断是否原生支持promise，如果支持，则利用promise来触发执行回调函数；否则，如果支持MutationObserver，则实例化一个观察者对象，观察文本节点发生变化时，触发执行所有回调函数；如果都不支持，则利用setTimeout设置延时为0。

<keep-alive>

• 参考
• 当组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行
• 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中
• include - 字符串或正则表达式。只有名称匹配的组件会被缓存
• exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存

Promise.all()

• 只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数
• 只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。
• 如果作为参数的 Promise 实例，自己定义了catch方法，那么它一旦被rejected，并不会触发Promise.all()的catch方法。

Vue 生命周期

• beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed
• ajax 请求一般在created中

sass Mixin 混合指令

• 定义可重复使用的样式，避免了使用无语意的 class
• @mixin 定义混合；@include 引用混合

原型链和闭包

• 原型链参考
• 一个类型的原型又是另一个类型的实例
• 闭包参考
• 闭包造成内存泄漏问题的解决办法

let、const、var 区别

• 参考
• let、const不存在变量提升、不允许重复声明、块级作用域

>> 02.06 14:00 --------------------------------------------

对象和数组的拼接

• 对象的拼接
  • Object.assign(target, source) 将对象source合并到对象target中，target会被改变
  • {...a, ...b}
• 数组的拼接
  • Array.concat() 不会改变原数组
  • [...a, ...b]

单页面应用与多页面应用

• 参考