ES6是ECMA腳本編程語言的版本6。ECMA腳本是JavaScript的標準化名稱，版本6是繼2011年發佈的版本5之後的下一個版本。它是JavaScript語言的一個主要增強，並添加了更多的功能，以使大規模軟件開發更容易。

ECMAScript或ES6於2015年6月發佈。隨後更名為ECMAScript 2015。Web瀏覽器對完整語言的支持尚未完成，儘管支持主要部分。主要的web瀏覽器支持ES6的一些功能。但是，可以使用稱為transpiler的軟件將ES6代碼轉換為ES5，這在大多數瀏覽器上都得到了更好的支持。

現在讓我們看看ES6給JavaScript帶來的一些主要變化。

1常量

最後，常量的概念已經應用到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

2塊作用域變量和函數

歡迎來到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 = world

三。箭頭函數

ES6將箭頭函數引入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]

4默認函數參數

現在可以用默認值聲明函數參數。在下面，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

5rest函數參數

調用函數時，有時需要能夠傳入任意數量的參數，並在函數中處理這些參數。這一需求由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

6字符串模板

字符串模板是指使用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 line

7對象屬性

ES6帶來了簡化的對象創建語法。請看下面的示例：

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

8形式類定義語法

類別定義

最後，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