本文只是用来记录我个人遇到的面试问题，答案基于我自己的能力水平，有些写得比较简单，有些比较啰嗦 ~ ~ ~ 没有写答案的就是我还不了解的地方，望各位大佬指点迷津

当然面试的第一个问题99%都是自我介绍，所以一定要准备一个非常好的自我介绍！！！然后就是自己的语言能力，很多时候自己知道问题的答案，但没有说清楚，导致面试官觉得我不了解，当然面试的时候有些紧张，完全不知道面试官在问什么，甚至不知道自己在说什么下来又灵光一闪，可是这有什么用呢 —_—！！

js

1、js的循环机制

腾讯云这篇js事件循环写的很详细，而且很容易理解

2、遇到哪些typeScript

js是弱类型语言，ts将js转换成强类型语言，对变量通过interface约束类型并进行类型检查，还支持泛型和枚举

2.1 ts中interface与type有什么区别？

用type而不能用interface
- 具体定义数组每个位置的类型 type PetList = [Dog, Pet]
- 限定具体几个值的基本类型联合类型 type someAnimal = 'dog' | 'cat'

用interface而不能用type

interface 能够声明合并

interface User {
   name: string
   age: number
 }
 interface User {
   sex: string
 }
 /** 
 User 接口为 {
   name: string
   age: number
   sex: string 
 }
 **/

3、js中有哪些基础类型和引用类型，代码中怎么判断？

基础类型：按值访问，可操作保存在变量中的实际的值，指的是简单的数据段
number，string，boolean, null, undeifiend
引用类型：变量指向的是一个地址，操作的是对象的引用
Object，Array，Function，RegExp，Date......

3.1 null和undifiend有什么区别

null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN;
null表示"没有对象"，即该处不应该有值；
（1）作为函数的参数，表示该函数的参数不是对象。
（2）作为对象原型链的终点。（3）typeof null = 'object'
undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义
（1）变量被声明了，但没有赋值时，就等于undefined。
（2）调用函数时，应该提供的参数没有提供，该参数等于undefined。

（3）对象没有赋值的属性，该属性的值为undefined。
（4）函数没有返回值时，默认返回undefined。

（5）typeof undefined = 'undefined'

4、平时用到哪些es6的语法

let和const：取消了变量提升，产生了暂时性死区，由此产生了块级作用域;
模板字符串;
数组和对象的解构赋值;
对象的简洁写法，在对象之中，可以直接写变量，这时，属性名为变量名, 属性值为变量的值
```
 const a = 1;
 const foo = { a };  // 等价于ES5中 const foo = { a: a }
```
箭头函数：取代Function.prototype.bind，绑定this;
函数的参数指定默认值function foo(a, b = 1) { ... }

5、如何拷贝一个对象，解构？如果是一个深层嵌套的对象呢（深拷贝）

浅拷贝：对象解构赋值、Object.assign()

const obj1 = {
	a: 1,
    b: 2,
    c: { c1: "深层嵌套" }
}
// 对象解构赋值，只能浅拷贝，深层的嵌套地址引用依然没变
const obj2 = { ...obj1 };
obj1.a = 2;
obj1.c.c1 = "浅拷贝只能改变第一层的引用";
console.log(obj2);   // { a: 1, b: 2, c: { c1: "浅拷贝只能改变第一层的引用" }}
// Object.assign()，只能浅拷贝，深层的嵌套地址引用依然没变，结果和解构赋值相同
  const obj3 = Object.assign(obj1);

深拷贝：JSON.parse(JSON.stringify(object))

  const obj4 = JSON.parse(JSON.stringify(obj1));
  obj1.a = 2;
  obj1.c.c1 = "深拷贝断开所有引用";        // obj1和obj4没有任何联系，是两个完全不相关的变量
  console.log(obj4);   // { a: 1, b: 2, c: { c1: "深层嵌套" }}

6、遇到哪些同步情况，怎么解决的

