摘要：無論是靜態(tài)變量還是塊級變量，都不能重復(fù)定義，否則會(huì)報(bào)錯(cuò)。當(dāng)存在多個(gè)嵌套的回調(diào)函數(shù)時(shí)，代碼的縮進(jìn)層級將會(huì)非常多，不利于閱讀。如果只有一個(gè)回調(diào)函數(shù)，不涉及到錯(cuò)誤處理，則不建議修改為的形式?；卣{(diào)函數(shù)常見于異步編程。

* 核心例子
* 修改成靜態(tài)變量（const）或塊級變量（let）
    * 開始修改
    * 疑問解釋（重復(fù)定義會(huì)發(fā)生什么）
    * 疑問解釋（let的塊級作用域是怎樣的）
    * 疑問解釋（const定義的變量在基礎(chǔ)數(shù)據(jù)類型和引用類型中的差異）
* 修改成Promise的形式
    * 預(yù)備知識(shí)（回調(diào)函數(shù)是什么）
    * 預(yù)備知識(shí)（如何把回調(diào)函數(shù)改為Promise）
    * 開始修改
* 修改成箭頭函數(shù)（Arrow Function）
    * 預(yù)備知識(shí)（箭頭函數(shù)是什么）
    * 預(yù)備知識(shí)（箭頭函數(shù)函數(shù)中的this是個(gè)坑）
    * 開始修改
* 修改拼接字符串成模板字符串
    * 預(yù)備知識(shí)（字符串的拼接方式）
    * 預(yù)備知識(shí)（改為模板字符串的方式）
    * 開始修改
* 修改成解構(gòu)的對象
* 修改成Class

文中的例子，請?jiān)谧钚碌腃hrome中測試。關(guān)于配置ES6轉(zhuǎn)ES5的環(huán)境，不在本文探討的范疇。

// 定義一個(gè)學(xué)生構(gòu)造函數(shù)
var People = function(name, age) {
  this.name = name
  this.age = age
}

// 創(chuàng)建小明實(shí)例
var xiaoming = new People("xiaoming", 18)

// 定義一個(gè)考試函數(shù)
// 定義兩個(gè)回調(diào)函數(shù)，在適當(dāng)?shù)臅r(shí)候把參數(shù)傳進(jìn)去
var examStart = function(callbackSucc, callbackFail) {
  var result = prompt("1+5=")
  if(result === "6") {
    callbackSucc("Awesome. Your answer is " + result)
  }
  else {
    callbackFail("You can try again. Your answer is " + result)
  }
}

// 開始考試
// 傳入的兩個(gè)回調(diào)函數(shù)分別處理結(jié)果
examStart(function(res) {
  console.log(res)
}, function(res) {
  console.log(res)
})

當(dāng)你變量的值需要修改的時(shí)候，應(yīng)該使用塊級變量（let）。其他時(shí)候，使用靜態(tài)變量（const）。

無論是靜態(tài)變量（const）還是塊級變量（let），都不能重復(fù)定義，否則會(huì)報(bào)錯(cuò)。

靜態(tài)變量（const）一旦定義，數(shù)據(jù)類型不可更改。但是引用類型，如Array，Object，都可以用相應(yīng)的原型方法對數(shù)據(jù)的內(nèi)部進(jìn)行操作。

我們這里定義的變量都不需要修改，所以直接全部改為const。在項(xiàng)目中，判斷是改為const還是let有一個(gè)技巧，可以使用編輯器的變量復(fù)選功能（如，sublime中是雙擊變量名之后ctrl+d）。然后判斷代碼中是否對這個(gè)變量進(jìn)行過賦值，以及根據(jù)自己的判斷是否需要對這個(gè)變量進(jìn)行修改，不需要?jiǎng)t用const。

// 修改一  var ==> const
const Student1 = function(name, age) {
  this.name = name
  this.age = age
}

// 修改二  var ==> const
const xiaoming1 = new Student1("xiaoming", 18)

