原文：
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!
