這篇文章給大家分享的是有關(guān)如何將JavaScript代碼改成ES6語法的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
目前創(chuàng)新互聯(lián)公司已為上千的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬空間、網(wǎng)站托管、服務(wù)器租用、企業(yè)網(wǎng)站設(shè)計(jì)、宜良網(wǎng)站維護(hù)等服務(wù),公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略,正道將秉承"和諧、參與、激情"的文化,與客戶和合作伙伴齊心協(xié)力一起成長,共同發(fā)展。
目錄
* 核心例子 * 修改成靜態(tài)變量(const)或塊級變量(let) * 開始修改 * 疑問解釋(重復(fù)定義會發(fā)生什么) * 疑問解釋(let的塊級作用域是怎樣的) * 疑問解釋(const定義的變量在基礎(chǔ)數(shù)據(jù)類型和引用類型中的差異) * 修改成Promise的形式 * 預(yù)備知識(回調(diào)函數(shù)是什么) * 預(yù)備知識(如何把回調(diào)函數(shù)改為Promise) * 開始修改 * 修改成箭頭函數(shù)(Arrow Function) * 預(yù)備知識(箭頭函數(shù)是什么) * 預(yù)備知識(箭頭函數(shù)函數(shù)中的this是個坑) * 開始修改 * 修改拼接字符串成模板字符串 * 預(yù)備知識(字符串的拼接方式) * 預(yù)備知識(改為模板字符串的方式) * 開始修改 * 修改成解構(gòu)的對象 * 修改成Class
核心例子
文中的例子,請?jiān)谧钚碌腃hrome中測試。關(guān)于配置ES6轉(zhuǎn)ES5的環(huán)境,不在本文探討的范疇。
// 定義一個學(xué)生構(gòu)造函數(shù) var People = function(name, age) { this.name = name this.age = age } // 創(chuàng)建小明實(shí)例 var xiaoming = new People('xiaoming', 18) // 定義一個考試函數(shù) // 定義兩個回調(diào)函數(shù),在適當(dāng)?shù)臅r候把參數(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) } } // 開始考試 // 傳入的兩個回調(diào)函數(shù)分別處理結(jié)果 examStart(function(res) { console.log(res) }, function(res) { console.log(res) })
修改成靜態(tài)變量(const)或塊級變量(let)
當(dāng)你變量的值需要修改的時候,應(yīng)該使用塊級變量(let)。其他時候,使用靜態(tài)變量(const)。
無論是靜態(tài)變量(const)還是塊級變量(let),都不能重復(fù)定義,否則會報錯。
靜態(tài)變量(const)一旦定義,數(shù)據(jù)類型不可更改。但是引用類型,如Array,Object,都可以用相應(yīng)的原型方法對數(shù)據(jù)的內(nèi)部進(jìn)行操作。
開始修改
我們這里定義的變量都不需要修改,所以直接全部改為const。在項(xiàng)目中,判斷是改為const還是let有一個技巧,可以使用編輯器的變量復(fù)選功能(如,sublime中是雙擊變量名之后ctrl+d)。然后判斷代碼中是否對這個變量進(jìn)行過賦值,以及根據(jù)自己的判斷是否需要對這個變量進(jìn)行修改,不需要則用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) })
疑問解釋(重復(fù)定義會發(fā)生什么)
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定義的變量在基礎(chǔ)數(shù)據(jù)類型和引用類型中的差異)
開始例子之前,先回顧以下基礎(chǔ)數(shù)據(jù)類型。Number、String、Boolean、null、undefined、Symbol。其中Symbol是ES6新加的。除基礎(chǔ)數(shù)據(jù)類型外,皆為引用類型。常見的引用類型是Array,Object。
// const定義的變量值是基礎(chǔ)數(shù)據(jù)類型時,不能修改值,也不能修改類型 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的形式
從應(yīng)用的角度上來講,Promise的主要作用是可以把回調(diào)函數(shù),改為鏈?zhǔn)秸{(diào)用的模式。
當(dāng)存在多個嵌套的回調(diào)函數(shù)時,代碼的縮進(jìn)層級將會非常多,不利于閱讀。這時Promise就登場了。
如果只有一個回調(diào)函數(shù),不涉及到錯誤處理,則不建議修改為Promise的形式。
預(yù)備知識(回調(diào)函數(shù)是什么)
回調(diào)函數(shù)是指,定義一個函數(shù),傳入的參數(shù)是一個函數(shù)。然后在函數(shù)中特定的位置,執(zhí)行這個傳入的函數(shù),并將需要用到的數(shù)據(jù),作為參數(shù)傳入。回調(diào)函數(shù)常見于異步編程。比如發(fā)送Ajax請求和NodeJS中的異步文件操作。百聞不如一見,我們看個最簡單的例子吧。
// 定義一個支持傳入回調(diào)函數(shù)的函數(shù) function fun1(callback) { // 執(zhí)行傳入的函數(shù),并將值2333作為參數(shù)傳入 callback(2333) } // 執(zhí)行定義的函數(shù) fun1(function(res){ // 輸出傳入的參數(shù) console.log(res) })
預(yù)備知識(如何把回調(diào)函數(shù)改為Promise)
這里只是為了舉個例子,不涉及錯誤處理的時候,不建議修改為Promise。
function fun2() { // 在函數(shù)中返回一個Promise對象 // resolve和reject都是函數(shù) return new Promise(function(resolve, reject){ // resolve函數(shù)中的參數(shù)將會出現(xiàn)在.then方法中 // reject函數(shù)中的參數(shù)將會出現(xiàn)在.ctch方法中 resolve(2333) }) } fun2().then(function(res){ console.log(res) // 2333 })
開始修改
Promise是通過resolve和reject來分別把正確結(jié)果,和錯誤提示放在鏈?zhǔn)秸{(diào)用的.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) })
修改成箭頭函數(shù)(Arrow Function)
預(yù)備知識(箭頭函數(shù)是什么)
箭頭函數(shù)是一個用來幫我們簡化函數(shù)結(jié)構(gòu)的一個小工具。
// 普通函數(shù)形式 const add1 = function(a, b) { return a + b } add1(1, 2) // 3 // 箭頭函數(shù)形式 const add2 = (a, b) => a + b add2(1, 2) // 3
預(yù)備知識(箭頭函數(shù)函數(shù)中的this是個坑)
// 箭頭函數(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))
修改拼接字符串成模板字符串
預(yù)備知識(字符串的拼接方式)
const xh2 = 'xiaohong' console.log('I\'m ' + xh2 + '.') // I'm xiaohong.
預(yù)備知識(改為模板字符串的方式)
字符串模板使用的不再是單引號了,是在英文輸入狀態(tài)下的`鍵(ESC下面那個)。
const xh3 = 'xiaohong' console.log(`I'm ${xh3}.`) // 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)的對象
對象解構(gòu)常用在NodeJS導(dǎo)入包內(nèi)的某個模塊時。對于自己寫的對象,如果需要進(jìn)行解構(gòu),則要確保對象內(nèi)的命名被解構(gòu)出來不會造成沖突。這里是為了舉例子方便,沒有使用很獨(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
修改成Class
類是一個語法糖,但是這并不妨礙我們?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
感謝各位的閱讀!關(guān)于“如何將JavaScript代碼改成ES6語法”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
網(wǎng)頁標(biāo)題:如何將JavaScript代碼改成ES6語法
網(wǎng)站地址:http://muchs.cn/article2/ighcic.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站設(shè)計(jì)、用戶體驗(yàn)、企業(yè)網(wǎng)站制作、網(wǎng)站建設(shè)、網(wǎng)站收錄、網(wǎng)站制作
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)