// 修改三  var ==> const
const examStart1 = function(callbackSucc, callbackFail) {
  // 修改四  var ==> const
  const result = prompt("1+5=")
  if(result === "6") {
    callbackSucc("Awesome. Your answer is " + result)
  }
  else {
    callbackFail("You can try again. Your answer is " + result)
  }
}

examStart1(function(res) {
  console.log(res)
}, function(res) {
  console.log(res)
})

const author = "bw2"
const author = "bw3"  // Uncaught SyntaxError: Identifier "author" has already been declared
let author = "bw4"  // Uncaught SyntaxError: Identifier "author" has already been declared

// let定義的變量存在塊級作用域
if(true) {
  let test1 = 2333
}
console.log(test1)  // Uncaught ReferenceError: t is not defined


// var定義的變量不存在，會(huì)直接成為全局變量
if(true) {
  var test2 = 2333
}
console.log(test2)  // 2333

開始例子之前，先回顧以下基礎(chǔ)數(shù)據(jù)類型。Number、String、Boolean、null、undefined、Symbol。其中Symbol是ES6新加的。除基礎(chǔ)數(shù)據(jù)類型外，皆為引用類型。常見的引用類型是Array，Object。

// const定義的變量值是基礎(chǔ)數(shù)據(jù)類型時(shí)，不能修改值，也不能修改類型
const num = 2333
num = 2334  // Uncaught TypeError: Assignment to constant variable.
num = ""  // Uncaught TypeError: Assignment to constant variable.

// const定義的變量值是引用類型時(shí)，可以修改值
const obj = {}
obj.test = 2333
console.log(obj.test)  // 2333

const arr = []
arr.push(1)
console.log(arr)  // [1]

