給React初學者的10分鐘ES6教程

原文： The 10 min ES6 course for the beginner React Developer
譯者：Jim Xiao

著名的80/20定律能夠用來解釋React和ES6的關係。由於ES6增長了超過75個新特性，可是根據我自身學習React經驗，只使用了不到20%的ES6新特性。

注意: 在這篇文章中，爲了不引發混淆，我把JavaScript近似等同於ECMAScript(ES), 而ES6 = ES5 + 新特性，因此ES6和ES5都至關於JavaScript。他們之間的區別就是支持不一樣的語法以及ES6新加了一些功能。

當我從Angular 1和純ES5轉到React時，我看了一些教程，當了解到箭頭函數和解構語句時，我十分迷惑，不知道哪些語法來自React, 哪些語法來自ES6。

可是在大概一週以後，我基本上肯定了，像{name}這樣的語法只能寫在React中(說明該語法不是來自ES6)。

這並非一個完整的教程，只是我在React代碼中使用ES6的小結。那咱們開始吧。

Let和const

在舊版的JavaScript (ES5)中，咱們使用關鍵字var來聲明變量, 利用JavaScript變量提高的黑魔法, 咱們甚至能夠在沒有聲明變量前，就使用該變量：

// ES5
console.log(myVar); // undefined
var myVar = 10;

這種變量提高可能帶來一些難以預見的結果。可是在ES6就不會存在了。經過使用let或者const關鍵字，你必須先聲明變量，才能使用它：

// ES6
console.log(myVar) // ReferenceError: myVar is not defined
let myVar = 10

從下面的結果能夠看出，const和let的不一樣在於，用const聲明變量，該變量值是不能更改的，而let能夠更改：

// ES6
let x = 10
const y = 20
x = 25 // Ok
y = 30 // TypeError: Assignment to constant variable.

再也不使用分號

ES6以及全部相關的工具都很好地支持了自動分號插入。因此，ES6的代碼中能夠幾乎去掉全部的分號, 使代碼看起來更加簡潔：

//ES5
var theNumber = 10;
console.log(theNumber);

//ES6 - 能夠去掉分號
let theNumber = 10
console.log(theNumber)

這並非一個很大的改動，但確實是讓代碼看起來更舒服，尤爲當你是CoffeeScript代碼風格的粉絲。

箭頭函數

在ES5語法中，若是聲明一個函數，須要這樣寫：

// ES5
var sum = function(a, b) {
   return a + b
}

在ES6中，你能夠經過箭頭函數快速聲明函數：

// ES6
const sum = (a, b) => {return a + b}

而且，若是你只須要簡單的一行函數，甚至能夠去掉return關鍵字

// ES6
const sum = (a, b) => a + b // 一行箭頭函數會自動返回結果

還有很是重要的一點，就是箭頭函數的this是綁定了父級做用域的上下文：

function DogWorldContext() {
  this.age = 0

  setInterval(function growUp() {
    this.age++
    console.log(this.age)
  }, 1000)
}
var worldWithStandardFunction = new DogWorldContext()
// 將會每秒打印NaN,由於growUp是普通函數，它有本身this關鍵字的指向

function DogWorldContext() {
  this.age = 0

  setInterval(()=> {
    this.age++
    console.log(this.age)
  }, 1000)
}
var worldWithArrowFunction = new DogWorldContext()
// 將會每隔1s打印出1,2,3...

箭頭函數沒有本身的this綁定。該this上下文就是父級做用域的上下文，本例子中，就是DogWorldContext。

解構

知名開發者網站Developer.mozillar.org對解構的定義是: 從數組和函數中提取值，並存儲爲變量。

提取對象的屬性值是很是常見的作法。好比下面的代碼:

// ES5; this.props.user = {name: "Daniel", age : 32}
alert(this.props.user.name + " " + this.props.user.age);

爲了使之更易讀, 咱們把屬性值賦給變量：

// ES5; this.props.user = {name: "Daniel", age : 32}
var name = this.props.user.name;
var age = this.props.user.age;
alert(name + " " + age);

在ES6中，咱們可使用對象解構:

