ES6是ECMA腳本編程語言的版本6。ECMA腳本是JavaScript的標準化名稱,版本6是繼2011年發佈的版本5之後的下一個版本。它是JavaScript語言的一個主要增強,並添加了更多的功能,以使大規模軟件開發更容易。
ECMAScript或ES6於2015年6月發佈。隨後更名為ECMAScript 2015。Web瀏覽器對完整語言的支持尚未完成,儘管支持主要部分。主要的web瀏覽器支持ES6的一些功能。但是,可以使用稱為transpiler的軟件將ES6代碼轉換為ES5,這在大多數瀏覽器上都得到了更好的支持。
現在讓我們看看ES6給JavaScript帶來的一些主要變化。
最後,常量的概念已經應用到JavaScript中了!常量是隻能定義一次的值(每個作用域,下文解釋的作用域)。在同一範圍內重新定義會觸發錯誤。
c***t JOE = 4.0JOE= 3.5// results in: Uncaught TypeError: Assignment to c***tant variable.可以在任何可以使用變量(var)的地方使用常量。
c***ole.log("Value is: " + joe * 2)// prints: 8歡迎來到21世紀,JavaScript!用ES6,使用爪哇(C++)等聲明的變量(如上面描述的常量)所聲明的變量遵循塊範圍規則(為了瞭解更多,請參見如何在JavaScript中聲明變量)。
在更新之前,JavaScript中的變量是函數範圍。也就是說,當您需要一個變量的新作用域時,您必須在函數中聲明它。
變量將保留該值直到塊結束。在塊之後,外部塊中的值(如果有)被恢復。
{ let x = "hello"; { let x = "world"; c***ole.log("inner block, x = " + x); } c***ole.log("outer block, x = " + x);}// printsinner block, x = worldouter block, x = hello您也可以在這些塊中重新定義常量。
{ let x = "hello"; { c***t x = 4.0; c***ole.log("inner block, x = " + x); try { x = 3.5 } catch(err) { c***ole.error("inner block: " + err); } } x = "world"; c***ole.log("outer block, x = " + x);}// printsinner block, x = 4inner block: TypeError: Assignment to c***tant variable.outer block, x = worldES6將箭頭函數引入JavaScript。(這些函數與傳統函數類似,但語法更簡單。)在下面的示例中,x是一個接受稱為a的參數並返回其增量的函數:
var x = a => a + 1;x(4) // returns 5使用這種語法,您可以輕鬆地在函數中定義和傳遞參數。
使用forEach():
[1, 2, 3, 4].forEach(a => c***ole.log(a + " => " + a*a))// prints1 => 12 => 43 => 94 => 16通過將接受多個參數的函數括在括號中來定義它們:
[22, 98, 3, 44, 67].sort((a, b) => a - b)// returns[3, 22, 44, 67, 98]現在可以用默認值聲明函數參數。在下面,x是一個具有兩個參數a和b的函數。第二個參數b的默認值為1。
var x = (a, b = 1) => a * bx(2)// returns 2x(2, 2)// returns 4與其他語言(如C++或Python)不同,默認值的參數可能出現在沒有默認值的那些參數之前。請注意,通過舉例說明,此函數定義為具有返回值的塊。
var x = (a = 2, b) => { return a * b }不過,參數是從左到右匹配的。在下面的第一次調用中,b有一個未定義的值,即使a已用默認值聲明。傳入的參數與a而不是b匹配。函數返回NaN。
x(2)// returns NaNx(1, 3)// returns 3當您顯式地將未定義作為參數傳入時,如果存在參數,則使用默認值。
x(undefined, 3)// returns 6調用函數時,有時需要能夠傳入任意數量的參數,並在函數中處理這些參數。這一需求由rest函數參數語法處理。它提供了一種使用如下所示語法捕獲已定義參數之後的其餘參數的方法。這些額外的參數被捕獲在一個數組中。
var x = function(a, b, ...args) { c***ole.log("a = " + a + ", b = " + b + ", " + args.length + " args left"); }x(2, 3)// printsa = 2, b = 3, 0 args leftx(2, 3, 4, 5)// printsa = 2, b = 3, 2 args left字符串模板是指使用perl或shell等語法將變量和表達式**字符串中。字符串模板用反勾號(`)括起來。相比之下,單引號(')或雙引號(“)表示普通字符串。模板中的表達式標記在${和}之間。舉個例子:
var name = "joe";var x = `hello ${name}`// returns "hello joe"當然,可以使用任意表達式進行求值。
// define an arrow functionvar f = a => a * 4// set a parameter valuevar v = 5// and evaluate the function within the string templatevar x = `hello ${f(v)}`// returns "hello 20"此定義字符串的語法也可用於定義多行字符串。
var x = `hello worldnext line`// returnshello worldnext lineES6帶來了簡化的對象創建語法。請看下面的示例:
var x = "hello world", y = 25var a = { x, y }// is equivalent to the ES5:{x: x, y: y}計算屬性名也相當漂亮。對於ES5及更早版本,要使用計算名稱設置對象屬性,必須執行以下操作:
var x = "hello world", y = 25var a = {x: x, y: y}a["joe" + y] = 4// a is now:{x: "hello world", y: 25, joe25: 4}現在你可以用一個定義來完成這一切:
var a = {x, y, ["joe" + y]: 4}// returns{x: "hello world", y: 25, joe25: 4}當然,要定義方法,可以使用以下名稱來定義:
var a = {x, y, ["joe" + y]: 4, foo(v) { return v + 4 }}a.foo(2)// returns6最後,JavaScript得到了一個正式的類定義語法。雖然它只是對已經可用的基於protytype的類的語法補充,但它確實有助於提高代碼的清晰度。這意味著這不會添加新的對象模型或類似的東西。
class Circle { c***tructor(radius) { this.radius = radius }}// use itvar c = new Circle(4)// returns: Circle {radius: 4}定義方法也非常簡單。沒什麼奇怪的。
class Circle { c***tructor(radius) { this.radius = radius } computeArea() { return Math.PI * this.radius * this.radius }}var c = new Circle(4)c.computeArea()// returns: 50.26548245743669我們現在也有getter和setter,只需對語法進行簡單的更新。讓我們用area屬性重新定義Circle類。
class Circle { c***tructor(radius) { this.radius = radius } get area() { return Math.PI * this.radius * this.radius }}var c = new Circle(4)// returns: Circle {radius: 4}c.area// returns: 50.26548245743669現在讓我們添加一個setter。為了能夠將radius定義為可設置的屬性,我們應該將實際字段重新定義為\u radius或與setter不衝突的內容。否則我們會遇到堆棧溢出錯誤。
以下是重新定義的類:
class Circle { c***tructor(radius) { this._radius = radius } get area() { return Math.PI * this._radius * this._radius } set radius(r) { this._radius = r }}var c = new Circle(4)// returns: Circle {_radius: 4}c.area// returns: 50.26548245743669c.radius = 6c.area// returns: 113.09733552923255總之,這是對面向對象JavaScript的一個很好的補充。
除了使用class關鍵字定義類之外,還可以使用extends關鍵字從超類繼承。讓我們用一個例子來看看這是如何工作的。
class Ellipse { c***tructor(width, height) { this._width = width; this._height = height; } get area() { return Math.PI * this._width * this._height; } set width(w) { this._width = w; } set height(h) { this._height = h; }}class Circle extends Ellipse { c***tructor(radius) { super(radius, radius); } set radius(r) { super.width = r; super.height = r; }}// create a circlevar c = new Circle(4)// returns: Circle {_width: 4, _height: 4}c.radius = 2// c is now: Circle {_width: 2, _height: 2}c.area// returns: 12.566370614359172c.radius = 5c.area// returns: 78.53981633974483這是對JavaScript ES6的一些特性的簡短介紹。
接下來:熟悉一些重要的JavaScript數組方法並編寫一個語音敏感的機器人動畫腳本!此外,還可以瞭解一個名為Vue的優秀前端框架。
圖片來源:micrologia/Depositphotos
主要區別–typescript與es6 TypeScript和ES6是與javascript相關的兩種技術在全球資訊網上有大量的網頁可用。每個組織都有自己的網站來與客戶溝通,瞭解市場趨勢。web應用程式開發中使用了多種技術。最常見的三種技術是HTML、CSS...
javascript(javascript)和打字稿(typescript)的區別 JavaScript是一種流行的web程式語言。它最初被稱為LiveScript。TypeScript是一種基於JavaScript的語言。Javascript和TypeScript的主要區別在於Javascript是一種客戶端指令碼語言,而TypeScript是一種面...
javascript(javascript)和jquery公司(jquery)的區別 網際網路上有成千上萬的網站。每天都有新網站被建立。每個商業組織都有一個網站來聯絡他們的客戶。web應用程式開發中使用了多種技術。其中兩個是JavaScript和jQuery。JavaScript是一...
...活躍的語言,全年有202k個pull請求。與前三種語言相比:JavaScript有1604k的pull請求,Java有763k的pull請求,Python有744個pull請求。Ruby、PHP、C++和CSS也擊敗了C. ...
... 編碼訓練營通常提供JavaScript、Ruby、Python、Rails、ExpressJS、Django和MySQL課程。你希望用你的程式設計技巧來決定你將選擇哪一個音軌。例如,您可能只專注於Rails。或者,您可以選擇一個全面的w...
... Javascript(ES6)程式碼片段——這個外掛有一些使用ES6語法的Javascript的片段。要安裝的命令是:ext install JavaScriptSnippets ...
... JavaScript從一開始就是一種混亂的語言,因此您需要所有能得到的幫助。一個適當的、裝備精良的文字編輯器可以幫助您更快地編寫程式碼,編寫更乾淨的程式碼,儘早地...
如果說GitHub是值得借鑑的,那麼我們可以看到Java和JavaScript是世界上最流行的兩種程式語言,其次是Python、PHP和Ruby。然而,儘管名稱相似,Java和JavaScript卻毫不相干。 ...
...,不僅是React在人氣最旺的時候,它的人氣也在加速。就JavaScript web開發而言,React是最容易學習的框架之一,也是快速和健壯開發最有效的框架之一。 ...