1、h5新特性
（1）语义化标签
header、hgroup、nav、datalist、section、article、aside、footer等等，将以往div无语义化进行优化，是html标签的语义得到明显提升
（2）智能化的表单
<input type="email" 限制用户输入email格式
<input type="url" 限制用户输入网址格式
<input type="date" 限制用户输入日期格式
<input type="time" 限制用户输入时间格式
<input type="month" 限制用户输入月份 格式
<input type="week" 限制用户输入周格式
<input type="number" 限制用户输入数字格式
<input type="range" 一条滑动条效果
<input type="search" 搜索格式
<input type="color" 选择颜色格式
（3）新增API
h5的audio、video多媒体的推出，也加快了flash推出浏览器舞台的步伐
<video src="" controls="controls"></video>
<audio src="" autoplay="true" controls="true"></audio>（4）本地存储
本地存储是由cookie衍生的，目的是在浏览器本地预留一个较大的空间存储数据缓存，对于优化网站性能有很大帮助，本地存储分为session storage和local storage。手机端由于local的存储在能节约大量和加载速度，不再重复加载请求。而且local自带2setItem() getItem() remove() clear()等方法，使用起来极其不方便，但是缓存需要手动清除，否则永久存在，空间大小为5MB
session则只会在当前会话页面存在，会伴随页面的关闭而销毁，用法和local一样
（5）定位（只能适用于移动端）
geoLocation定位，getlocation具有getCurrentPosition() watchPosition() clearWatch()方法
navigator.geolocation.getCurrentPosition(function(p){
var map="维度"+p.coords.latitude+"经度"+p.coords.longitude; alert(var);
})2、css3新特性
（1）css3圆角 可以给任何元素制作“圆角”
（2）background-image属性添加背景图片
background-images:url(路径)，url()路径
background-position：right bottom，left top;
background-repeat:no-repeat,repeat;
background-size指定背景图像的大小，
background-size:80px 60px;
background-clip:规定背景的绘制区域
background-origin:规定背景图片的定位区域content-box padding-box border-box
3、媒体查询
max-width是媒体特性中最常见的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效
@media screen and (max-width:480px){
.ads{
display:none;
}
}当屏幕在600px-900px之间，body的背景色渲染为“#f5f5f5”,如下所示
@media screen and（min-wwidth：600px）and (max-width:900px){
body{
background:#f5f5f5;
}
}4、数组去重方法
const arr=[1,2,3,4,4,5]
第一种方法
let newArr=[...new Set(arr)]
console.log(newArr)
第二种方法
let arr2=[];
for(let i=0;i<arr.length;i++){
if(arr2.indexOf(arr[i]==-1){
arr2.push(arr[i])
}
}
console.log(arr2)//[1,2,3,4,5]
let arr = [[1,2,3],[3,4,4,5,5],[6,7,8,9,[11,12,[12,13,[14]]]],10];
function mapArr(arr) {
let newArr = [];
for(var i=0;i<arr.length;i++) {
if(Array.isArray(arr[i])) {
let dealArr = this.mapArr(arr[i]);
newArr = [...newArr,...dealArr];
}else {
newArr.push(arr[i]);
}
}
let shoArr = [...new Set(newArr)];
let arrs = shoArr.sort((a,b)=>a-b); //a-b<0 升序
return arrs;
}
mapArr(arr);
5、前端跨域，什么是跨域，解决跨域
跨域：是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。
无法跨域是浏览器对于用户安全的考虑，如果自己写个没有同源策略的浏览器，完全不用考虑跨域问题。
同源策略限制了一些行为：
Cookie、LocalStorage和IndexDB无法读取
DOM和JS对象无法获取
Ajax请求发送不出去
6、ajax请求过程
（1）创建XMLHttpRequeat对象，也就是创建一个异步调用对象
（2）创建一个新的HTTP请求，并指定该HTTP请求的方法、URL及验证信息
（3）设置响应HTTP请求状态变化的函数
（4）发送HTTP请求
（5）获取异步调用返回的数据
（6）使用JavaScript和DOM实现局部刷新
var xmlHttp=new XMLHttpRequest();
xmlHttp.open('GET','demo.php','true');
xmlHttp.send()
smlHttp.onreadystatechange=function(){
if(xmlHttp.readyState===4&xmlHttp.status===200){
}
}7、vue与react
vue:
1、性能高效
2、双向数据绑定
3、学习难度低，上手简单
react：
1、react速度很快：虚拟DOM
2、跨浏览器兼容
3、单向数据流
4、兼容性好
VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和
设置属性值(set)的操作来实现的。
代码演示：defineProperty的用法
var obj = { };var name;
//第一个参数：定义属性的对象。
//第二个参数：要定义或修改的属性的名称。
//第三个参数：将被定义或修改的属性描述符。
Object.defineProperty(obj, "data", {
//获取值get: function () {return name;},
//设置值set: function (val) {name = val;console.log(val)}})
//赋值调用setobj.data = 'aaa';//取值调用getconsole.log(obj.data);
演示：defineProperty的双向绑定
var obj={};
Object.defineProperty(obj, 'val',{
set:function (newVal) {
document.getElementById("a").value =newVal==undefined?'':newVal;document.getElementById("b").innerHTML=newVal==undefined?'':newVal;}});document.getElementById("a").addEventListener("keyup",function (e) {obj.val = e.target.value;})8、watch和computed区别及二者使用场景