// ES6; this.props.user = {name: "Daniel", age : 32}
const {name} = this.props.user
const {age} = this.props.user
alert(name + " " + age)

咱們甚至能夠簡寫爲一行:

// ES6; this.props.user = {name: "Daniel", age : 32}
const {name, age} = this.props.user
alert(name + " " + age)

對象字面量

ES6容許咱們用更少的代碼表示對象鍵值對。

// ES5
str = "HELLO"
number = 20
obj = {
   str: str,
   number: number
}

在ES6中，上面的代碼能夠變爲：

// ES6
str = "HELLO"
number = 20
obj = { str, number} //  obj = {str: "HELLO", number: 20}

類，構造器和方法

之前的JavaScript沒有class這個關鍵字，爲了建立一個簡單的Dog類，須要使用構造函數來模擬這個類:

// ES5
function Dog(name, weight){
  this.name = name;
  this.weight = weight;
}

Dog.prototype.speak = function(){
    alert("Woof, woof … my name is: " + this.name);
};

// 用new關鍵字初始化對象
var dog = new Dog("Spike", 25);

// 調用方法
dog.speak(); // alerts 「Woof, woof … my name is: Spike」

你能夠經過ES5的構造函數獲得一個基本的對象和該對象的方法，可是並無獲得」開箱即用」的類。那麼看看ES6的class是怎麼作的:

//ES6
class Dog {
   constructor(name, weight) {
      this.name = name
      this.weight = weight
   }
   speak() {
     alert("Woof, woof … my name is: " + this.name)
   }
}
const dog = new Dog("Spike", 25)
dog.speak()

類的繼承和React

ES5中能夠經過原型鏈繼承的方式實現繼承。可是在ES6中，能夠經過關鍵字extends來實現類的繼承:

var Greeting = createReactClass({
  render: function() {
    return <h1>Hello, {this.props.name}</h1>;
  }
});

ES6 extends的使用可使得繼承意義更加明確:

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

而且值得一提的是，若是你使用extends來定義React的組件，那麼能夠在類的構造器裏面，用簡單的this.state =...的聲明方式來替代getInitialState()方法。

Filter函數

好比咱們有如下的數組:

const numbers = [5,1, 20, 90, 8, 22, 33, 9]

若是想經過上面的數組來建立一個新的數組，而裏面的值都是大於10的。在ES5的語法下，你可能須要一個for循環，或者一些類似的操做(好比: jQuery的each())。

如今,咱們有了ES6，就可使用filter函數來遍歷數組中的全部值，而且留下那些知足條件的值。

//ES6

const notDigits = numbers.filter( function(value) {return value > 9})
console.log(notDigits) // 打印出 [20,90,22,33]

// 或者使用箭頭函數：
const notDigits1 = numbers.filter( (value) =>  {return value > 9}
// 或者使用箭頭函數默認返回的形式去掉return關鍵字：
const notDigits2 = numbers.filter( (value) => value > 9 )

Map函數

Map函數多是JavaScript最不被人重視的函數之一，即便它在ES5語法就有了。基本上，若是你須要遍歷一個數組，你就可使用map函數。

好比咱們有跟上面例子同樣的數組:

const numbers = [5,1, 20, 90, 8, 22, 33, 9]

若是想操做數組，就可使用map函數：

numbers.map( (n) => console.log(n))
// 還能夠加第二個參數, index
numbers.map( (n, index) => console.log(n + ' is the ' + index + ' value from the array ') )
// 或者咱們想建立新的數組
const double= numbers.map( (n) => n*2 )

你將會在React中常常看到map(), 不少時候它會用來顯示一個項目列表:

render() {
    return(
  this.props.items.map( (item, key) =>  <p key={key}>{item}</p>
  )
}

以上就是我在寫React代碼中使用最多的ES6特性，可能會有一些偏頗以及帶有主觀性，可是我絕沒有貶低ES6其餘新功能實用性的想法。如前所述，還有許多其餘ES6在這裏沒有涉及，但這些概念容許你輕鬆地從ES5 React升級到新的ES6語法，並瞭解來自React以及來自新ES6功能的內容。Cheers and happy coding!