初学ES6知识要点总结

一、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!