289页初中级前端题
一、ant-design的使用总结及经常使用组件和他们的基本用法?
ant-design为React，Angular和Vue都提供了组件，同时为PC和移动端提供了经常使用的基础组件。ant-design提供的demo很是的丰富而且样式可以基本的覆盖开发需求。antd的Demo由于是多人编写的，因此能够看到不一样样式的实现都有，能够很好的知足不一样开发的风格。css
经常使用的组件有：Button，Form，Radio，Select，TimePicker，Upload，Table等。使用时须要能够参考Demo来编写，而且在组件界面页的最后面有属性的介绍和注意点。可以很方便的来实现效果。前端
二、前端经常使用的字符实体有哪些及怎么书写？
由于存在预留字符，当须要显示这些字符的时候，那么可使用字符实体。 经常使用的字符字体有:vue
（1）空格 （2）小于号< （3）双引号" （4）单引号' （5）& 与符号& （6）大于号 >react
三、react的生命周期及不一样生命周期的含义？
1）constructor中进行state的初始化。webpack
2）componentDidMount中进行异步加载数据，添加事件监听。ios
3）getDerivedStateFromProps中将传入的props更新到state上。git
4）componentDidUpdate中处理由于state变化触发的请求。web
四、经常使用的图表绘制工具备哪些，能够实现哪些功能？
EChats提供不一样平台的多维度的数据展现，并支持多设备和多种可视化类型， 好比: 折线图， 柱状图， 散点图， 饼图， K线图等。面试
五、阿里云OSS文件上传的流程是怎么样？
由于涉及到OSS的key保存问题，因此最好将图片发送给后台，而后由后台将图片上传OSS并返回OSS的url。 图片选择使用ant-design的upload组件。ajax
六、redux的主要做用和使用方式?
主要做用是：吧全部的state集中到组件顶部，可以灵活的将全部state各取所需的分发给全部的组件。
store: 保存数据的地方。整个应用智能有一个Store。 state： 包含全部数据，一个state对应一个view。只要state相同，view就相同。 action：View发出的通知action，改变state，从而改变view。修改state的惟一办法是使用Action。
七、升级项目依赖的第三方库要怎么操做？
使用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和避免跨大版本致使的升级影响较大的问题。
八、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的渲染。若是传入的是一个空数组，那么仅仅在组件挂载和卸载时执行一次。
九、git的了解，rebase和快进是什么含义？
git相对svn的最大的区别就是分布式，也就是说check out项目后，能够在本地进行代码的提交，查看历史版本，建立项目新分支等。
git中使用rebase来管理分支，可以避免同一分支线由于多人的合并而致使分支线的不连贯。 merger中当要合入的分支线A和被合入的分支B，A的基点是B上并B没有新提交，此时就会进行快进及不生成一个合并的提交。也能够关闭快进，从而能够增长一个合并提交，能够很方便的观察到谁进行过一次合并。
十、CSS选择器列表优先级及权重？
1.通用选择器（*） 2.元素(类型)选择器 权重1 3.类选择器 权重10 4.属性选择器 5.伪类 6.ID 选择器 权重100 7.内联样式 权重1000 !important规则会覆盖任何其余的声明，只在须要覆盖全站或外部CSS的替丁页面中使用。
十一、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 固定 |
十二、bwebpack的做用及怎么使用？
模块打包机，分析项目结构，找到JavaScript模块以及一些浏览器不能直接运行的扩展语言(Scss, TypeScript等)，并将其打包为合适的格式以浏览器使用。 经过css-loader和style-loader将样式表表嵌入webpack打包后的JS文件中。
经过less-loader, sass-loader,stylus-loader进行CSS预处理器能够把特殊类型的语句转化为浏览器可识别的CSS语句。
webpack使用插件来扩展webpack功能并在整个构建过程当中生效和执行相关任务。如HtmlWebpackPlugin插件，依据一个简单的模板生成最终的Html5文件并在文件中自动引用了打包后的JS文件。
1三、Promise实现及优缺点
Promise用于表示一个异步操做的最终完成（或失败）及其结果值。
var myPromise = new Promise((resolve, reject) => {
// 须要执行的代码
...
if (/* 异步执行成功 */) {
resolve(value)
} else if (/* 异步执行失败 */) {
reject(error)
}
})
myPromise.then((value) => {
// 成功后调用, 使用value值
}, (error) => {
// 失败后调用, 获取错误信息error
})
优势： 解决回调地狱，对异步任务写法更标准化与简洁化。
缺点：首先没法取消Promise，一旦新建它就会当即执行，没法中途取消。其次，若是不设置回调函数，Promise内部抛出错误，不会反应到外部。
第三，当处于pending状态时，没法得知目前进展到哪个阶段。
1四、Http状态码及含义
1xx: 服务器收到请求, 需请求者进一步操做 2xx: 请求成功 3xx: 重定向, 资源被转移到其余URL了 4xx: 客户端错误, 请求语法错误或没有找到相应资源 5xx: 服务端错误, server error 301: 资源(网页等)被永久转移到其余URL, 返回值中包含新的URL, 浏览器会自动定向到新URL 302: 临时转移. 客户端应访问原有URL 304: Not Modified. 指定日期后未修改, 不返回资源 403: 服务器拒绝执行请求 404: 请求的资源(网页等)不存在 500: 内部服务器错误
1五、async和await的使用
async/await是写异步代码的新方式，之前的方法有回调函数和Promise。 async/await是基于Promise实现的，它不能用于普通的回调函数。 async/await与Promise同样，是非阻塞的。 async/await使得异步代码看起来像同步代码，这正是它的魔力所在。
1六、setTimeout时间延迟为什么不许
单线程，先执行同步主线程，再执行异步任务队列。
1七、let const var做用域及区别
块级做用域，暂时性死区。 var 定义的变量，能够跨块做用域访问，不能跨函数做用域访问。
let 定义的变量，只能在块做用域里访问，不能跨块做用域访问也不能跨函数做用域访问。
const 定义常量，建立时必须赋值，只能在块做用域里访问而且不能修改。
1八、for in, forEach和for of的区别
for in遍历数组会遍历到数组原型上的属性和方法，更适合遍历对象。遍历到myObject的原型方法method，若是不想遍历原型方法和属性的话，能够在循环内部判断一下hasOwnProperty方法能够判断某属性是不是该对象的实例属性。
forEach不支持break，continue，return等
for of能够成功遍历数组的值，而不是索引，不会遍历原型。
1九、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 页面卸载： 当页面摧毁时执行。
2一、微信小程序原理？
微信小程序采用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的渲染、事件的处理。
2二、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 | 服务器没法根据客户端的请求找到资源（网页）。 |
经过此代码，网站设计人员可设置"您所请求的资源没法找到"的个性页面
一、ajax 实现原理及方法使用？
二、 说说 vue 中 key 的原理？
三、 vue 双向绑定的原理是什么？
四、vue 中$nextTick 有什么做用？
五、 浅谈前端工程化、模块化、组件化
六、vue 项目优化的手段有哪些
七、mvc，mvp，mvvm 是什么
八、vue，jq，react，angular 区别，各自优点
九、什么是虚拟 dom，优点是什么，存储在哪
十、谈谈 webpack 的理解
十一、谈谈 event loop..35
十二、介绍 HTTPS 握手过程
1三、如何防范 CSRF 攻击，XSS 攻击
1四、使用 sort() 对数组 [3, 15, 8, 29, 102, 22] 进行排序，输出结果
1五、箭头函数与普通函数的区别
1六、简述 react 的生命周期，数据变化会触发哪些生命周期
1七、SQL 语句的分类
18.什么是弹性布局？
19.编写响应式？
20.常见的浏览器兼容问题？
21.H5 新特性
22.C3 新特性：
23.什么是 typescript
24.三大框架的区别：
25.spa 应用优势：
26.什么是模块化编程？
27.性能优化？
28.什么是 HTTP 协议：
2九、快速扰乱数组排序
30、JS 判断设备来源
3一、audio 元素和 video 元素在 ios 和 andriod 中实现自动播放
3二、让文本不可复制
3三、水平垂直居中
3四、改变 placeholder 的字体颜色
3五、如何判断一个 object 是数组类型
3六、CORS http 请求和普通 http 请求的区别
3七、行内元素，块元素，空元素有哪些？
3八、src 和 href 的区别？
3九、什么是 css HACK？
40、优雅降级和渐进加强？
4一、new 操做符的实现
4二、递归深拷贝
4三、JS 常见的四种内存泄漏
最后，文章中涉及到面试资料，均免费分享，只需你多多支持我便可哦！ 我目前是在职前端开发，若是你如今也想学习前端开发技术，在入门学习前端的过程中有碰见任何关于学习方法，学习路线，学习效率等方面的问题，你均可以申请加入我所在的前端学习交流裙：前面：42137 后面：4697。里面汇集了一些正在自学前端的初学者,转行者，初阶者