從應(yīng)用的角度上來講，Promise的主要作用是可以把回調(diào)函數(shù)，改為鏈?zhǔn)秸{(diào)用的模式。

當(dāng)存在多個(gè)嵌套的回調(diào)函數(shù)時(shí)，代碼的縮進(jìn)層級將會(huì)非常多，不利于閱讀。這時(shí)Promise就登場了。

如果只有一個(gè)回調(diào)函數(shù)，不涉及到錯(cuò)誤處理，則不建議修改為Promise的形式。

回調(diào)函數(shù)是指，定義一個(gè)函數(shù)，傳入的參數(shù)是一個(gè)函數(shù)。然后在函數(shù)中特定的位置，執(zhí)行這個(gè)傳入的函數(shù)，并將需要用到的數(shù)據(jù)，作為參數(shù)傳入?；卣{(diào)函數(shù)常見于異步編程。比如發(fā)送Ajax請求和NodeJS中的異步文件操作。百聞不如一見，我們看個(gè)最簡單的例子吧。

// 定義一個(gè)支持傳入回調(diào)函數(shù)的函數(shù)
function fun1(callback) {
  // 執(zhí)行傳入的函數(shù)，并將值2333作為參數(shù)傳入
  callback(2333)
}

// 執(zhí)行定義的函數(shù)
fun1(function(res){
  // 輸出傳入的參數(shù)
  console.log(res)
})

這里只是為了舉個(gè)例子，不涉及錯(cuò)誤處理的時(shí)候，不建議修改為Promise。

function fun2() {
  // 在函數(shù)中返回一個(gè)Promise對象
  // resolve和reject都是函數(shù)
  return new Promise(function(resolve, reject){
    // resolve函數(shù)中的參數(shù)將會(huì)出現(xiàn)在.then方法中
    // reject函數(shù)中的參數(shù)將會(huì)出現(xiàn)在.ctch方法中
    resolve(2333)
  })
}

fun2().then(function(res){
  console.log(res)  // 2333
})

Promise是通過resolve和reject來分別把正確結(jié)果，和錯(cuò)誤提示放在鏈?zhǔn)秸{(diào)用的.then和.catch方法里。

const examStart2 = function() {
  // 返回一個(gè)Promise對象
  return new Promise(function(resolve, reject) {
    var result = prompt("1+5=")
    if(result === "6") {
      resolve("Awesome. Your answer is " + result)
    }
    else {
      reject("You can try again. Your answer is " + result)
    }
  })
}
examStart2()
.then(function(res) {
  console.log(res)
})
.catch(function(err) {
  console.log(err)
})

箭頭函數(shù)是一個(gè)用來幫我們簡化函數(shù)結(jié)構(gòu)的一個(gè)小工具。

// 普通函數(shù)形式
const add1 = function(a, b) {
   return a + b
}
add1(1, 2)  // 3

// 箭頭函數(shù)形式
const add2 = (a, b) => a + b
add2(1, 2)  // 3

// 箭頭函數(shù)沒有獨(dú)立的this作用域
const obj1 = {
  name: "bw2",
  showName: () => {
    return this.name
  }
}
obj1.showName()  // ""

// 解決方案：改為function模式
const obj2 = {
  name: "bw2",
  showName: function() {
    return this.name
  }
}
obj2.showName()  // "bw2"

var examStart3 = function() {
  // 修改一
  return new Promise((resolve, reject) => {
    var result = prompt("1+5=")
    if(result === "6") {
      resolve("Awesome. Your answer is " + result)
    }
    else {
      reject("You can try again. Your answer is " + result)
    }
  })
}
// 修改二
examStart3().then((res) => console.log(res)).catch((err) => console.log(err))

const xh1 = "xiaohong"
console.log("I"m " + xh1 + ".")  // I"m xiaohong.

字符串模板使用的不再是單引號(hào)了，是在英文輸入狀態(tài)下的`鍵（ESC下面那個(gè)）。

const xh2 = "xiaohong"
console.log(`I"m ${xh2}.`)  // I"m xiaohong.

var examStart4 = function() {
  return new Promise((resolve, reject) => {
    var result = prompt("1+5=")
    if(result === "6") {
      // 修改一
      resolve(`Awesome. Your answer is ${result}`)
    }
    else {
      // 修改二
      reject(`You can try again. Your answer is ${result}`)
    }
  })
}
examStart4().then((res) => console.log(res)).catch((err) => console.log(err))

對象解構(gòu)常用在NodeJS導(dǎo)入包內(nèi)的某個(gè)模塊時(shí)。對于自己寫的對象，如果需要進(jìn)行解構(gòu)，則要確保對象內(nèi)的命名被解構(gòu)出來不會(huì)造成沖突。這里是為了舉例子方便，沒有使用很獨(dú)特的命名。

const People2 = function(name, age) {
  this.name = name
  this.age = age
}
const xiaoming2 = new People2("xiaoming2", 18)

// 開始結(jié)構(gòu)
const {name, age} = xiaoming2
// 現(xiàn)在可以獨(dú)立訪問了
console.log(name)  // xiaoming2
console.log(age)  // 18

類是一個(gè)語法糖，但是這并不妨礙我們?nèi)ナ秤盟?/p>

在React中，模板的定義，通常是類，生命周期方法也是寫在類中。

class People3 {
  constructor(name, age){
    this.name = name
    this.age = age
  }
  showName() {
    return this.name
  }
}

const xiaoming3 = new People3("xiaoming3", 18)
console.log(xiaoming3)  // People {name: "xiaoming3", age: 18}
console.log(xiaoming3.showName())  // xiaoming3

不過癮？文章已經(jīng)結(jié)束了。但是關(guān)于ES6的探索，還會(huì)繼續(xù)保存更新。

來關(guān)注一下前端進(jìn)階指南微信公眾號(hào)吧：

另外我也創(chuàng)了一個(gè)對應(yīng)的QQ群：660112451，歡迎一起交流。

注：以上ES6語法為作者日常使用較為頻繁的語法，未將所有ES6語法囊括在內(nèi)。感謝你的閱讀。