闲言碎语不要讲，讲一讲我们的前端面试题。知识比较杂，需要是整理下笔记及必要知识的回顾。

1. ant-design的使用总结及常用组件和他们的基本用法？

ant-design为React，Angular和Vue都提供了组件，同时为PC和移动端提供了常用的基础组件。ant-design提供的demo非常的丰富并且样式能够基本的覆盖开发需求。antd的Demo因为是多人编写的，所以可以看到不同样式的实现都有，可以很好的满足不同开发的风格。
常用的组件有：Button，Form，Radio，Select，TimePicker，Upload，Table等。使用时需要可以参考Demo来编写，并且在组件界面页的最后面有属性的介绍和注意点。能够很方便的来实现效果。

2. 前端常用的字符实体有哪些及怎么书写？

因为存在预留字符，当需要显示这些字符的时候，那么可以使用字符实体。
常用的字符字体有（1）空格  （2）小于号< （3）双引号" （4）单引号' （5）& 与符号& （6）大于号 >

3 react的生命周期及不同生命周期的含义？

生命周期

状态变化

（1）constructor中进行state的初始化。
（2）componentDidMount中进行异步加载数据，添加事件监听。
（3）getDerivedStateFromProps中将传入的props更新到state上。
（4）componentDidUpdate中处理因为state变化触发的请求。

4. 常用的图表绘制工具有哪些，可以实现哪些功能？

EChats提供不同平台的多维度的数据展示，并支持多设备和多种可视化类型，比如折线图，柱状图，散点图，饼图，K线图等。

5. 阿里云OSS文件上传的流程是怎么样？

因为涉及到OSS的key保存问题，所以最好将图片发送给后台，然后由后台将图片上传OSS并返回OSS的url。图片选择使用ant-design的upload组件。

6. redux的主要作用和使用方式

主要作用是：吧所有的state集中到组件顶部，能够灵活的将所有state各取所需的分发给所有的组件。

redux

store: 保存数据的地方。整个应用智能有一个Store。
state： 包含所有数据，一个state对应一个view。只要state相同，view就相同。
action：View发出的通知action，改变state，从而改变view。修改state的唯一办法是使用Action。

7. 升级项目依赖的第三方库要怎么操作？

使用npm outdated 可以查看npm中有最新版本的包,然后使用ncu -u 进行依赖库的升级，最后使用npm install进行新版本的安装就可以了。
其中ncu是nom-check-updated的工具，通过npm install -g npm-check-updates来安装。
升级完成后，需要查看依赖的第三方库的版本是否有大版本的升级，比如从1.x升级到2.x或者3.x升级到4.x，涉及到跨版本升级的，那么一定要小心，需要去对应的官方查看版本迁移记录，进行代码的升级。
所以一般是推荐定时进行第三方库的版本升级，可以有效的修复第三方库存在的bug和避免跨大版本导致的升级影响较大的问题。

8. react新版本中Hook的怎么使用？

可以在不编写class的情况下使用state以及其他的React特性。
使用useState声明新变量

// 声明一个新的叫做 “count” 的 state 变量
  const [count, setCount] = useState(0);

useEffect给函数组件增加了操作副作用的能力，与componentDidMount，componentDidUpdate和componentWillUnmount具有相同的用途。React会在每次渲染后调用副作用函数（包括第一次渲染的时候）。

// 相当于 componentDidMount 和 componentDidUpdate:
  useEffect(() => {
    // 使用浏览器的 API 更新页面标题
    document.title = `You clicked ${count} times`;
  });

在组件中可以多次使用useEffect。

useEffect(() => {
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

副作用函数还可以通过返回一个函数来指定如何“清除”副作用。比如，在上面的组件中使用副作用函数来订阅好友的在线状态，并通过取消订阅来进行清除操作。可以理解为之前是在componentDidMount中添加ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);来订阅好友的在线状态，然后在componentWillUnmount中添加了ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);来取消订阅。
useEffect第二个参数为一个依赖的值数组，只有当数组的值发生改变的时候，才执行effect的渲染。如果传入的是一个空数组，那么仅仅在组件挂载和卸载时执行一次。

9. git的了解，rebase和快进是什么含义？

git相对svn的最大的区别就是分布式，也就是说check out项目后，可以在本地进行代码的提交，查看历史版本，创建项目新分支等。
git中使用rebase来管理分支，能够避免同一分支线因为多人的合并而导致分支线的不连贯。
merger中当要合入的分支线A和被合入的分支B，A的基点是B上并B没有新提交，此时就会进行快进及不生成一个合并的提交。也可以关闭快进，从而可以增加一个合并提交，可以很方便的观察到谁进行过一次合并。

10. CSS选择器列表优先级及权重？

1. 通用选择器（*）
2. 元素(类型)选择器      权重1
3. 类选择器                     权重10
4. 属性选择器
5. 伪类
6. ID 选择器           权重100
7. 内联样式            权重1000
   !important规则会覆盖任何其他的声明，只在需要覆盖全站或外部CSS的替丁页面中使用。

11. CSS配置的常用属性有哪些及作用？

CSS盒子

12. webpack的作用及怎么使用？

模块打包机，分析项目结构，找到JavaScript模块以及一些浏览器不能直接运行的扩展语言(Scss, TypeScript等)，并将其打包为合适的格式以浏览器使用。
通过css-loader和style-loader将样式表表嵌入webpack打包后的JS文件中。

