JavaScript ES6标准
使用ES6的好处：1.方便 2.解决了JavaScript的遗留问题
1.新的变量声明方式
以往使用的var的缺点:
1.可以重复声明
2.不能限制修改
3.没有块级作用域
ES6新特性：增加了let和const声明方式
let 声明变量
const 声明常量
let的用法：
禁止重复声明
let a = 5;
let a = 6;
alert(a);
//无法显示,因为a已经声明过了，禁止重复声明。
const的用法:
控制修改
const a = 5;
a = 6;
alert(a);
//无法显示，因为a已经被const声明为常量，无法修改。
ES6支持语法块块级作用域
//使用var
if(true){
var a = 5;
}
alert(a);//能显示a=5，不支持块级作用域，a能在外面被读到。
//使用let
if(true){
let a = 5;
}
alert(a);//不能显示，会报错：a is not defined，因为a在语法块内部。
//使用const
if(true){
const a = 5;
}
alert(a);//不能显示，会报错：a is not defined，因为a在语法块内部。
实例演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
window.onload = function(){
var inputBtn = document.getElementsByTagName("input");
for (var i = 0; i < inputBtn.length; i++) {
inputBtn[i].onclick = function(){
alert(i);
};
};
};
</script>
</head>
<body>
<input type="button" value="我是第一个">
<input type="button" value="我是第二个">
<input type="button" value="我是第三个">
<input type="button" value="我是第四个">
</body>
</html>
效果：
按钮都是输出4
点击前面3个按钮都会显示4。这是因为使用var声明的i在for循环执行完毕之后，i就是等于4，i的内存地址会被最后一个值修改。但是使用let声明的变量就不会出现这种问题，i会被分配四个内存地址。
当我们在for语法块里使用let的时候就可以正常显示了
<script>
window.onload = function(){
var inputBtn = document.getElementsByTagName("input");
for (let i = 0; i < inputBtn.length; i++) {
inputBtn[i].onclick = function(){
alert(i);
};
};
};
</script>
可以正常显示
点击第一个按钮显示0，点击第二个按钮显示1，点击第三个会显示2...
总结：为了规范代码，采用ES6标准，以后就抛弃使用var。
2.结构赋值
直接看例子：
<script>
let {a,b,c} = {a:1,b:2,c:3};
console.log(a,b,c);
</script>
输出的值
相当于同时声明了3个变量，左边的a，b，c可以从右边的json对象里取出对应的值。
不但可以结构对象，还可以结构赋值数组
let [a,b,c] = [1,2,3];
console.log(a,b,c);
输出
注意：左右两边类型和结构要一样。
3.箭头函数
原写法：
function (参数){
return a;
};
箭头函数写法：
(参数)=>{
return a
};
//如果有且仅有一个参数，可以省略()
参数=>{
return a
};
//如果有且仅有一条return语句，可以省略{return}
参数=>a;
//如果返回的是带{}的json对象，简写的时候加一个()。
//原写法
function A(){
return {a:1,b:2};
};
//简写
let A =()=>({a:1,b:2});
使用箭头函数的好处：1.方便 2.修复this
JavaScript的this指向总是让人搞混，弄不清楚到底指向谁。
看例子：
<script>
let A = {
a: 1,
b: 2,
show: function () {
console.log(this.a + this.b);
}
}
//把A的show方法赋给页面的点击事件
document.onclick = A.show;
</script>
NaN
当我点击页面的时候出现的是
NaN，并没有出现3。这是因为原本绑定A的this，现在绑定在document上了。
而箭头函数内的this是不会变的，他永远绑定在当前环境下。
看例子：
<script>
let A = {
a: 1,
b: 2,
show: ()=>{
console.log(this.a + this.b);
}
}
//把A的show方法赋给页面的点击事件
document.onclick = A.show;
</script>
这种写法下的this永远绑定在了window上，因为json是在全局情况（即window）下声明的，所以this永远绑定在了window上。那么如何才能绑定在A上呢？这就要用到ES6的新特性class，这下面再去介绍。
4.参数展开（...的用法）
4.1 剩余参数
直接看例子
<script>
function show (a,b,...arr){
console.log(a, b,arr);
}
show(1,2,3,44,55,66,77,88);
</script>
输出：
在这里插入图片描述
可以看到传入的参数里面的1和2按顺序给了a和b，剩余的数都给了数组arr。
所以可以用...这种写法来收集剩余的参数，但是必须写在参数的最后。
4.2 展开数组
直接看例子
<script>
var arr = [1,5,7,8];
function sum(a,b,c,d){
return a+b+c+d;
}
console.log(sum(arr[0],arr[1],arr[2],arr[3]))
</script>
输出的是21。好在这个数组只有4个值，那么如果有一个上万行的数组怎么办呢，不可能一个一个敲吧。现在有了更加简洁的写法
<script>
var arr = [1,5,7,8];
function sum(a,b,c,d){
return a+b+c+d;
}
console.log(sum(...arr))
</script>
无论你多少个值...数组名就代表你数组所有的值。
再看一个例子
<script>
let A = [1,2,3];
let B = [7,8,9];
let C = [...A,...B];
//等价于 let C = [1,2,3,7,8,9]
</script>
