ES6为ECMA（European Computer Manufactures Association 欧洲计算机制造联合会） Script6的简写，推出于2015年。而ES5在IE8以下版本是不支持的，如trim（）截取前后字符串的方法就不支持。
1、let
在ES6推出后，我们可以使用let声明一个变量，像var那样。不过两者也有不同之处。首先，let声明没有变量提升，并且变量不能重复声明:
console.log(a);
let a = "zhar";
let c = 10;
let c = 20;
console.log(c);
所以，上面两种情况都会报错。
let在for循环中声明的变量为局部变量，只存在于这个块级作用域中，循环之外不存在这个变量，所以可以用来避免了for循环那个经典的BUG：
for (let i = 0;i < 5;i++) {
arr[i] = function () {
console.log(i);
}
}
//console.log(i);
arr[3]();
let声明的变量为块级变量（块级作用域），和外部声明的同名变量互不影响，称为暂时性死区
var e = 100;
function fun() {
let e;
e = 200;
console.log(e);//200
}
fun();
console.log(e);//100
2、const
const为constant（常量）的缩写，用来声明一个常量。常量为一个固定值，如：PI，并且通常用全大写的字母来表示这是一个常量。一旦声明必须赋值，并不可更改，其它和let一致。如:
var PI = 3.14;
3、arrow箭头函数
函数的新写法
代码如下:
var fun = function() {
return 10;
}
fun();
let foo = ()=>10;
console.log(foo());
let bar = (a,b)=>a*b;
console.log(bar(10,20));
let a = (a,b)=>{
return a+b;
}
console.log(a(33,44));
function b (callback) {
callback();
}
b(function () {
console.log(1111);
})
b(()=>{console.log(222)});
- 箭头函数能保留当前的作用域
- 使用箭头函数声明的函数，其作用域为 声明时所在的位置(作用域);
- 箭头函数没有自己的this,没有自己的作用域，作用域来自于所在的作用域
- 不能使用new关键字
- 不能使用arguments
我们可以利用这些属性，在函数里的定时器中使用函数中的this：
之前的写法为
let obj = {
name : "zhar",
say : function () {
console.log(this.name);
var _this = this;
setTimeout(function () {
console.log(_this.name);
},0);
}
}
obj.say();
现在的写法
let obj = {
name : "zhar",
say : function () {
console.log(this.name);
var _this = this;
setTimeout(()=>console.log(this.name),0);
}
}
obj.say();
4、template模板字符串
我们可以使用template来方便的书写一个便签和字符串等。如:
let name = "zhar";
var str = `
<div>
<span>${name}</span>
</div>
abc
def
`;
console.log(str);
5、object
为声明变量提供了更加方便的方法，直接上代码:
//var name = "zhar";
//var obj = {
// name : name
//}
//
//console.log(obj);
//
////解构
//let age = 30;
//
//let obj2 = {name,age};
//
//console.log(obj2);
//
//let n = "nnn"
//let obj3 = {n,age};
//console.log(obj3);
//
//let obj4 = {nn:"2n",n,age}
//console.log(obj4);
//let obj5 = {name:"zhar",age:30};
////let{name,age} = obj5;
//let{name} = obj5;// === let name = obj5.name;
//console.log(name);
var obj6 = {name:"liu",age:30,address:"北京"}
function fun ({name,age,address}) {
//var name = obj.name;var age = obj.name;var address = obj.address;
console.log(name,age,address)
}
fun(obj6);
为对象添加某个之前声明了的属性，只需将属性名写在花括号里就可以啦
6、Set&Map
Set和Map分别用来声明一个数组和对象。
Set和Array类似，不过没有重复的元素，并且无length属性：
let s = new Set([2,2,3,3,4,4,5]);
console.log(s);
let s2 = new Set();
s2.add(1);
add() 添加元素
delete() 删除元素
has() 是否包含元素
size 得到集合长度
clear() 清空集合
Map用法和Set类似，并且以上方法也存在：
let m = new Map();
m.set("name","zhar");
console.log(m);
console.log(m.get("name"));
//Map 可以使用任意类型做键，哪怕时候函数对象都行
let a = 10;
m.set(a,"abc");
console.log(m);
//$("div").length;
//$("div").size;
7、Array.from() 方法
之前我们要将类数组（如：arguments，string，NodeList--querySelectAll选择的内容）转为数组需要用的方法为Array.prototype.slice.call(arguments);，而现在只需用**Array.from() **方法将arguments转为数组：
function fun () {
console.log(arguments); s
let a = Array.from(arguments);
a.push("d");
console.log(a);//[a,b,c,d]
}
fun("a","b","c");
let b = Array.from("hello");
console.log(b)//[h,e,l,l,0]
8、default默认参数
函数需要接收一个参数，而没有传参时需要给设置一个默认值时的方便写法。
之前的写法
function fun(a) {
//a=a或0,不传参数为0
a = a || 0;
return a/5;
}
console.log(fun(3));
console.log(fun());
现在的写法
//参数默认值,不传参数时，执行等于0
function bar (a=0) {
return a/5;
}
console.log(bar());
console.log(bar(10));
只需写成 a=0 即可
9、class声明构造函数
ES6中，声明到构造函数本身的属性只需声明在constructor中，而声明到原型上的属性直接写在花括号里即可，并且提供了继承的方法：
class Person{
constructor () {
this.age = 30;
this.name1 = "jack";
}
say(name){//Person.prototype.say
console.log("你好:"+name+this.age);
}
say1() {
}
}
//var p = new Person();
//p.say("Tom");
//继承时，是没有this的，没有执行环境的，必须调用super()来继承父级的this
class Student extends Person {
constructor (age) {
super();
this.age = age;
}
}
let s = new Student(300);
s.say("小明");
10、reset运算符
为了替换arguments而出现的方法。
可以使用... 来获取剩余参数，如：
function fun(d,e,...a) {
//可以使用arguments接收
console.log(d,e,a)
}
fun(1,2,3,4,5,6);
... 扩展运算符
let arr = [2,3,4,5];
let arr2 = [6,7,8]
console.log(...arr);//2 3 4 5
连接两个数组
let arr = [2,3,4,5];
let arr2 = [6,7,8];
//原生的写法
//console.log(arr.concat(arr2));
console.log([...arr,...arr2]);
扩展运算符将arguments转为数组
function foo (x,y,z) {
console.log([...arguments]);
}
11、Promise
在ES6中，使用Promise模块来模拟异步请求时，函数层层嵌套的情况：
//promise 承诺
//ES5
//function fun (callback) {
// //用 setTimeout 替代一个异步执行的内容 ajax
// //异步: 不可预估返回结果时间
// setTimeout(function () {
// console.log("异步--执行完成");
// callback("异步--给你的结果");
// },1000)
//}
////回调函数
//fun(function (res) {
// console.log(res);
//});
//promise语法:
//let promise = new Promise(function (resolve,reject) {
// if (true) {//异步操作成功
// resolve();
// }else {
// reject();
// }
//});
//
//promise.then(function () {
// console.log("成功");
//},function () {
// console.log("失败");
//});
function sync1 () {
return new Promise(function (resolve,reject) {
setTimeout(function () {
if (5 > 4) {
resolve("异步一: 大于");
}else {
reject("异步一: 小于");
}
},1000)
})
}
function sync2 (result) {
return new Promise (function (resolve,reject) {
setTimeout(function () {
if (true) {
resolve("异步二: true");
}else {
reject("异步二: false");
}
},2000)
})
}
function sync3 () {
return new Promise (function (resolve,reject) {
setTimeout(function () {
if (true) {
resolve("异步三: true");
}else {
reject("异步三: false");
}
},4000)
})
}
//sync1().then(function (res) {
// //console.log(abc);
// console.log(res);
// return sync2(res);
//},function (err) {
// console.log(err);
//}).then(function (r2) {
// //抛出错误
// //throw new Error("错误啦！")
// console.log(r2);
// return sync3();
//}).catch(function () {
// //e为错误信息
// console.log("catch异常",e);
//}).then(function (r3) {
// console.log(r3);
// return "abc";
//}).then(function (r4) {
// console.log(r4);
// return "def"
//}).then(function (r5) {
// console.log(r5);
//}).catch(function () {
// console.log("异常");
//});
//Promise.all([promise1,promise2,promise3,...]) 全部异步函数执行完成后调用 result
//以最慢者为准
//Promise.all([sync1(),sync2(),sync3()]).then(function (res) {
// console.log(res);
//});
//Promise.race() 竞赛模式 以最快者为准 只返回最快的结果
Promise.race([sync1(),sync2(),sync3()]).then(function (res) {
console.log(res);
});
//箭头函数的写法
//sync1().then((res) => sync2(res)).then((r2) =>console.log(r2));
//有错误时直接进入到catch块，后面代码还会执行
//try{
//
//}catch(e){
// //TODO handle the exception
//}
