摘要：但是在中，可以通過(guò)關(guān)鍵字來(lái)實(shí)現(xiàn)類(lèi)的繼承的使用可以使得繼承意義更加明確并且值得一提的是，如果你使用來(lái)定義的組件，那么可以在類(lèi)的構(gòu)造器里面，用簡(jiǎn)單的的聲明方式來(lái)替代方法。

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

著名的80/20定律可以用來(lái)解釋React和ES6的關(guān)系。因?yàn)镋S6增加了超過(guò)75個(gè)新特性，但是根據(jù)我自身學(xué)習(xí)React經(jīng)驗(yàn)，只使用了不到20%的ES6新特性。

注意: 在這篇文章中，為了避免引起混淆，我把JavaScript近似等同于ECMAScript(ES), 而ES6 = ES5 + 新特性，所以ES6和ES5都相當(dāng)于JavaScript。他們之間的區(qū)別就是支持不同的語(yǔ)法以及ES6新加了一些功能。

當(dāng)我從Angular 1和純ES5轉(zhuǎn)到React時(shí)，我看了一些教程，當(dāng)了解到箭頭函數(shù)和解構(gòu)語(yǔ)句時(shí)，我十分迷惑，不知道哪些語(yǔ)法來(lái)自React, 哪些語(yǔ)法來(lái)自ES6。

但是在大概一周之后，我基本上確定了，像{name}這樣的語(yǔ)法只能寫(xiě)在React中(說(shuō)明該語(yǔ)法不是來(lái)自ES6)。

這并不是一個(gè)完整的教程，只是我在React代碼中使用ES6的小結(jié)。那我們開(kāi)始吧。

在舊版的JavaScript (ES5)中，我們使用關(guān)鍵字var來(lái)聲明變量, 利用JavaScript變量提升的黑魔法, 我們甚至可以在沒(méi)有聲明變量前，就使用該變量：

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

這種變量提升可能帶來(lái)一些難以預(yù)見(jiàn)的結(jié)果。但是在ES6就不會(huì)存在了。通過(guò)使用let或者const關(guān)鍵字，你必須先聲明變量，才能使用它：

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

從下面的結(jié)果可以看出，const和let的不同在于，用const聲明變量，該變量值是不能更改的，而let可以更改：

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

ES6以及所有相關(guān)的工具都很好地支持了自動(dòng)分號(hào)插入。所以，ES6的代碼中可以幾乎去掉所有的分號(hào), 使代碼看起來(lái)更加簡(jiǎn)潔：

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

//ES6 - 可以去掉分號(hào)
let theNumber = 10
console.log(theNumber)

這并不是一個(gè)很大的改動(dòng)，但確實(shí)是讓代碼看起來(lái)更舒服，尤其當(dāng)你是CoffeeScript代碼風(fēng)格的粉絲。

在ES5語(yǔ)法中，如果聲明一個(gè)函數(shù)，需要這樣寫(xiě)：

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

在ES6中，你可以通過(guò)箭頭函數(shù)快速聲明函數(shù)：

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

并且，如果你只需要簡(jiǎn)單的一行函數(shù)，甚至可以去掉return關(guān)鍵字

// ES6
const sum = (a, b) => a + b // 一行箭頭函數(shù)會(huì)自動(dòng)返回結(jié)果

還有非常重要的一點(diǎn)，就是箭頭函數(shù)的this是綁定了父級(jí)作用域的上下文：

function DogWorldContext() {
  this.age = 0

  setInterval(function growUp() {
    this.age++
    console.log(this.age)
  }, 1000)
}
var worldWithStandardFunction = new DogWorldContext()
// 將會(huì)每秒打印NaN,因?yàn)間rowUp是普通函數(shù)，它有自己this關(guān)鍵字的指向

function DogWorldContext() {
  this.age = 0

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

箭頭函數(shù)沒(méi)有自己的this綁定。該this上下文就是父級(jí)作用域的上下文，本例子中，就是DogWorldContext。

知名開(kāi)發(fā)者網(wǎng)站Developer.mozillar.org對(duì)解構(gòu)的定義是: 從數(shù)組和函數(shù)中提取值，并存儲(chǔ)為變量。

提取對(duì)象的屬性值是非常常見(jiàn)的做法。比如下面的代碼:

// 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中，我們可以使用對(duì)象解構(gòu):

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

我們甚至可以簡(jiǎn)寫(xiě)為一行:

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

ES6允許我們用更少的代碼表示對(duì)象鍵值對(duì)。

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

在ES6中，上面的代碼可以變?yōu)椋?/p>

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

以前的JavaScript沒(méi)有class這個(gè)關(guān)鍵字，為了創(chuàng)建一個(gè)簡(jiǎn)單的Dog類(lèi)，需要使用構(gòu)造函數(shù)來(lái)模擬這個(gè)類(lèi):

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

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

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

// 調(diào)用方法
dog.speak(); // alerts “Woof, woof … my name is: Spike”

你可以通過(guò)ES5的構(gòu)造函數(shù)得到一個(gè)基本的對(duì)象和該對(duì)象的方法，但是并沒(méi)有得到”開(kāi)箱即用”的類(lèi)。那么看看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()

ES5中可以通過(guò)原型鏈繼承的方式實(shí)現(xiàn)繼承。但是在ES6中，可以通過(guò)關(guān)鍵字extends來(lái)實(shí)現(xiàn)類(lèi)的繼承:

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

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

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

并且值得一提的是，如果你使用extends來(lái)定義React的組件，那么可以在類(lèi)的構(gòu)造器里面，用簡(jiǎn)單的this.state =...的聲明方式來(lái)替代getInitialState()方法。

比如我們有以下的數(shù)組:

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

如果想通過(guò)上面的數(shù)組來(lái)創(chuàng)建一個(gè)新的數(shù)組，而里面的值都是大于10的。在ES5的語(yǔ)法下，你可能需要一個(gè)for循環(huán)，或者一些相似的操作(比如: jQuery的each())。

現(xiàn)在,我們有了ES6，就可以使用filter函數(shù)來(lái)遍歷數(shù)組中的所有值，并且留下那些滿足條件的值。

//ES6

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

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

Map函數(shù)可能是JavaScript最不被人重視的函數(shù)之一，即使它在ES5語(yǔ)法就有了?；旧?，如果你需要遍歷一個(gè)數(shù)組，你就可以使用map函數(shù)。

比如我們有跟上面例子一樣的數(shù)組:

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

如果想操作數(shù)組，就可以使用map函數(shù)：

numbers.map( (n) => console.log(n))
// 還可以加第二個(gè)參數(shù), index
numbers.map( (n, index) => console.log(n + " is the " + index + " value from the array ") )
// 或者我們想創(chuàng)建新的數(shù)組
const double= numbers.map( (n) => n*2 )

你將會(huì)在React中經(jīng)?？吹?b>map(), 很多時(shí)候它會(huì)用來(lái)顯示一個(gè)項(xiàng)目列表:

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

以上就是我在寫(xiě)React代碼中使用最多的ES6特性，可能會(huì)有一些偏頗以及帶有主觀性，但是我絕沒(méi)有貶低ES6其他新功能實(shí)用性的想法。如前所述，還有許多其他ES6在這里沒(méi)有涉及，但這些概念允許你輕松地從ES5 React升級(jí)到新的ES6語(yǔ)法，并了解來(lái)自React以及來(lái)自新ES6功能的內(nèi)容。Cheers and happy coding!