把JavaScript代碼改爲ES6語法不徹底指南

時間 2019-12-13

標籤 javascript 代碼改爲 es6 語法不徹底指南欄目 JavaScript 简体版

原文原文鏈接

* 核心例子
* 修改爲靜態變量（const）或塊級變量（let）
    * 開始修改
    * 疑問解釋（重複定義會發生什麼）
    * 疑問解釋（let的塊級做用域是怎樣的）
    * 疑問解釋（const定義的變量在基礎數據類型和引用類型中的差別）
* 修改爲Promise的形式
    * 預備知識（回調函數是什麼）
    * 預備知識（如何把回調函數改成Promise）
    * 開始修改
* 修改爲箭頭函數（Arrow Function）
    * 預備知識（箭頭函數是什麼）
    * 預備知識（箭頭函數函數中的this是個坑）
    * 開始修改
* 修改拼接字符串成模板字符串
    * 預備知識（字符串的拼接方式）
    * 預備知識（改成模板字符串的方式）
    * 開始修改
* 修改爲解構的對象
* 修改爲Class

核心例子

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

// 定義一個學生構造函數
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。java

// 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。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的探索，還會繼續保存更新。函數

來關注一下前端進階指南微信公衆號吧：