ES6的相关知识

ECMAScript 6 简称 ES6，是 JavaScript 语言的下一代标准，已经在2015年6月正式发布了。它的目标是使得 javascript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

ECMAScript 和 JavaScript 的关系：前者是后者的语法规格，后者是前者的一种实现

let、const

let 定义的变量不会被变量提升，const 定义的常量不能被修改，let 和 const 都是块级作用域

ES6前，js 是没有块级作用域 {} 的概念的。（有函数作用域、全局作用域、eval作用域）

变量提升：在ES6以前，var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部；不在函数内即在全局作用域的最顶部。

举个列子：

常规的写法：

console.log(a)//undefinedvar a=hello;var a;//变量提升console.log(a)a=hello;

ES6的let 的写法：

let a=hello;console.log(a)

import、export

// 全部导入import people from './example'// 将整个模块当作单一对象进行导入，该模块的所有导出都会作为对象的属性存在import   * as  example  from "./example.js"// 导入部分，引入非 default 时，使用花括号import   {name, age} from './example'// 导出默认, 有且只有一个默认export default App// 部分导出export  class  App extends React.Component {}

class、extends、super

class Animal {    constructor() {        this.type = 'animal';    }    says(say) {        console.log(this.type + ' says ' + say);    }}let animal = new Animal();animal.says('hello'); //animal says helloclass Cat extends Animal {    constructor() {        super();        this.type = 'cat';    }}let cat = new Cat();cat.says('hello'); //cat says hello

首先用class定义了一个“类”，可以看到里面有一个constructor方法，这就是构造方法，而this关键字则代表实例对象。简单地说，constructor内定义的方法和属性是实例对象自己的，而constructor外定义的方法和属性则是所有实力对象可以共享的。

Class之间可以通过extends关键字实现继承，这比ES5的通过修改原型链实现继承，要清晰和方便很多。上面定义了一个Cat类，该类通过extends关键字，继承了Animal类的所有属性和方法。

super关键字，它指代父类的实例（即父类的this对象）。子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。

ES6的继承机制，实质是先创造父类的实例对象this（所以必须先调用super方法），然后再用子类的构造函数修改this。

传统继承：

// ES5var Shape = function(id, x, y) {    this.id = id,        this.move(x, y);};Shape.prototype.move = function(x, y) {    this.x = x;    this.y = y;};var Rectangle = function id(ix, x, y, width, height) {    Shape.call(this, id, x, y);    this.width = width;    this.height = height;};Rectangle.prototype = Object.create(Shape.prototype);Rectangle.prototype.constructor = Rectangle;var Circle = function(id, x, y, radius) {    Shape.call(this, id, x, y);    this.radius = radius;};Circle.prototype = Object.create(Shape.prototype);Circle.prototype.constructor = Circle;

ES6继承：

// ES6class Shape {    constructor(id, x, y) {        this.id = id;        this.move(x, y);    }    move(x, y) {        this.x = x;        this.y = y;    }}class Rectangle extends Shape {    constructor(id, x, y, width, height) {        super(id, x, y);         this.width = width ;        this.height = height;    }}class Circle extends Shape {    constructor(id, x, y, radius) {        super(id, x, y);        this.radius = radius;    }}

arrow functions （箭头函数）

// ES5var arr1 = [1, 2, 3];var newArr1 = arr1.map(function(x) {    return x + 1;});// ES6let arr2 = [1, 2, 3];let newArr2 = arr2.map((x) => {    x + 1});

Promise

// 发起异步请求fetch('/api/todos')    .then(res => res.json())    .then(data => ({        data    }))    .catch(err => ({        err  }));

Generators

生成器（ generator）是能返回一个迭代器的函数。

生成器函数也是一种函数，最直观的表现就是比普通的function多了个星号*，

在其函数体内可以使用yield关键字,有意思的是函数会在每个yield后暂停。

这里生活中有一个比较形象的例子。咱们到银行办理业务时候都得向大厅的机器取一张排队号。

你拿到你的排队号，机器并不会自动为你再出下一张票。

也就是说取票机“暂停”住了，直到下一个人再次唤起才会继续吐票。

迭代器：当你调用一个generator时，它将返回一个迭代器对象。

这个迭代器对象拥有一个叫做next的方法来帮助你重启generator函数并得到下一个值。

next方法不仅返回值，它返回的对象具有两个属性：done和value。value是你获得的值，

done用来表明你的generator是否已经停止提供值。继续用刚刚取票的例子，每张排队号就是这里的value，

打印票的纸是否用完就这是这里的done。

// 生成器function *createIterator() {    yield 1;    yield 2;    yield 3;}// 生成器能像正规函数那样被调用，但会返回一个迭代器let iterator = createIterator();console.log(iterator.next().value); // 1console.log(iterator.next().value); // 2console.log(iterator.next().value); // 3