回调函数：将第二步操作作为一个函数传给第一步操作，手动控制第一步执行完之后再执行第二步
Promise对象：每一个异步任务返回一个Promise对象，该对象有一个then方法，允许指定回调函数，这样回调函数变成了链式写法，程序的流程可以看得很清楚，如

   f1().then(f2).fail(f3);

async/await:
- async/await是基于Promise实现的，它不能用于普通的回调函数。
- async/await与Promise一样，是非阻塞的。
- async/await只是使得异步代码看起来像同步代码。

7、对解决异步的发展（回调函数 -> Promise -> async/await）的理解

7.1 promise与async/await的区别

7.2 如果自己设计一个promise，会如何设计

8、谈谈对闭包的理解（******）

9、用ts重构过js项目，如何重构的？是什么思路？ts有什么优势？

http

1、写一个XMLHttpRequest请求

/** 创建一个 XMLHttpRequest 对象 **/
var xhr = new XMLHttpRequest();  
/** 发送请求，设置请求方式（get,post,put,delete）, 请求路径url， 是否异步 **/
xhr.open('GET', 'http://www.lovejavascript.com/learnLinkManager/getLearnLinkList', true);
/** 设置请求参数 **/
xhr.send(null);

2、常用状态码

2XX成功请求正常处理完毕
- 200 OK 从客户端发送的请求在服务端被正常处理了。
- 204 No Content 服务器接受的请求已成功处理，但返回的响应报文的主体部分不包含实体（浏览器页面不更新，仅发送信息给服务器）
- 206 Partial Content 客户端进行了范围请求，而服务器成功执行了这部分请求
3XX重定向浏览器需要执行某些特殊的处理以正确处理请求。
- 301 Moved Permanently 永久性重定向，请求的资源已经分配了新的URI，以后应该使用资源现在所指的URI
- 302 Found 临时性重定向，请求的资源临时分配了新的URI，希望用户本次可以使用新的URI访问
注意：当301,302,303响应状态码返回时，几乎所有的浏览器会把POST改成GET，并删除请求报文内的主体，之后请求会自动再次发送
- 304 Not Modified 服务器端资源未改变，可直接使用客户端未过期的缓存，不包含任何响应的主体部分
4XX客户端错误客户端是发生错误的原因所在。
- 400 Bad Request 请求报文中存在语法错误
- 401 Unauthorized 请求需要有通过HTTP认证的认证信息。另外如果之前已进行一次请求，则表示用户认证失败
- 403 Forbidden 对请求资源的访问被服务器拒绝了，如未获得文件系统的访问授权，访问权限出现某些问题
- 404 Not Found 服务器上没有请求的资源
- 499 client has closed connection 服务器端处理的时间过长，客户端主动断开链接，ngix定义的状态码
5XX服务器错误服务器是发生错误的原因所在。
- 500 Internal Server Error 服务器在执行请求时发生了错误，Bug或临时故障
- 503 Service Unavailable 服务器暂时处于超负荷或正在进行停机维护，现在无法处理请求

3、知道哪些请求方式，有什么区别，分别用于什么场景？

get --- 请求一个指定资源的表示形式. 使用GET的请求应该只被用于获取数据.
post --- 用于将实体提交到指定的资源，如保存
put
delete --- 删除指定的资源

以下不常用，知道存在即可

head
connect
options
trace
patch

4、get和post的区别

get常用来获取数据，post常用来提交数据
get请求参数长度受限(参数会拼接在url之后)，post的请求数据放在http请求体中；
get请求参数在路径中直接可见，所以针对这一点post比get安全一点（只是相对来说，post的请求参数也可以通过抓包等方法获取）

5、什么是跨域，怎么解决？

6、cookies、sessionStorage、localStorage的区别

cookies：一般由服务器生成，可设置失效时间，如果浏览器生成，默认关闭浏览器后失效；存放数据4k；与服务器通信时内容会携带在HTTP头部，所以cookie数据过多会影响性能；
sessionStorage：除非手动清除，否则永久保存在浏览器中；存放数据5MB左右；仅保存在客户端，不参与服务器通信；
localStorage：当前会话有效，关闭页面或浏览器后被清除；存放数据5MB左右；仅保存在客户端，不参与服务器通信。

