前端面试总结篇（初级）

作为一个优秀的程序员，不仅仅可以解决工作的问题，还要不断的关注前端技术的发展，其中也包括了解最新的前端面试题，那么知识点来了，请接好

你熟悉的es6
· let、const、var的使用区别
let: 相当于var,用于声明一个变量,在块级作用域有效(可解决for循环问题);不能重复声明;不会变量提升;不会预处理
const: 用于定义一个常量，不能修改，其他特点等同于let，用于保存不用改变的数据
· Map与普通对象的区别
JavaScript 的对象（Object），本质上是键值对的集合（Hash 结构），但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。为了解决这个问题，ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。

除了这两个，关于es6的常用还有箭头函数、模板字符串、变量的解构赋值等

你使用的跨域
所谓的跨域问题是由于浏览器的同源策略限制的，当协议域名端口号不同即为跨域，对于协议和端口来说，前端不能解决。
解决跨域的几种方式：
· JSONP 跨域：这种方式跨域是通过script标签引入js文件，这个js文件又会返回一个js函数调用，也就是请求后通过callback的方式回传结果
优点：
1.不受同源策略的限制
2.兼容性更好
3.支持老版本浏览器
缺点：只支持get请求
· CORS 跨域
其原理是使用自定义的http头部请求，让浏览器与服务器之间进行沟通，从而决定请求或响应是否成功
优点：
1.支持所有类型的http请求
2.比jsonp有更好的错误处理机制
3.被大多数浏览器所支持
· h5的postMessage方法
window.postMessage(message,targetOrigin) 方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源，目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。这种方法不能和服务端交换数据，只能在两个窗口（iframe）之间交换数据
你了解的http状态码
1** 信息，服务器收到请求，需要请求者继续执行操作(101，升级为websocket协议)
2** 成功，操作被成功接收并处理(206,部分内容，分段传输)
3** 重定向，需要进一步操作以完成请求(301,302重定向；304命中缓存)
4** 客户端错误，请求包含语法错误或无法完成请求(401,要求身份验证；403，服务器理解客服端需求，但是禁止访问)
5** 服务器错误，服务器在处理请求的过程中发生了错误
你来评价一下ajax
· ajax的优势
1.无刷新页面请求，使产品更快，更小更友好
2.服务器端的任务转嫁到客户端处理
3.减轻浏览器负担，节约带宽
4.基于标准化对象，不需要安装特定的插件
5.彻底将页面与数据分离
· 缺点
1.无法使用回退按钮
2.不利于网页的SEO
3.不能发送跨域请求
-写一个简单的ajax请求
getList: function () {
var me = this;
$.ajax({
url: ‘/test’,
type: ‘POST’,
data: {
repaymentId: repaymentId
},
xhrFields: {
withCredentials: true
},
success: function (result) {
if (result.status == 0) {
console.log(‘请求成功’)
} else {
console.log(‘请求异常’)
}
},
error: function (result) {
$.toaster({ title: ‘info’, priority: ‘danger’, message: ‘服务器异常，请联系管理员！’ });
}
})
}
你知道的react的生命周期
· 初始化
componentWillMount 初始化调用，只调用一次
render 渲染页面
componentDidMount 第一次渲染后调用

· 更新
componentWillReceireProps 接收新的props时调用
shouldComponentUpdate state或props改变时调用
componentWillUpdate 将要更新时调用，可改变state的值
render
componentDidUpdate 更新后调用

· 卸载
componentWillUnMount

react声明默认props
设置默认props有两种方式
· 指定 props 的默认值，这个方法只有浏览器编译以后才会生效
static defaultProps = {
age: 18
}
· 指定 props 的默认值，这个方法会一直生效
Greeting.defaultProps = {
name: ‘我是props的默认值！’
}
react创建组件的三种方式
1.函数式定义的无状态组件，适用于纯展示组件，只负责根据传入的props展示，不涉及state状态的操作，特点如下
· 组件不会被实例化，整体渲染性能得到提升。
· 组件不能访问this对象
· 组件无法访问生命周期的方法
· 无状态组件只能访问输入的props，同样的props会得到同样的渲染结果，不会有副作用

2.es5原生方式React.createClass定义有状态的组件
· 组件会被实例化
· 可以访问生命周期
· 会自绑定函数方法

3.es6形式的extends React.Component定义的组件，是以ES6的形式来创建react的组件的，是React目前极为推荐的创建有状态组件的方式

React.createClass与React.Component区别

· this绑定不同
React.createClass创建的组件，其每一个成员函数的this都有React自动绑定，任何时候使用，直接使用this.method即可，函数中的this会被正确设置。
React.Component创建的组件，其成员函数不会自动绑定this，需要开发者手动绑定，否则this不能获取当前组件实例对象。
· 组件属性类型propTypes及其默认props属性defaultProps配置不同
· 组件初始状态state的配置不同
· Mixins的支持不同

你知道http与https的区别吗
1、https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。
2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
4、http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全
get与post的区别
· 表单的method属性设置post时发送的是post请求，其余都是get请求
· get请求通过url地址发送请求参数，参数可以直接在地址栏中显示，安全性较差；post是通过请求体发送请求参数，参数不能直接显示，相对安全
· get请求URL地址长度限制在255字节内，post请求没有长度限制
你对闭包的了解
外部函数调用之后其变量对象本应该被销毁，但闭包的存在使我们仍然可以访问外部函数的变量对象
vue动态传参以及获取
// 传参
router: {
path: ‘/test/:id’
}
// 获取
this.$route.params.id
// 通过query
跳转
h5和css3新属性
1.H5
· 语意化标签(nav、aside、dialog、header、footer等)
· canvas
· 拖放相关api
· Audio、Video
· 获取地理位置
· 更好的input校验
· web存储(localStorage、sessionStorage)
· webWorkers(类似于多线程并发)
· webSocket

2.CSS3
· 选择器
· 边框(border-image、border-radius、box-shadow)
· 背景(background-clip、background-origin、background-size)
· 渐变(linear-gradients、radial-gradents)
· 字体(@font-face)
· 转换、形变(transform)
· 过度(transition)
· 动画(animation)
· 弹性盒模型(flex-box)
· 媒体查询(@media)

实现左右固定宽，中间自适应

这是右侧的内容固定宽度