[Day02] JavaScript - ES6 概要&語法 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

DAY 2

Modern Web

JavaScript 基礎修練系列第 2 篇

[Day02] JavaScript - ES6 概要&語法

13th鐵人賽

yashienxxxx

2021-09-02 23:24:34

1334 瀏覽

分享至

ES6 概念

ECMAScript 6 (簡稱 ES6)，是JavaScript語言新一代的標準，在 2015 年 6 月正式發佈。
ES6 代表著 ECMAScript6 這個版本。ES6 其實是一個泛指的名詞，泛指 ES5.1 版以後的新一代 JavaScript 語言標準，涵蓋了 ES2015, ES2016, ES2017 等等，ES2015 則是正式名稱，特指該年度發佈的語言標準，現在常聽到人家說的 ES6，一般是指 ES2015 標準。

ECMAScript 和 JavaScript 的關係

ECMAScript是一種由Ecma國際（前身為歐洲電腦製造商協會）在標準ECMA-262中定義的手稿語言規範。
ECMAScript 負責定義一些腳本語言所需遵守的標準及規範，JavaScript 即是按 ECMAScript的規範，所實現出來的語言，所以有時 ECMAScript 和 JavaScript 會被畫上等號，但其實兩者是不一樣的!

簡單來說，ECMAScript 是 JavaScript 的國際標準，JavaScript 是 ECMAScript 的實現。

ES6 新語法

新的宣告變數方式: `let` & `const`

在ES6之前，JavaScript並沒有區塊域(block)的概念，更精確的說，之前版本所定義的變數，特性相當於全域變數。
因此ES6之前使用”var”宣告所有的變數，但這樣的宣告方式可能會出現"區域變數覆蓋全域變數"的情況發生。而在ES6發佈之後，有了區塊域(block)的概念以及“let”的推出，上述的問題就可以避免了。

ES6 之前的宣告範例: var
從下面例子來看，輸出結果會是 5。雖然 x 是在 if { } 區塊裡面被宣告的，但卻因為有全域變數的特性，因此溢出大括號而成為後續程式碼的變數值。
(即不只在宣告的區塊或函數裡面有效，其變數值還會超出宣告區塊而影響到全部的範圍。)
```
if (true) {
  var x = 5;
}
console.log(x);      // x is 5
```
ES6 之後的宣告範例: let
接著舉一個 ECMAScript 2015 之後的宣告範例。當使用了 let 這個區域變數宣告方式，變數 y 的有效範圍只有在 if { } 的範圍內；因此超出{ }範圍時，輸出結果是 ReferenceError。
```
if (true) {
  let y = 5;
}
console.log(y);      // ReferenceError: y is not defined (y沒有被定義)
```