首頁 web前端 js教程 教你如何將JavaScript程式碼改成ES6語法方法指導

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

Sep 11, 2017 am 09:34 AM
javascript js 文法

下面小編就為大家帶來一篇把JavaScript程式碼改成ES6語法不完全指南(分享)。小編覺得蠻不錯的,現在就想給大家,也給大家做個參考。一起跟著小編過來看看吧

目錄


#
* 核心例子
* 修改成静态变量(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的探索,還會繼續保存更新。

以上是教你如何將JavaScript程式碼改成ES6語法方法指導的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1663
14
CakePHP 教程
1420
52
Laravel 教程
1313
25
PHP教程
1266
29
C# 教程
1239
24
建議:優秀JS開源人臉偵測辨識項目 建議:優秀JS開源人臉偵測辨識項目 Apr 03, 2024 am 11:55 AM

人臉偵測辨識技術已經是一個比較成熟且應用廣泛的技術。而目前最廣泛的網路應用語言非JS莫屬,在Web前端實現人臉偵測辨識相比後端的人臉辨識有優勢也有弱勢。優點包括減少網路互動、即時識別,大大縮短了使用者等待時間,提高了使用者體驗;弱勢是:受到模型大小限制,其中準確率也有限。如何在web端使用js實現人臉偵測呢?為了實現Web端人臉識別,需要熟悉相關的程式語言和技術,如JavaScript、HTML、CSS、WebRTC等。同時也需要掌握相關的電腦視覺和人工智慧技術。值得注意的是,由於Web端的計

PHP與JS開發技巧:掌握繪製股票蠟燭圖的方法 PHP與JS開發技巧:掌握繪製股票蠟燭圖的方法 Dec 18, 2023 pm 03:39 PM

隨著網路金融的快速發展,股票投資已經成為了越來越多人的選擇。而在股票交易中,蠟燭圖是常用的技術分析方法,它能夠顯示股票價格的變動趨勢,幫助投資人做出更精準的決策。本文將透過介紹PHP和JS的開發技巧,帶領讀者了解如何繪製股票蠟燭圖,並提供具體的程式碼範例。一、了解股票蠟燭圖在介紹如何繪製股票蠟燭圖之前,我們首先需要先了解什麼是蠟燭圖。蠟燭圖是由日本人

簡易JavaScript教學:取得HTTP狀態碼的方法 簡易JavaScript教學:取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教學:如何取得HTTP狀態碼,需要具體程式碼範例前言:在Web開發中,經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時,我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功,並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼,並提供一些實用的程式碼範例。使用XMLHttpRequest

js和vue的關係 js和vue的關係 Mar 11, 2024 pm 05:21 PM

js和vue的關係:1、JS作為Web開發基石;2、Vue.js作為前端框架的崛起;3、JS與Vue的互補關係;4、JS與Vue的實踐應用。

lambda 表達式的語法和結構有什麼特色? lambda 表達式的語法和結構有什麼特色? Apr 25, 2024 pm 01:12 PM

Lambda表達式是無名稱的匿名函數,其語法為:(parameter_list)->expression。它們具有匿名性、多樣性、柯里化和閉包等特徵。在實際應用中,Lambda表達式可用於簡潔地定義函數,如求和函數sum_lambda=lambdax,y:x+y,並透過map()函數應用於列表來進行求和操作。

如何在JavaScript中取得HTTP狀態碼的簡單方法 如何在JavaScript中取得HTTP狀態碼的簡單方法 Jan 05, 2024 pm 01:37 PM

JavaScript中的HTTP狀態碼取得方法簡介:在進行前端開發中,我們常常需要處理與後端介面的交互,而HTTP狀態碼就是其中非常重要的一部分。了解並取得HTTP狀態碼有助於我們更好地處理介面傳回的資料。本文將介紹使用JavaScript取得HTTP狀態碼的方法,並提供具體程式碼範例。一、什麼是HTTP狀態碼HTTP狀態碼是指當瀏覽器向伺服器發起請求時,服務

js刷新當前頁面的方法 js刷新當前頁面的方法 Jan 24, 2024 pm 03:58 PM

js刷新目前頁面的方法:1、location.reload();2、location.href;3、location.assign();4、window.location。詳細介紹:1、location.reload(),使用location.reload()方法可以重新載入目前頁面;2、location.href,可以透過設定location.href屬性來刷新目前頁面等等。

JS中__proto__與prototype的差別 JS中__proto__與prototype的差別 Feb 19, 2024 pm 01:38 PM

JS中__proto__和prototype是兩個與原型相關的屬性,它們在功能上稍有不同。本文將具體介紹並比較這兩者的區別,並提供相應的程式碼範例。首先,我們先來了解它們的意義和用途。 proto__proto__是物件的內建屬性,它用來指向該物件的原型。每個物件都有一個__proto__屬性,包括自訂物件、內建物件和函數物件。透過__proto__屬

See all articles