需要289页前端初中级前端面试题，请直接滑到文末获取

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各取所需的分发给所有的组件。

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配置的常用属性有哪些及作用？

分类	属性	值
宽和高	width 宽度；height 高；max-height 跟着父标签
字体属性	color 颜色；font-family 字体；font-size 文字大小；font-weight 文字粗细	normal 默认值 bold 粗体 bolder 更粗 lighter 更细 100~900 具体粗细 inherit 继承类元素字体的粗细值
颜色	十六进制值: #FF0000; 单词表示: blue，red; RGB值: (255, 0, 0);rgba(200, 0, 0, 0.3)
文字属性	text-align，text-decoration, text-indent 段落缩进32像素	left 左边对齐 right 右对齐 center 居中对齐 justify 两端对齐; none 默认 underline 文本下一条线 overline 文本上一条线 line-through 穿过文本一条线 inherit 继承父类属性
背景属性	背景颜色background-color: red; 背景图片background-image: url(‘1.jpg’);背景重复 background-repeat: repeat; 背景位置 background-position: right top
CSS盒子	margin 控制元素与元素之间的距离;padding 控制内容与边框之间的距离; border 内边距和内容外的边框; content 内容,显示文本和图像;	简写顺序：上 右 下 左
边框	border-width, border-style, border-color;可以简写为border:2px solid red;	border-radius 实现圆角边框；border-style的值有none 无边框 dotted 点状虚线边框 dashed 矩形虚线边框 solid 实现边
显示	display	none 不显示；block 沾满整个页面宽度；inline 显示为内联元素；inline-block 具有内元素和块级元素
浮动	float 任何元素都可以浮动；clear属性指定侧不允许其他浮动元素；	float的属性：left 向左，right 向右，none 不浮动。clear属性left在左侧不允许浮动元素，right在右侧不允许浮动元素，both左右两侧不允许，none 允许出现；inherit 继承父元素；
溢出	overflow	visible 内容不会被修剪，hidden 内容被修剪并其余内容不可见，scroll内容被修剪并显示滚动条可查看其余的内容，auto内容被修剪并显示滚动条可查看其余的内容，inherit从父元素继承
定位	position	static 无定位，relative 相对定位，absolute 绝对定位，fixed 固定

12、bwebpack的作用及怎么使用？

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

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

webpack使用插件来扩展webpack功能并在整个构建过程中生效和执行相关任务。如HtmlWebpackPlugin插件，依据一个简单的模板生成最终的Html5文件并在文件中自动引用了打包后的JS文件。

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、HTTP状态码及其含义

状态码类型状态码	类别	原因短语
1XX	Information（信息性状态码）	接收的请求正在处理
2XX	Success（成功状态码）	请求正常处理完毕
3XX	Redirection（重定向状态码）	需要进行附加的操作以完成请求
4XX	Client Error（客户端错误状态码）	服务器无法处理请求
5XX	Server Error（服务端错误状态码）	服务器处理请求出错
204		服务器成功处理，但未返回内容。
304	Not Modified 未修改。	所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源
400	Bad Request	客户端请求的语法错误，服务器无法理解
403	Forbidden	服务器理解请求客户端的请求，但是拒绝执行此请求
404	Not Found	服务器无法根据客户端的请求找到资源（网页）。

通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面

1、ajax 实现原理及方法使用？
2、 说说 vue 中 key 的原理？
3、 vue 双向绑定的原理是什么？
4、vue 中$nextTick 有什么作用？
5、 浅谈前端工程化、模块化、组件化？
6、vue 项目优化的手段有哪些
7、mvc，mvp，mvvm 是什么
8、vue，jq，react，angular 区别，各自优势
9、什么是虚拟 dom，优势是什么，存储在哪
10、谈谈 webpack 的理解
11、谈谈 event loop…35
12、介绍 HTTPS 握手过程
13、如何防范 CSRF 攻击，XSS 攻击
14、使用 sort() 对数组 [3, 15, 8, 29, 102, 22] 进行排序，输出结果
15、箭头函数与普通函数的区别
16、简述 react 的生命周期，数据变化会触发哪些生命周期
17、SQL 语句的分类
18.什么是弹性布局？
19.编写响应式？
20.常见的浏览器兼容问题？
21.H5 新特性
22.C3 新特性：
23.什么是 typescript
24.三大框架的区别：
25.spa 应用优点：
26.什么是模块化编程？
27.性能优化？
28.什么是 HTTP 协议：
29、快速扰乱数组排序
30、JS 判断设备来源
31、audio 元素和 video 元素在 ios 和 andriod 中实现自动播放
32、让文本不可复制
33、水平垂直居中
34、改变 placeholder 的字体颜色
35、如何判断一个 object 是数组类型
36、CORS http 请求和普通 http 请求的区别
37、行内元素，块元素，空元素有哪些？
38、src 和 href 的区别？
39、什么是 css HACK？
40、优雅降级和渐进增强？
41、new 操作符的实现
42、递归深拷贝
43、JS 常见的四种内存泄漏

我目前是在职前端开发，如果你现在也想学习前端开发技术，在入门学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，你都可以申请加入我所在的前端学习交流裙：前面：42137 后面：4697。里面聚集了一些正在自学前端的初学者,转行者，初阶者，这套面试题囊括了几乎所有前端的知识点，感兴趣的可以点此获取~