ES指的是JS的核心ECMAScript部分（除BOM+DOM外），我们之前学的是ECMAScrip5，数字6表示版本号
一、ES6简介与特性
ES6全称为：ECMAScript 6.0
ES指的是JS的核心ECMAScript部分（除BOM+DOM外），我们之前学的是ECMAScrip5，数字6表示版本号。ES5版本在2009年成为标准，ES6虽然已经于2015年9月发布，但目前大部分浏览器均还在完善支持中，比如chrome浏览器支持度已经达到了98%以上。
那么如何解决这种兼容性：
1、使用在支持ES6的设备上
2、使用语法解析转换工具，把我们写的 ES6 语法转换成 ES5，常用的工具有 babel，jsx，traceur，es6-shim 等
学习ES6是为接下来的node.js和vue.js做准备。目前只需要了解如下几方面即可。
总结：ES6给人的感觉越来越像java这种后端语言了，所以才会有node.js这种可以让JavaScript做服务器端开发的平台。
二、ES6声明变量的方式let、const
-
let:声明变量的另一种方式
特点：
1、是块级作用域，无论在哪里声明，都只能在所包含的作用域内访问，比如函数和代码块（{}这种形式）都可以形成块级作用域
2、在同级作用域内，不能重复声明，多个层级嵌套，只在最接近的{}内有效
3、没有变量提升，也就是没有预解析，必须要先声明再使用（即所谓的暂死区，变量没执行时是不会被扫描到的，必须执行到才会将变量释放并可用）
//注意：
1、var a=10; let a=1;
//这种也是重复声明。不允许，违背了第2条规则。
2、for(let i=0;i<5;i++){ let i=10;}
//这是允许的，可以认为()内的是主作用域，而{}是次作用域，不算重复声明。该函数的结果是会打印5次10，但如果{}内的let不要，那么则只会打印1次10，因为循环不满足条件，跳出了。
总结：有了以上特性，意味着之前使用闭包才能留住当前循环的那个值现在可以使用let即可，不再需要闭包。
-
const：声明常量
特点：
1、声明时必须要赋值，且该值不可改变
2、是块级作用域。同let
3、对于对象，不能改对象本身，但可以改里面的属性值，也就是只能通过访问的方式改属性值。类似于指针，不能改变地址，但能改变里面的值
4、建议使用大写字母来命名// 比如希望π的值是不变的 const Pi=3.14; //比如希望ajax对象是不会被更改的 const xhr=new XMLHttpRequest(); //使用const声明的变量，对象不能修改，但是对象里面的属性可以修改 const Obj={ name:"张三" } // obj=123; obj.name1="李四";
三、ES6解构赋值
含义：按照一定模式，将数组或对象中提取值（结构拆开）用于给变量赋值。
通俗讲就是将一个结构给解开，用于给变量或属性赋值。也就是解构在左边，赋值在右边。
1.数组的解构赋值。（使用[]进行）
之前定义多个变量需要分别进行。而现在可以像数组那样批量声明和赋值变量。
例子1:
let [a, b, c] = [1, 2, 3]; //等价于let a=1,b=2,c=3;
let [a, b, c, d] = [1, 2, 3]; //等价于let a=1,b=2,c=3,d=undefined;
例子2：在左边可以给变量默认值
let [a, b, c=5] = [1, 2]; 等价于let a=1,b=2,c=5;
//注意：如果同时给了默认值和初始值，那么初始值会替换默认值
let [a, b, c=5] = [1, 2, 3];
//等价于let a=1,b=2,c=3 即c不会等于5，而是等于3
例子3：可以使用逗号省略变量名
let [a,,c] =[1,2,3]; 此时相当于let a=1,c=3
注意：左右两边必须要有中括号，才是解构赋值，如果左边有，右边没有则会报错。
2.对象的解构赋值（使用{}进行）
可以使用一个let声明批量定义多个对象。左边的变量名必须要在右边也出现相同的属性名。且没有顺序之分。
例子1：
let {foo,bar}={foo:"abc",bar:"123"}; //结果都一样
let {bar,foo}={foo:"abc",bar:"123"}; //结果都一样
//以上例子中的foo，bar对应的是右边的同名属性所代表的值，即相当于是foo="abc",bar="123" 如果是要给一个对象，则在右边的值需要写对象的形式：
let {foo,bar}={foo:{},bar:{}};
注意：匹配设置对象后，可以通过左边的变量名来访问右边对象的属性或方法，但是不允许在同级作用域中再次出现重复命名。即：
let {foo,bar}={foo:"abc",bar:"123"};
let foo=10;
console.log(foo) // 报错，不允许重复声明。因为foo已经被声明了。
例子2：默认值
let {fun,isEnd,say,isArray=function(){}}={
fun:function(){
},
say:function(){
},
isEnd:function(){
}
};
//右边没有对应的，那么可以在左边这里给其添加一个默认值，当然其他的也可以，右边优先级要大于左边的。
例子3：批量设置多个对象
let {aaa,bbb,ccc} = {
aaa:{
//对象1
},
bbb:{
//对象2
},
ccc:{
//对象3
}
}
总结：对象的结构赋值，右边的属性值可以是任意类型的数据。
3、字符串的解构赋值
字符串之所以能够解构赋值，是因为字符串被转换成了一个类似数组的对象。
例子1：
let [a, b, c, d, e] = 'hello'; //此时：a=h,b=e,...
4、函数参数的解构赋值
例子1：
函数add的参数表面上是一个数组，但在传入参数的那一刻，数组参数就被解构成变量x和y。
function add([x, y]){
return x + y;
}
add([1, 2]); // 3
例子2：参数是对象的情况（d=5为默认值）
function fun({a,b,c,d=5}){
console.log(a);
console.log(b);
console.log(c);
}
// 调用
fun({
a:1,
b:2,
c:3
});
总结：形参相当于是左边，实参相当于是右边。函数体中对应的变量，相当于是在访问结构赋值。
四、ES6箭头函数
含义：使用箭头(=>)定义函数。也就是箭头函数是函数的快捷写法。就像我们在emmet插件中使用ul>li按回车就可以输出HTML代码那样。
//格式：
var fun = v => v; //只有一个参数，可省去中间的v的括号
var fun =() => { }; //没有参数，或多个参数，而且没有返回值
需要将声明的箭头函数赋值给一个变量。
-
箭头函数的特点：
1）、不需要 function 关键字来创建函数var fun= function (x){ return x; } //可简写为： var fun= x=> x;注意：如果只有一个参数，可以不写(),如果没有参数或多个参数就一定要写
//比如 var fun=()=> 5; //等价于 var fun=function (){ return 5;}2）、省略 return 关键字
函数语句和返回值只有一个表达式时是可以省略{}和return关键字的
3）、继承当前上下文的 this 关键字,即在哪里定义this指的就是谁，而不是看它在哪里调用
- 注意的事项(特性)：
1、不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误
2、不可以使用arguments对象，该对象在函数体内不存在，如果要用，可以用Rest参数代替
3、在箭头函数中，this指向是固定的，也就是绑定在了定义时所在的作用域下。 - 总结：
箭头函数其实就是不用function，()表示形式参数，=> 后面接的就是有返回值的函数体,{}也可以省略了，而且不需要return，但是如果不需要它有返回值，那么需要使用void关键字。
注意：返回一个对象，需要加()；函数体包含多条语句时不可省略{}，有多条语句并有返回值还需要手动写return返回
此资源下载链接已被无情的隐藏，请输入验证码解锁：
请关注本站公众号回复“验证码”，获取验证码。
在微信里搜索“WEB前端全栈圈”或者“imqdcn”或者微信扫描二维码都可以关注微信公众号