css

一、css实现盒子淡入，点击后淡出，逐渐消失

二、H5和CSS3的新特性

三、画一个盒子模型图

四、什么是渐进增强和优雅降级

五、position有哪些属性，分别有什么作用

relative 相对定位，相对自身

六、有哪些响应式布局的方法

七、如何实现元素水平垂直居中（多说几种方案）

主要分为两类：不定宽高和定宽高，不定宽高的方法基本都适用于定宽高的情况

绝对定位 + margin（定宽高）

/* 子元素宽高固定，直接用margin控制子元素向左向右自身的一半（计算） */
.child {
    width: 50px;
    height: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -25px;
    margin-top: -5px;
}
/* 或 子元素宽高固定，使用绝对定位上下左右为0，margin：auto */
.child {
    width: 50px;
    height: 10px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

绝对定位 + 使用transform (不定宽高)

/** 子元素宽高不定，使用transform: translate(-50%, -50%) ，相对于自身再向上向左移动自身的一半 **/
.child {
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  
}

弹性布局flex (不定宽高)

.parent {
      display: flex;
      justify-content: center;
      align-items: center;
}
/** 或者父元素flex,子元素margin:auto **/
.parent{
  display:flex;
}
.child{
  margin:auto;
}

栅格布局（不定宽高）

.parent {
    display: grid;
}
.child {
    justify-self: center;
    align-self: center;
}
/** 或者父元素grid,子元素margin:auto **/
.parent{
  display:grid;
}
.child{
  margin:auto;
}

React

1、Component与PureComponent的区别

PureComponent提供了一个具有浅比较的shouldComponentUpdate，Component不会比较当前和下个状态的props和state，每当shouldComponentUpdate被调用时，组件默认的会重新渲染，其余PureComponent和Component基本上完全相同。

详细可以参考 (juejin.im/post/684490…)

2、生命周期，并简述各自的作用（很重要，react必问）

2.1 不能在什么阶段修改state

3、常用Hook，及其作用

4、简单实现一个Toast组件

5、React组件中key的作用

key 帮助 React 识别哪些元素改变了，比如被添加或删除，在虚拟DOM中diff算法户根据这个唯一的key来进行匹配，尽量不适用索引作为key值（影响性能或组件状态问题）

6、用taro写小程序怎么解决对taro ui组件封装时设置样式不生效的问题

7、什么是MVVM，和MVC有什么区别，ViewModel有什么作用

MVVM 由 Model、View、ViewModel 三部分构成，Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。

在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的，因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM，不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

在MVC中，当 Model发生变化，开发者需要主动更新到View ；当用户的操作导致 Model 发生变化，开发者同样需要将变化的数据同步到Model 中，这样的工作不仅繁琐，而且很难维护复杂多变的数据状态。

8、总体来说，React 16之后有什么新特性(Hooks,Fiber)

9、简述Redux与React-Redux

react-redux是为了让redux更好的适用于react而生的一个库

10、不使用任何状态管理工具，如何实现兄弟组件之间的传值。（A组件的某个state改变，在B组件中能获取到）

11、RN是如何通信的（如何放到客户端的，公司项目的RN和Android是如何连接的）

12、JSX是什么，有什么好处

JSX即JavaScript XML，是一种在React组件内部构建标签的类XML语法（非必选），JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式，虚拟DOM已经自动将JSX映射成js，

// jsx的实现
<a href="http://facebook.github.io/react/">Hello!</a>
// 对应js的实现
React.createElement('a', {href: 'http://facebook.github.io/react/'}, 'Hello!')

使用JSX的好处：

提供更加语意化且易懂的标签
让程序看起来更加简洁，让整个结构更加直观，可读性较高
JSX不是新的语言，只是一种语法糖，结合了原生 JavaScript 语法

13、使用的哪一个版本的typescript，如何为函数式组件声明一个泛型

泛型组件

2020年个人面经

js