国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

教你如何將JavaScript代碼改成ES6語法方法指導

來源:懂視網(wǎng) 責編:小OO 時間:2020-11-27 20:13:26
文檔

教你如何將JavaScript代碼改成ES6語法方法指導

目錄;* 核心例子* 修改成靜態(tài)變量(const)或塊級變量(let) * 開始修改 * 疑問解釋(重復定義會發(fā)生什么) * 疑問解釋(let的塊級作用域是怎樣的) * 疑問解釋(const定義的變量在基礎數(shù)據(jù)類型和引用類型中的差異)* 修改成Promise的形式 * 預備知識(回調函數(shù)是什么) * 預備知識(如何把回調函數(shù)改為Promise) * 開始修改* 修改成箭頭函數(shù)(Arrow Function) * 預備知識(箭頭函數(shù)是什么) * 預備知識(箭頭函數(shù)函數(shù)中的this是個坑) * 開始修改* 修改拼接字符串成模板字符串 * 預備知識(字符串的拼接方式) * 預備知識(改為模板字符串的方式) * 開始修改* 修改成解構的對象* 修改成Class。核心例子;
推薦度:
導讀目錄;* 核心例子* 修改成靜態(tài)變量(const)或塊級變量(let) * 開始修改 * 疑問解釋(重復定義會發(fā)生什么) * 疑問解釋(let的塊級作用域是怎樣的) * 疑問解釋(const定義的變量在基礎數(shù)據(jù)類型和引用類型中的差異)* 修改成Promise的形式 * 預備知識(回調函數(shù)是什么) * 預備知識(如何把回調函數(shù)改為Promise) * 開始修改* 修改成箭頭函數(shù)(Arrow Function) * 預備知識(箭頭函數(shù)是什么) * 預備知識(箭頭函數(shù)函數(shù)中的this是個坑) * 開始修改* 修改拼接字符串成模板字符串 * 預備知識(字符串的拼接方式) * 預備知識(改為模板字符串的方式) * 開始修改* 修改成解構的對象* 修改成Class。核心例子;

下面小編就為大家?guī)硪黄袹avaScript代碼改成ES6語法不完全指南(分享)。小編覺得挺不錯的,現(xiàn)在就想給大家,也給大家做個參考。一起跟隨小編過來看看吧

目錄

* 核心例子
* 修改成靜態(tài)變量(const)或塊級變量(let)
 * 開始修改
 * 疑問解釋(重復定義會發(fā)生什么)
 * 疑問解釋(let的塊級作用域是怎樣的)
 * 疑問解釋(const定義的變量在基礎數(shù)據(jù)類型和引用類型中的差異)
* 修改成Promise的形式
 * 預備知識(回調函數(shù)是什么)
 * 預備知識(如何把回調函數(shù)改為Promise)
 * 開始修改
* 修改成箭頭函數(shù)(Arrow Function)
 * 預備知識(箭頭函數(shù)是什么)
 * 預備知識(箭頭函數(shù)函數(shù)中的this是個坑)
 * 開始修改
* 修改拼接字符串成模板字符串
 * 預備知識(字符串的拼接方式)
 * 預備知識(改為模板字符串的方式)
 * 開始修改
* 修改成解構的對象
* 修改成Class

核心例子

文中的例子,請在最新的Chrome中測試。關于配置ES6轉ES5的環(huán)境,不在本文探討的范疇。

// 定義一個學生構造函數(shù)
var People = function(name, age) {
 this.name = name
 this.age = age
}

// 創(chuàng)建小明實例
var xiaoming = new People('xiaoming', 18)

// 定義一個考試函數(shù)
// 定義兩個回調函數(shù),在適當?shù)臅r候把參數(shù)傳進去
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)
 }
}

// 開始考試
// 傳入的兩個回調函數(shù)分別處理結果
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)一旦定義,數(shù)據(jù)類型不可更改。但是引用類型,如Array,Object,都可以用相應的原型方法對數(shù)據(jù)的內部進行操作。

開始修改

我們這里定義的變量都不需要修改,所以直接全部改為const。在項目中,判斷是改為const還是let有一個技巧,可以使用編輯器的變量復選功能(如,sublime中是雙擊變量名之后ctrl+d)。然后判斷代碼中是否對這個變量進行過賦值,以及根據(jù)自己的判斷是否需要對這個變量進行修改,不需要則用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定義的變量在基礎數(shù)據(jù)類型和引用類型中的差異)

開始例子之前,先回顧以下基礎數(shù)據(jù)類型。Number、String、Boolean、null、undefined、Symbol。其中Symbol是ES6新加的。除基礎數(shù)據(jù)類型外,皆為引用類型。常見的引用類型是Array,Object。

