一、ES6的var和let
传统常用的var声明的是全局的变量,可跨域访问。
而let声明的变量属于块级的,不可跨块域获取。
//es5
for (var i = 0; i < 10; i++) {}
console.info(i);
//es6
for (let j = 0; j < 10; j++) {}
console.info(j);
访问j会抛出异常:
ReferenceError: j is not defined
二、ES6的解构赋值
解构赋值大大提高了开发效率及代码可读性
let [x, y] = [1, 2];
/* 相当于
* let x = 1;
* let y = 2;
*/
console.info(x, y);
let {
bar,
foo: a
} = {
foo: 'foo',
bar: 'bar'
};
console.info(bar, a);
输出结果:
1 2
bar foo
三、ES6的箭头函数
替代匿名函数,并且解决了方法内部this的指向。
let a = {
fun: function() {
console.info(this);
}
};
let objA = {
};
a.fun();
let b = {
fun: () => {
console.info(this);
}
};
let objB = {};
b.fun();
输出结果:
{ fun: [Function: fun] }
{}
第一个方法没有使用箭头函数,使用的是传统方法,导致this指向全局而非内部,因此输出了{ fun: [Function: fun] }
第二个方法使用了箭头函数,让this指向了内部。
四、ES6的async函数
async函数返回一个 Promise 对象,可以使用then方法添加回调函数。当函数执行的时候,一旦遇到await就会先返回,等到异步操作完成,再接着执行函数体内后面的语句。
function timeout(ms) {
return new Promise((resolve) => {
setTimeout(resolve, ms);
});
}
async function asyncPrint(value, ms) {
await timeout(ms);
console.log(value);
}
asyncPrint('hello world', 5000);
输出结果:
hello world
[Finished in 5.3s]
五、ES6的class类
ES6支持使用class关键字声明一个类
class People {
constructor(name, age) {
this.name = name;
this.age = age;
}
toString() {
return `My name is ${this.name}, ${this.age} age!`;
}
}
let me = new People('张三丰', 26);
console.info(me.toString());
输出结果:
My name is 张三丰, 26 age!