教你如何將JavaScript程式碼改成ES6語法方法指導

下面小編就為大家帶來一篇把JavaScript程式碼改成ES6語法不完全指南(分享)。小編覺得蠻不錯的，現在就想給大家，也給大家做個參考。一起跟著小編過來看看吧

目錄

#

* 核心例子
* 修改成静态变量（const）或块级变量（let）
 * 开始修改
 * 疑问解释（重复定义会发生什么）
 * 疑问解释（let的块级作用域是怎样的）
 * 疑问解释（const定义的变量在基础数据类型和引用类型中的差异）
* 修改成Promise的形式
 * 预备知识（回调函数是什么）
 * 预备知识（如何把回调函数改为Promise）
 * 开始修改
* 修改成箭头函数（Arrow Function）
 * 预备知识（箭头函数是什么）
 * 预备知识（箭头函数函数中的this是个坑）
 * 开始修改
* 修改拼接字符串成模板字符串
 * 预备知识（字符串的拼接方式）
 * 预备知识（改为模板字符串的方式）
 * 开始修改
* 修改成解构的对象
* 修改成Class

核心範例

#文中的例子，請在最新的Chrome中測試。關於配置ES6轉ES5的環境，不在本文探討的範疇。

// 定义一个学生构造函数
var People = function(name, age) {
 this.name = name
 this.age = age
}

// 创建小明实例
var xiaoming = new People('xiaoming', 18)

// 定义一个考试函数
// 定义两个回调函数，在适当的时候把参数传进去
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)
 }
}

// 开始考试
// 传入的两个回调函数分别处理结果
examStart(function(res) {
 console.log(res)
}, function(res) {
 console.log(res)
})

修改成靜態變數（const）或區塊層級變數（let）

當你變數的值需要修改的時候，應該使用區塊級變數（let）。其他時候，使用靜態變數（const）。

無論是靜態變數（const）或區塊級變數（let），都無法重複定義，否則會報錯。

靜態變數（const）一旦定義，資料型別不可更改。但是引用類型，如Array，Object，都可以用對應的原型方法對資料的內部進行操作。

開始修改

我們這裡定義的變數都不需要修改，所以直接全部改為const。在專案中，判斷是改為const還是let有一個技巧，可以使用編輯器的變數複選功能（如，sublime中是雙擊變數名稱之後ctrl+d）。然後判斷程式碼中是否對這個變數進行過賦值，以及根據自己的判斷是否需要對這個變數進行修改，不需要則用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的區塊級作用域是怎樣的）

// let定义的变量存在块级作用域
if(true) {
 let test1 = 2333
}
console.log(test1) // Uncaught ReferenceError: t is not defined


// var定义的变量不存在，会直接成为全局变量
if(true) {
 var test2 = 2333
}
console.log(test2) // 2333

疑問解釋（const定義的變數在基礎資料型別和引用型別中的差異）

開始範例之前，先回顧以下基礎資料類型。 Number、String、Boolean、null、undefined、Symbol。其中Symbol是ES6新加的。除基礎資料型別外，皆為引用型別。常見的參考類型是Array，Object。

// const定义的变量值是基础数据类型时，不能修改值，也不能修改类型
const num = 2333
num = 2334 // Uncaught TypeError: Assignment to constant variable.
num = '' // Uncaught TypeError: Assignment to constant variable.

// const定义的变量值是引用类型时，可以修改值
const obj = {}
obj.test = 2333
console.log(obj.test) // 2333

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

修改成Promise的形式

從應用的角度來講，Promise的主要作用是可以把回調函數，改為鍊式呼叫的模式。

當存在多個巢狀的回呼函數時，程式碼的縮排層級將會非常多，不利於閱讀。這時Promise就登場了。

如果只有一個回呼函數，不涉及錯誤處理，則不建議修改為Promise的形式。

預備知識（回呼函數是什麼）

回呼函數是指，定義一個函數，傳入的參數是一個函數。然後在函數中特定的位置，執行這個傳入的函數，並將需要用到的數據，作為參數傳入。回調函數常見於非同步程式設計。例如發送Ajax請求和NodeJS中的非同步檔案操作。百聞不如一見，我們來看個最簡單的例子吧。

// 定义一个支持传入回调函数的函数
function fun1(callback) {
 // 执行传入的函数，并将值2333作为参数传入
 callback(2333)
}

// 执行定义的函数
fun1(function(res){
 // 输出传入的参数
 console.log(res)
})

預備知識（如何把回呼函數改為Promise）

這裡只是為了舉個例子，不涉及錯誤處理的時候，不建議修改為Promise。

function fun2() {
 // 在函数中返回一个Promise对象
 // resolve和reject都是函数
 return new Promise(function(resolve, reject){
 // resolve函数中的参数将会出现在.then方法中
 // reject函数中的参数将会出现在.ctch方法中
 resolve(2333)
 })
}

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

開始修改

#Promise是透過resolve和reject來分別把正確結果，和錯誤提示放在鍊式調用的.then和.catch方法裡。

const examStart2 = function() {
 // 返回一个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)
})

修改成箭頭函數（Arrow Function）

預備知識（箭頭函數是什麼）

箭頭函數是一個用來幫我們簡化函數結構的一個小工具。

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

// 箭头函数形式
const add2 = (a, b) => a + b
add2(1, 2) // 3

預備知識（箭頭函數函數中的this是個坑）

// 箭头函数没有独立的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.

預備知識（改為模板字串的方式）

字串範本使用的不再是單引號了，是在英文輸入狀態下的`鍵（ESC下面那個）。

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))

修改成解構的物件

物件解構常用在NodeJS導入套件內的某個模組時。對於自己寫的對象，如果需要進行解構，則要確保對象內的命名被解構出來不會造成衝突。這裡是為了舉例子方便，沒有使用很獨特的命名。

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

// 开始结构
const {name, age} = xiaoming2
// 现在可以独立访问了
console.log(name) // xiaoming2
console.log(age) // 18

修改成Class

類別是語法糖，但這並不妨礙我們去食用他。

在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

不過癮？文章已經結束了。但是關於ES6的探索，還會繼續保存更新。

以上是教你如何將JavaScript程式碼改成ES6語法方法指導的詳細內容。更多資訊請關注PHP中文網其他相關文章！