- 模板对象
es5写法
var name = 'Your name is ' + first + ' ' + last + '.';
var url = 'http://localhost:3000/api/messages/' + id;
es6写法
幸运的是，在ES6中，我们可以使用新的语法$ {NAME}，并把它放在反引号里`：
var name = `Your name is ${first} ${last}. `;
var url = `http://localhost:3000/api/messages/${id}`;
- 多行字符串
es5的多行字符串
var roadPoem = 'Then took the other, as just as fair,nt'
+ 'And having perhaps the better claimnt'
+ 'Because it was grassy and wanted wear,nt'
+ 'Though as for that the passing therent'
+ 'Had worn them really about the same,nt';
然而在ES6中，仅仅用反引号就可以解决了：
var roadPoem = `Then took the other, as just as fair,
And having perhaps the better claim
Because it was grassy and wanted wear,
Though as for that the passing there
Had worn them really about the same,`;
- 函数的扩展(默认参数)
1.函数的默认参数
这种写法的缺点在于，如果参数y赋值了，但是对应的布尔值为false，则该赋值不起作用。就像上面代码的最后一行，参数y等于空字符，结果被改为默认值。
function log(x, y) {
y = y || 'World';
console.log(x, y);
}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello World
ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。
function log(x, y = 'World') {
console.log(x, y);
}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello
var link = function(height = 50, color = 'red', url = 'http://azat.co') {
console.log(color) ----red
color = 'yellow'
console.log(color) ---yellow
}
- 箭头函数
1. 具有一个参数的简单函数
var single = a => a
single('hello, world') // 'hello, world'
2. 没有参数的需要用在箭头前加上小括号
var log = () => {
alert('no param')
}
3. 多个参数需要用到小括号，参数间逗号间隔，例如两个数字相加
var add = (a, b) => a + b
add(3, 8) // 11
4. 函数体多条语句需要用到大括号
var add = (a, b) => {
if (typeof a == 'number' && typeof b == 'number') {
return a + b
} else {
return 0
}
}
5. 返回对象时需要用小括号包起来，因为大括号被占用解释为代码块了
var getHash = arr => {
// ...
return ({
name: 'Jack',
age: 33
})
}
6. 直接作为事件handler
document.addEventListener('click', ev => {
console.log(ev)
})
7. 作为数组排序回调
var arr = [1, 9 , 2, 4, 3, 8].sort((a, b) => {
if (a - b > 0 ) {
return 1
} else {
return -1
}
})
arr // [1, 2, 3, 4, 8, 9]
二、注意点
1. typeof运算符和普通的function一样
var func = a => a
console.log(typeof func); // "function"`
2. instance of也返回true，表明也是Function的实例
console.log(func instanceof Function); // true
3. this固定，不再善变
obj = {
data: ['John Backus', 'John Hopcroft'],
init: function() {
document.onclick = ev => {
alert(this.data) // ['John Backus', 'John Hopcroft']
}
// 非箭头函数
// document.onclick = function(ev) {`
// alert(this.data) // undefined`
// }
obj.init()
这个很有用，再不用写me，self，_this了，或者bind。
4. 箭头函数不能用new
var Person = (name, age) => {
this.name = name
this.age = age
}
var p = new Func('John', 33) // error
5. 不能使用argument
var func = () => {
console.log(arguments)
}
func(55) //
- 类（class）
类相当于实例的原型（静态方法+构造函数+原型方法）， 所有在类中定义的方法， 都会被实例继承。 如果在一个方法前， 加上static关键字， 就表示该方法不会被实例继承， 而是直接通过类来调用， 这就称为“ 静态方法”,调用静态方法可以无需创建对象
class Person{
//(静态方法必须通过类名调用，不可以使用实例对象调用)
static showInfo(){
console.log('hello');
}
//构造函数，通过实例调用
constructor(sex,weight){
this.sex = sex;
this.weight = weight;
}
showWeight(){
console.log('weight:'+this.weight);
}
showSex(){
console.log('sex:'+this.sex);
}
}
let p = new Person('female','75kg');
p.showWeight();---- weight:75kg
p.showSex();----- sex:female
p.showInfo(); -----报错，不是一个函数
Person.showInfo();---hello
//继承
class Student extends Person{
constructor(sex,weight,score){
super(sex,weight);//调用父类的构造函数,这个步骤是必须的
this.score = score;
}
showScore(){
console.log('score:'+this.score);
}
}
let stu = new Student('male','70kg','100');
stu.showScore();--- score:100
stu.showSex();----sex:male
stu.showWeight();--- weight:70kg
Student.showInfo(); -----hello （可以用父类的静态方法，类调用）
静态方法也是可以从super对象上调用的。
class Foo {
static classMethod() {
return 'hello';
}
}
class Bar extends Foo {
static classMethod() {
return super.classMethod() + ', too';
}
}
Bar.classMethod();
Promise
异步操作和async函数
ES6系列文章 异步神器async-await