国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

把JavaScript代碼改成ES6語法不完全指南

ninefive / 2728人閱讀

摘要:無論是靜態變量還是塊級變量,都不能重復定義,否則會報錯。當存在多個嵌套的回調函數時,代碼的縮進層級將會非常多,不利于閱讀。如果只有一個回調函數,不涉及到錯誤處理,則不建議修改為的形式。回調函數常見于異步編程。

目錄
* 核心例子
* 修改成靜態變量(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的探索,還會繼續保存更新。

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

另外我也創了一個對應的QQ群:660112451,歡迎一起交流。

注:以上ES6語法為作者日常使用較為頻繁的語法,未將所有ES6語法囊括在內。感謝你的閱讀。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/88469.html

相關文章

  • 前端練級攻略(第二部分)

    摘要:是文檔的一種表示結構。這些任務大部分都是基于它。這個實踐的重點是把你在前端練級攻略第部分中學到的一些東西和結合起來。一旦你進入框架部分,你將更好地理解并使用它們。到目前為止,你一直在使用進行操作。它是在前端系統像今天這樣復雜之前編寫的。 本文是 前端練級攻略 第二部分,第一部分請看下面: 前端練級攻略(第一部分) 在第二部分,我們將重點學習 JavaScript 作為一種獨立的語言,如...

    BWrong 評論0 收藏0
  • [譯]JavaScript ES6箭頭函數指南

    摘要:以下例子的目的是使用來展示一個每秒都會更新的時鐘當嘗試在的回調中使用來引用元素時,很不幸,我們得到的只是一個屬于回調函數自身上下文的。 前言 胖箭頭函數(Fat arrow functions),又稱箭頭函數,是一個來自ECMAScript 2015(又稱ES6)的全新特性。有傳聞說,箭頭函數的語法=>,是受到了CoffeeScript 的影響,并且它與CoffeeScript中的=>...

    makeFoxPlay 評論0 收藏0
  • [譯]JavaScript ES6 class指南

    摘要:前言又稱通過一些新的關鍵字,使類成為了中一個新的一等公民。類聲明在中,有兩個聲明類的方式。在使用了新的關鍵字后在底層,所做的,也只是將這個方法添加為構造函數的一個屬性。在想要調用父類的構造函數時,你可以簡單地將關鍵字視作一個函數使用,如。 前言 EcmaScript 2015 (又稱ES6)通過一些新的關鍵字,使類成為了JS中一個新的一等公民。但是目前為止,這些關于類的新關鍵字僅僅是建...

    CoderDock 評論0 收藏0
  • 前端資源系列(4)-前端學習資源分享&前端面試資源匯總

    摘要:特意對前端學習資源做一個匯總,方便自己學習查閱參考,和好友們共同進步。 特意對前端學習資源做一個匯總,方便自己學習查閱參考,和好友們共同進步。 本以為自己收藏的站點多,可以很快搞定,沒想到一入匯總深似海。還有很多不足&遺漏的地方,歡迎補充。有錯誤的地方,還請斧正... 托管: welcome to git,歡迎交流,感謝star 有好友反應和斧正,會及時更新,平時業務工作時也會不定期更...

    princekin 評論0 收藏0
  • 【譯】前端練級攻略

    摘要:由于系統變得越來越復雜,人們提出了稱為預處理器和后處理器的工具來管理復雜性。后處理器在由預處理器手寫或編譯后對應用更改。我之前建議的文章,,也涵蓋了預處理器相關的知識。 譯者:前端小智 原文:medium.freecodecamp.org/from-zero-t… medium.freecodecamp.org/from-zero-t… 我記得我剛開始學習前端開發的時候。我看到了很多文章及...

    wuyumin 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<