// const定義的變量值是基礎數(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的形式

從應用的角度上來講,Promise的主要作用是可以把回調函數(shù),改為鏈式調用的模式。

當存在多個嵌套的回調函數(shù)時,代碼的縮進層級將會非常多,不利于閱讀。這時Promise就登場了。

如果只有一個回調函數(shù),不涉及到錯誤處理,則不建議修改為Promise的形式。

預備知識(回調函數(shù)是什么)

回調函數(shù)是指,定義一個函數(shù),傳入的參數(shù)是一個函數(shù)。然后在函數(shù)中特定的位置,執(zhí)行這個傳入的函數(shù),并將需要用到的數(shù)據(jù),作為參數(shù)傳入。回調函數(shù)常見于異步編程。比如發(fā)送Ajax請求和NodeJS中的異步文件操作。百聞不如一見,我們看個最簡單的例子吧。

// 定義一個支持傳入回調函數(shù)的函數(shù)
function fun1(callback) {
 // 執(zhí)行傳入的函數(shù),并將值2333作為參數(shù)傳入
 callback(2333)
}

// 執(zhí)行定義的函數(shù)
fun1(function(res){
 // 
輸出傳入的參數(shù) console.log(res) })

預備知識(如何把回調函數(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來分別把正確結果,和錯誤提示放在鏈式調用的.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)

預備知識(箭頭函數(shù)是什么)

箭頭函數(shù)是一個用來幫我們簡化函數(shù)結構的一個小工具。

// 普通函數(shù)形式
const add1 = function(a, b) {
 return a + b
}
add1(1, 2) // 3

// 箭頭函數(shù)形式
const add2 = (a, b) => a + b
add2(1, 2) // 3

預備知識(箭頭函數(shù)函數(shù)中的this是個坑)

// 箭頭函數(shù)沒有獨立的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
// 現(xiàn)在可以獨立訪問了
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

不過癮?文章已經(jīng)結束了。但是關于ES6的探索,還會繼續(xù)保存更新。

聲明:本網(wǎng)頁內容旨在傳播知識,若有侵權等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

教你如何將JavaScript代碼改成ES6語法方法指導

目錄;* 核心例子* 修改成靜態(tài)變量(const)或塊級變量(let) * 開始修改 * 疑問解釋(重復定義會發(fā)生什么) * 疑問解釋(let的塊級作用域是怎樣的) * 疑問解釋(const定義的變量在基礎數(shù)據(jù)類型和引用類型中的差異)* 修改成Promise的形式 * 預備知識(回調函數(shù)是什么) * 預備知識(如何把回調函數(shù)改為Promise) * 開始修改* 修改成箭頭函數(shù)(Arrow Function) * 預備知識(箭頭函數(shù)是什么) * 預備知識(箭頭函數(shù)函數(shù)中的this是個坑) * 開始修改* 修改拼接字符串成模板字符串 * 預備知識(字符串的拼接方式) * 預備知識(改為模板字符串的方式) * 開始修改* 修改成解構的對象* 修改成Class。核心例子;
推薦度:
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 国产成人不卡亚洲精品91 | 国产原创91 | 黄a免费| 亚洲国语在线视频手机在线 | 欧美日韩中字 | 国产一区二区三区免费 | 久久国产精品久久精 | 国产亚洲美女精品久久久2020 | 伊人久久精品久久亚洲一区 | 国产成人久久 | 国产欧美日韩在线不卡第一页 | 国产亚洲一区二区三区不卡 | 亚洲一区日韩一区欧美一区a | 欧美精品久久久久久久久大尺度 | 午夜在线观看免费视频 | a毛片在线| 国内精品久久久久 | 日韩在线第二页 | 一区二区三区视频在线播放 | 国产成人久久一区二区三区 | 欧美精品久久久久久久久大尺度 | 国产一区二区三区欧美精品 | 日韩欧美网站 | 久久性色 | 国内精品一区二区三区αv 国产最新进精品视频 | 欧美性xxxxx 欧美视频亚洲视频 | 一级毛片一级毛片 | 国产一级插插插 | a一区二区三区视频 | 日韩在线免费视频 | 成人欧美一区二区三区黑人 | 成人国产一区 | 国产日韩亚洲欧美 | 久久网伊人| 日韩专区在线观看 | 欧美综合在线观看 | 欧美三级在线 | 日韩欧美国产另类 | 日本高清天码一区在线播放 | 国产成人综合久久精品尤物 | 久久精品成人一区二区三区 |