loader

通过less-loader, sass-loader,stylus-loader进行CSS预处理器可以把特殊类型的语句转化为浏览器可识别的CSS语句。

postcss

plugin

13. Promise实现及优缺点

Promise用于表示一个异步操作的最终完成（或失败）及其结果值。

var myPromise = new Promise((resolve, reject) => {
  // 需要执行的代码
  ...
  if (/* 异步执行成功 */) {
    resolve(value)
  } else if (/* 异步执行失败 */) {
    reject(error)
  }
})

myPromise.then((value) => {
  // 成功后调用, 使用value值
}, (error) => {
  // 失败后调用, 获取错误信息error
})

优点：解决回调地狱，对异步任务写法更标准化与简洁化。
缺点：首先无法取消Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise内部抛出错误，不会反应到外部。第三，当处于pending状态时，无法得知目前进展到哪一个阶段。

14. Http状态码及含义

• 1xx: 服务器收到请求, 需请求者进一步操作
• 2xx: 请求成功
• 3xx: 重定向, 资源被转移到其他URL了
• 4xx: 客户端错误, 请求语法错误或没有找到相应资源
• 5xx: 服务端错误, server error
• 301: 资源(网页等)被永久转移到其他URL, 返回值中包含新的URL, 浏览器会自动定向到新URL
• 302: 临时转移. 客户端应访问原有URL
• 304: Not Modified. 指定日期后未修改, 不返回资源
• 403: 服务器拒绝执行请求
• 404: 请求的资源(网页等)不存在
• 500: 内部服务器错误

15. async和await的使用

• async/await是写异步代码的新方式，以前的方法有回调函数和Promise。
• async/await是基于Promise实现的，它不能用于普通的回调函数。
• async/await与Promise一样，是非阻塞的。
• async/await使得异步代码看起来像同步代码，这正是它的魔力所在。

16. setTimeout时间延迟为何不准

单线程，先执行同步主线程，再执行异步任务队列。

17. let const var作用域及区别

块级作用域，暂时性死区。
var 定义的变量，可以跨块作用域访问，不能跨函数作用域访问。
let 定义的变量，只能在块作用域里访问，不能跨块作用域访问也不能跨函数作用域访问。
const 定义常量，创建时必须赋值，只能在块作用域里访问并且不能修改。

18. for in, forEach和for of的区别

• for in遍历数组会遍历到数组原型上的属性和方法，更适合遍历对象。遍历到myObject的原型方法method，如果不想遍历原型方法和属性的话，可以在循环内部判断一下hasOwnProperty方法可以判断某属性是否是该对象的实例属性。
• forEach不支持break，continue，return等
• for of可以成功遍历数组的值，而不是索引，不会遍历原型。

19. localStorage 与 sessionStorage 与cookie的区别总结

• 共同点： 都保存在浏览器端且同源。
• localStorage，sessionStorage统称为webStorage，保存在浏览器，不参与服务器通信。大小为5M。
• 生命周期不同：localStorage永久保存，sessionStorage当前会话。都可以手动删除。
• 作用域不同： 不同浏览器不共享local和session，不同会话不共享session。
• Cookie：设置的过期时间前一直有效，大小4K。有个数限制，各浏览器不同，一般为20个。携带在http头中，过多会有性能问题。可自己封装，也可用原生。

20. 微信小程序组件的生命周期？

• onLoad页面加载：一个页面只会调用一次，可以在onLoad中获取打开当前页面所调用的query参数。
• onShow 页面显示：每次打开页面都会调用一次。
• onReady 页面初次渲染完成：一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
• onHide 页面隐藏：当navigateTo或底部tab切换时调用。
• onUnload 页面卸载： 当页面摧毁时执行。

21. 微信小程序原理？

微信小程序采用JavaScript，WXML，WXSS三种技术进行开发。

• JavaScript：首先JavaScript的代码是运行在微信App中的，并不是运行在浏览器中，因此一些H5技术的应用，需要微信App提供对应的API支持，而这限制住了H5技术的应用，切不能称为严格的H5.同理，微信提供的独有的某些API，H5也不支持或支持的不是特别好。
• WXML： WXML微信基于XML语法开发的，因此开发时，只能使用微信提供的现有标签，HTML的标签是无法使用的。
• WXSS：具有CSS的大部分特性，但并不是所有的都支持，而且支持哪些，不支持哪些并没有详细的文档。
  微信的架构是数据驱动的架构模式，UI和数据是分离的，所有的页面更新都需要通过对数据的更改来实现。
  微信程序分为两个部分webview和appService。其中webview主要用来展现UI，appService有来处理业务逻辑、数据及接口调用。他们在两个进程中运行，通过系统层JSBridge实现通信，实现UI的渲染、事件的处理。

22. 怎么提高微信小程序的应用速度？

1. 提高页面加载速度。
2. 用户行为预测。
3. 减少默认data的大小。
4. 组件化方案。

23. 微信小程序有哪些传递数据的方法？

• 使用全局变量实现数据传递。
• 页面跳转或重定向时，使用url带参数传递数据。
• 使用组件模板template传递参数。
• 使用数据库传递数据。

24.

声明：图片和内容来之网络，我只是知识的搬运工，侵删