ES6速成教程

最好的学习ES6的方法，是为每一个ES6示例提供一个等价的ES5实现。外面已经有不少介绍ES6的文章，本文将只讲其中一些。



Modules(Import)



// ES6
import React from 'react';
import {Route, DefaultRoute, NotFoundRoute} from 'react-router';

// ES5
var React = require('react');
var Router = require('react-router');

var Route = Router.Route;
var DefaultRoute = Router.DefaultRoute;
var NotFoundRoute = Router.NotFoundRoute;






JS var与let

这两个关键字唯一的区别是，var的作用域在最近的函数块中，而let的作用域在最近的块语句中——它可以是一个函数、一个for循环，或者一个if语句块。
这里有个很好的示例，来自MDN：







var a = 5;
var b = 10;

if (a === 5) {
  let a = 4; // The scope is inside the if-block
  var b = 1; // The scope is inside the function

  console.log(a);  // 4
  console.log(b);  // 1
}

console.log(a); // 5
console.log(b); // 1




一般来说，let是块作用域，var是函数作用域。


箭头函数(=> fat arrow)

一个箭头函数表达式与函数表达式相比有更简短的语法，以及从语法上绑定了this值。






/ ES6
[1, 2, 3].map(n => n * 2); // [2, 4, 6]

// ES5
[1, 2, 3].map(function(n) { return n * 2; }); // [2, 4, 6]




注意：如果参数只有一个，圆括号是可选的，到底是否强制使用取决于你，不过有些人认为去掉括号是坏的实践，有些人则无所谓。

除了更短的语法，箭头函数还有什么用途呢？
考虑下面这个示例，它来自于我将这个项目转换为使用ES6之前的代码：





$.ajax({ type: 'POST', url: '/api/characters', data: { name: name, gender: gender } })
  .done(function(data) {
    this.setState({ helpBlock: data.message });
  }.bind(this))
  .fail(function(jqXhr) {
    this.setState({ helpBlock: jqXhr.responseJSON.message });
  }.bind(this))
  .always(function() {
    this.setState({ name: '', gender: '' });
  }.bind(this));




上面的每个函数都创建了自己的this作用域，不绑定外层this的话我们是无法在示例中调用this.setState的，因为函数作用域的this一般是undefined。
当然，它有绕过的方法，比如将this赋值给一个变量，比如var self = this，然后在闭包里用self.setState代替this.setState即可。
而使用等价的ES6代码的话，我们没有必要如此麻烦：






$.ajax({ type: 'POST', url: '/api/characters', data: { name: name, gender: gender } })
  .done((data) => {
    this.setState({ helpBlock: data.message });
  })
  .fail((jqXhr) => {
    this.setState({ helpBlock: jqXhr.responseJSON.message });
  })
  .always(() => {
    this.setState({ name: '', gender: '' });
  });




ES6的讲解就到此为止了。