把JavaScript代碼改成ES6語法不完全指南(分享)
目錄
* 核心例子 * 修改成靜態(tài)變量(const)或塊級變量(let) * 開始修改 * 疑問解釋(重復定義會發(fā)生什么) * 疑問解釋(let的塊級作用域是怎樣的) * 疑問解釋(const定義的變量在基礎數據類型和引用類型中的差異) * 修改成Promise的形式 * 預備知識(回調函數是什么) * 預備知識(如何把回調函數改為Promise) * 開始修改 * 修改成箭頭函數(Arrow Function) * 預備知識(箭頭函數是什么) * 預備知識(箭頭函數函數中的this是個坑) * 開始修改 * 修改拼接字符串成模板字符串 * 預備知識(字符串的拼接方式) * 預備知識(改為模板字符串的方式) * 開始修改 * 修改成解構的對象 * 修改成Class
核心例子
文中的例子,請在最新的Chrome中測試。關于配置ES6轉ES5的環(huán)境,不在本文探討的范疇。
// 定義一個學生構造函數
var People = function(name, age) {
this.name = name
this.age = age
}
// 創(chuàng)建小明實例
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)
})
修改成靜態(tài)變量(const)或塊級變量(let)
當你變量的值需要修改的時候,應該使用塊級變量(let)。其他時候,使用靜態(tài)變量(const)。
無論是靜態(tài)變量(const)還是塊級變量(let),都不能重復定義,否則會報錯。
靜態(tài)變量(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)
})
疑問解釋(重復定義會發(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定義的變量在基礎數據類型和引用類型中的差異)
開始例子之前,先回顧以下基礎數據類型。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的形式。
預備知識(回調函數是什么)
回調函數是指,定義一個函數,傳入的參數是一個函數。然后在函數中特定的位置,執(zhí)行這個傳入的函數,并將需要用到的數據,作為參數傳入。回調函數常見于異步編程。比如發(fā)送Ajax請求和NodeJS中的異步文件操作。百聞不如一見,我們看個最簡單的例子吧。
// 定義一個支持傳入回調函數的函數
function fun1(callback) {
// 執(zhí)行傳入的函數,并將值2333作為參數傳入
callback(2333)
}
// 執(zhí)行定義的函數
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.
預備知識(改為模板字符串的方式)
字符串模板使用的不再是單引號了,是在英文輸入狀態(tài)下的`鍵(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的探索,還會繼續(xù)保存更新。
以上這篇把JavaScript代碼改成ES6語法不完全指南(分享)就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
工作中比較實用的JavaScript驗證和數據處理的干貨(經典)
工作中比較實用的JavaScript驗證和數據處理知識經常會用到,下面小編通過查閱相關資料及日常記錄的知識分享到腳本之家平臺,供大家參考2016-08-08
JavaScript實現的原生態(tài)兼容IE6可調可控滾動文字功能詳解
這篇文章主要介紹了JavaScript實現的原生態(tài)兼容IE6可調可控滾動文字功能,簡單說明了文字滾動的實現原理并結合具體實例形式給出了javascript文字滾動功能的具體實現代碼,需要的朋友可以參考下2017-09-09
分享JavaScript監(jiān)聽全部Ajax請求事件的方法
最近在做一個小項目,引入了第三方js文件,這個文件會調用XMLHttpRequest向服務器發(fā)送 Ajax請求,但是我有需要監(jiān)聽其Ajax請求的某些事件,以便額外地執(zhí)行其他腳本。于是稍微看了看監(jiān)聽 Ajax請求的事件方法,在這里分享給大家。有需要的朋友們可以參考借鑒。2016-08-08
利用javascript實現禁用網頁上所有文本框,下拉菜單,多行文本域
這篇文章主要介紹了利用javascript實現禁用網頁上所有文本框,下拉菜單,多行文本域。需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12

