您好,登錄后才能下訂單哦!
今天就跟大家聊聊有關(guān)JavaScript ES6的新特性,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
ES6, 全稱 ECMAScript 6.0 ,是 JavaScript 的下一個版本標準,2015.06 發(fā)版。ES6 主要是為了解決 ES5 的先天不足,比如 JavaScript 里并沒有類的概念,但是目前瀏覽器的 JavaScript 是 ES5 版本,大多數(shù)高版本的瀏覽器也支持 ES6,不過只實現(xiàn)了 ES6 的部分特性和功能。
JavaScript ES6 添加了一系列新的語言特性,其中一些特性比其它更具有開創(chuàng)性以及更廣的可用性。比如像 ES6 類 這樣的特性,雖然新奇,但其實僅僅是在 JavaScript 中創(chuàng)建類的已有方法之上的一種語法糖。而像生成器(generator)這樣的功能,雖然非常強大,但卻是為了針對性的任務(wù)所保留的。
從在過去的12個月里所從事的不同 JavaScript 相關(guān)項目中,我發(fā)現(xiàn)有 5 個 ES6 特性是不可或缺的,因為它們真正簡化了 JavaScript 普通任務(wù)的完成方式。
在 ES6 JavaScript 中,我最喜歡的新增特性之一并不是一個全新特性,而是一個我每次使用都能讓我微笑的新語法。我說的就是箭頭函數(shù),它提供了一種極致優(yōu)雅和簡潔的方式來定義匿名函數(shù)。
簡而言之,箭頭函數(shù)就是丟掉了關(guān)鍵字 function
,然后用一個箭頭 =>
來分離一個匿名函數(shù)的參數(shù)部分和函數(shù)體:
(x, y) => x * y;
這相當于:
function(x, y){ return x * y; }
或者:
(x, y) => { var factor = 5; var growth = (x-y) * factor; }
完全等價于:
function(x, y){ var factor = 5; var growth = (x-y) * factor; }
在使用傳統(tǒng)的匿名函數(shù)時,箭頭函數(shù)還消除了一個關(guān)鍵的錯誤源,即函數(shù)內(nèi)的 this
對象的值。使用箭頭函數(shù),this
是基于詞法綁定,這僅僅是意味著它的值被綁定到父級作用域的一種奇特的方式,并且永遠不會改變。如果一個箭頭函數(shù)定義在一個自定義對象 countup
中,this
值毫無疑問地指向 countup
。比如:
var countup = { counter: 15, start:function(){ window.addEventListener('click', () => { alert(this.counter) // correctly alerts 15 due to lexical binding of this }) } }; countup.start();
對比傳統(tǒng)匿名函數(shù),this
的值在哪變化取決于它被定義的上下文環(huán)境。當在上面的例子中嘗試引用 this.counter
,結(jié)果將返回 undefined
,這種行為可能會把很多不熟悉動態(tài)綁定的復(fù)雜性的人搞糊涂。使用箭頭函數(shù),this
的值總是可預(yù)測并且容易推斷的。
對于箭頭函數(shù)的詳細講解, 請看 “Overview of JavaScript Arrow Functions“.
最后,我最想提出的ES6的兩個特性是處理函數(shù)參數(shù)。幾乎我們在JavaScript中創(chuàng)建的每個函數(shù)都接受用戶數(shù)據(jù),所以這兩個特性在一個月中不止一次地派上用場。
我們都使用過一下模式來創(chuàng)建具有默認值的參數(shù):
function getarea(w,h){ var w = w || 10 var h = h || 15 return w * h }
有了ES6對默認參數(shù)的支持,顯式定義的參數(shù)值的日子已經(jīng)結(jié)束:
function getarea(w=10, h=15){ return w * h } getarea(5) // returns 75
關(guān)于 ES6 默認參數(shù)的更多詳情 在這.
ES6中的 Rest Parameters 使得將函數(shù)參數(shù)轉(zhuǎn)換成數(shù)組的操作變得簡單。
function addit(...theNumbers){ // get the sum of the array elements return theNumbers.reduce((prevnum, curnum) => prevnum + curnum, 0) } addit(1,2,3,4) // returns 10
通過在命名參數(shù)前添加3個點 ...
,在該位置和之后輸入到函數(shù)中的參數(shù)將自動轉(zhuǎn)換為數(shù)組。
沒有 Rest Parameters, 我們不得不做一些復(fù)雜的操作比如 手動將參數(shù)轉(zhuǎn)換為數(shù)組 :
function addit(theNumbers){ // force arguments object into array var numArray = Array.prototype.slice.call(arguments) return numArray.reduce((prevnum, curnum) => prevnum + curnum, 0) } addit(1,2,3,4) // returns 10
Rest parameters 只能應(yīng)用于函數(shù)的參數(shù)的一個子集,就像下面這樣,它只會將參數(shù)從第二個開始轉(zhuǎn)換為數(shù)組:
function f1(date, ...lucknumbers){ return 'The Lucky Numbers for ' + date + ' are: ' + lucknumbers.join(', ') } alert( f1('2017/09/29', 3, 32, 43, 52) ) // alerts "The Lucky Numbers for 2017/09/29 are 3,32,43,52"
3) JavaScript Promises
JavaScript ES6 Promises 使異步任務(wù)的處理方式變成線性, 這是大多數(shù)現(xiàn)代Web應(yīng)用程序中的一項任務(wù)。 而不是依靠回調(diào)函數(shù) —— 通過JavaScript框架(如jQuery)普及。JavaScript Promises 使用一個中心直觀的機制來跟蹤和響應(yīng)異步事件。它不僅使調(diào)試異步代碼變得更容易,而且使得編寫它也是一種樂趣。
所有 JavaScript Promise 都是通過 Promise()
構(gòu)造函數(shù)開始和結(jié)束:
const mypromise = new Promise(function(resolve, reject){ // 在這編寫異步代碼 // 調(diào)用 resolve() 來表示任務(wù)成功完成 // 調(diào)用 reject() 來表示任務(wù)失敗 })
在內(nèi)部使用 resolve()
和 reject()
方法,當一個 Promise 被完成或拒絕時,我們可以分別向一個 Promise 對象發(fā)出信號。 then()
與 catch()
方法隨后可以被調(diào)用,用以處理完成或拒絕 Promise 后的工作。
我用下面一個被注入 XMLHttpRequest 函數(shù)的 Promise 的變種,來一個接一個的檢索外部文件內(nèi)容:
function getasync(url) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest() xhr.open("GET", url) xhr.onload = () => resolve(xhr.responseText) xhr.onerror = () => reject(xhr.statusText) xhr.send() }) } getasync('test.txt').then((msg) => { console.log(msg) // echos contents of text.txt return getasync('test2.txt') }).then((msg) => { console.log(msg) // echos contents of text2.txt return getasync('test3.txt') }).then((msg) => { console.log(msg) // echos contents of text3.txt })
要掌握 JavaScript Promises 的關(guān)鍵點,例如 Promise 鏈和并行執(zhí)行 Promise,請閱讀 “Beginner’s Guide to Promises“.
除了 JavaScript Promise,異步函數(shù)進一步重寫了傳統(tǒng)的異步代碼結(jié)構(gòu),使其更具可讀性。每當我向客戶展示帶有async 編程功能的代碼時,第一個反應(yīng)總是令人驚訝,隨之而來的是了解它是如何工作的好奇心。
一個異步函數(shù)由兩部分構(gòu)成:
1) 一個以 async
為前綴的常規(guī)函數(shù)
async function fetchdata(url){ // Do something // Always returns a promise }
2) 在異步函數(shù)(Async function)內(nèi),使用 await
關(guān)鍵字調(diào)用異步操作函數(shù)
一個例子勝過千言萬語。下面是基于上面示例重寫的 Promise,以便使用 Async functions代替:
function getasync(url) { // same as original function return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest() xhr.open("GET", url) xhr.onload = () => resolve(xhr.responseText) xhr.onerror = () => reject(xhr.statusText) xhr.send() }) } async function fetchdata(){ // main Async function var text1 = await getasync('test.txt') console.log(text1) var text2 = await getasync('test2.txt') console.log(text2) var text3 = await getasync('test3.txt') console.log(text3) return "Finished" } fetchdata().then((msg) =>{ console.log(msg) // logs "finished" })
上面的例子運行時會輸出“test.txt”,“test2.txt”,“test3.txt”,最后是“Finished”。
如你所見,在異步函數(shù)中,我們把異步函數(shù) getasync()
當作是同步函數(shù)調(diào)用 – 沒有 then()
方法或回調(diào)函數(shù)通知進行下一步。無論何時遇到關(guān)鍵字 await
,執(zhí)行都會暫停,直到 getasync()
解決,然后再轉(zhuǎn)到異步函數(shù)中的下一行。結(jié)果與純粹的基于 Promise,使用一串 then
方法的方式一樣。
要掌握異步函數(shù),包括如何 await
并行執(zhí)行函數(shù),請閱讀 “Introduction to JavaScript Async Functions- Promises simplified”
除了箭頭函數(shù),這是我每天使用最多的 ES6 功能。ES6 解構(gòu)并非一個新功能,而是一個新的賦值語法,可以讓您快速解壓縮對象屬性和數(shù)組中的值,并將它們分配給各個變量。
var profile = {name:'George', age:39, hobby:'Tennis'} var {name, hobby} = profile // destructure profile object console.log(name) // "George" console.log(hobby) // "Tennis"
這里我用解構(gòu)快速提取 profile
對象的 name
和 hobby
屬性 。
使用別名,你可以使用與你正在提取值的對象屬性不同的變量名:
var profile = {name:'George', age:39, hobby:'Tennis'} var {name:n, hobby:h} = profile // destructure profile object console.log(n) // "George" console.log(h) // "Tennis"
解構(gòu)也可以與嵌套對象一起工作,我一直使用它來快速解開來自復(fù)雜的JSON請求的值:
var jsondata = { title: 'Top 5 JavaScript ES6 Features', Details: { date: { created: '2017/09/19', modified: '2017/09/20', }, Category: 'JavaScript', }, url: '/top-5-es6-features/' }; var {title, Details: {date: {created, modified}}} = jsondata console.log(title) // 'Top 5 JavaScript ES6 Features' console.log(created) // '2017/09/19' console.log(modified) // '2017/09/20'
數(shù)組的解構(gòu)與在對象上的工作方式類似,除了左邊的花括號使用方括號代替:
var soccerteam = ['George', 'Dennis', 'Sandy'] var [a, b] = soccerteam // destructure soccerteam array console.log(a) // "George" console.log(b) // "Dennis"
你可以跳過某些數(shù)組元素,通過使用逗號(,):
var soccerteam = ['George', 'Dennis', 'Sandy'] var [a,,b] = soccerteam // destructure soccerteam array console.log(a) // "George" console.log(b) // "Sandy"
對我而言,解構(gòu)消除了傳統(tǒng)方式提取和分配對象屬性和數(shù)組值的所有摩擦。要充分掌握ES6解構(gòu)的復(fù)雜性和潛力,請閱讀”Getting to Grips with ES6: Destructuring“.
看完上述內(nèi)容,你們對JavaScript ES6的新特性有進一步的了解嗎?如果還想了解更多相關(guān)內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。