目錄
* 核心例子* 修改成靜態(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是個(gè)坑） * 開始修改* 修改拼接字符串成模板字符串 * 預(yù)備知識（字符串的拼接方式） * 預(yù)備知識（改為模板字符串的方式） * 開始修改* 修改成解構(gòu)的對象* 修改成Class
核心例子
文中的例子，請?jiān)谧钚碌腃hrome中測試。關(guān)于配置ES6轉(zhuǎn)ES5的環(huán)境，不在本文探討的范疇。
// 定義一個(gè)學(xué)生構(gòu)造函數(shù)var People = function(name, age) { this.name = name this.age = age}// 創(chuàng)建小明實(shí)例var xiaoming = new People('xiaoming', 18)// 定義一個(gè)考試函數(shù)// 定義兩個(gè)回調(diào)函數(shù)，在適當(dāng)?shù)臅r(shí)候把參數(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) }}// 開始考試// 傳入的兩個(gè)回調(diào)函數(shù)分別處理結(jié)果examStart(function(res) { console.log(res)}, function(res) { console.log(res)})修改成靜態(tài)變量（const）或塊級變量（let）
當(dāng)你變量的值需要修改的時(shí)候，應(yīng)該使用塊級變量（let）。其他時(shí)候，使用靜態(tài)變量（const）。
無論是靜態(tài)變量（const）還是塊級變量（let），都不能重復(fù)定義，否則會報(bào)錯(cuò)。
靜態(tài)變量（const）一旦定義，數(shù)據(jù)類型不可更改。但是引用類型，如Array，Object，都可以用相應(yīng)的原型方法對數(shù)據(jù)的內(nèi)部進(jìn)行操作。
開始修改
我們這里定義的變量都不需要修改，所以直接全部改為const。在項(xiàng)目中，判斷是改為const還是let有一個(gè)技巧，可以使用編輯器的變量復(fù)選功能（如，sublime中是雙擊變量名之后ctrl+d）。然后判斷代碼中是否對這個(gè)變量進(jìn)行過賦值，以及根據(jù)自己的判斷是否需要對這個(gè)變量進(jìn)行修改，不需要?jiǎng)t用const。
// 修改一 var ==> constconst Student1 = function(name, age) { this.name = name this.age = age}// 修改二 var ==> constconst xiaoming1 = new Student1('xiaoming', 18)// 修改三 var ==> constconst 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 declaredlet 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ù)類型時(shí)，不能修改值，也不能修改類型const num = 2333num = 2334 // Uncaught TypeError: Assignment to constant variable.num = '' // Uncaught TypeError: Assignment to constant variable.// const定義的變量值是引用類型時(shí)，可以修改值const obj = {}obj.test = 2333console.log(obj.test) // 2333const arr = []arr.push(1)console.log(arr) // [1]修改成Promise的形式
從應(yīng)用的角度上來講，Promise的主要作用是可以把回調(diào)函數(shù)，改為鏈?zhǔn)秸{(diào)用的模式。
當(dāng)存在多個(gè)嵌套的回調(diào)函數(shù)時(shí)，代碼的縮進(jìn)層級將會非常多，不利于閱讀。這時(shí)Promise就登場了。
如果只有一個(gè)回調(diào)函數(shù)，不涉及到錯(cuò)誤處理，則不建議修改為Promise的形式。
預(yù)備知識（回調(diào)函數(shù)是什么）
回調(diào)函數(shù)是指，定義一個(gè)函數(shù)，傳入的參數(shù)是一個(gè)函數(shù)。然后在函數(shù)中特定的位置，執(zhí)行這個(gè)傳入的函數(shù)，并將需要用到的數(shù)據(jù)，作為參數(shù)傳入。回調(diào)函數(shù)常見于異步編程。比如發(fā)送Ajax請求和NodeJS中的異步文件操作。百聞不如一見，我們看個(gè)最簡單的例子吧。
// 定義一個(gè)支持傳入回調(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）
這里只是為了舉個(gè)例子，不涉及錯(cuò)誤處理的時(shí)候，不建議修改為Promise。
function fun2() { // 在函數(shù)中返回一個(gè)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é)果，和錯(cuò)誤提示放在鏈?zhǔn)秸{(diào)用的.then和.catch方法里。
const examStart2 = function() { // 返回一個(gè)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ù)是一個(gè)用來幫我們簡化函數(shù)結(jié)構(gòu)的一個(gè)小工具。
// 普通函數(shù)形式const add1 = function(a, b) { return a + b}add1(1, 2) // 3// 箭頭函數(shù)形式const add2 = (a, b) => a + badd2(1, 2) // 3預(yù)備知識（箭頭函數(shù)函數(shù)中的this是個(gè)坑）
// 箭頭函數(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 xh1 = 'xiaohong'console.log('I/'m ' + xh1 + '.') // I'm xiaohong.預(yù)備知識（改為模板字符串的方式）
字符串模板使用的不再是單引號了，是在英文輸入狀態(tài)下的`鍵（ESC下面那個(gè)）。
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))修改成解構(gòu)的對象
對象解構(gòu)常用在NodeJS導(dǎo)入包內(nèi)的某個(gè)模塊時(shí)。對于自己寫的對象，如果需要進(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) // xiaoming2console.log(age) // 18修改成Class
類是一個(gè)語法糖，但是這并不妨礙我們?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不過癮？文章已經(jīng)結(jié)束了。但是關(guān)于ES6的探索，還會繼續(xù)保存更新。
以上這篇把JavaScript代碼改成ES6語法不完全指南(分享)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持VeVb武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
