ECMAScript6 教程（一）

什麼是ES6？

ECMAScript 6（以下簡稱ES6）是JavaScript語言的下一代標準，已經在2015年6月正式釋出了。Mozilla公司將在這個標準的基礎上，推出JavaScript 2.0。

　　ECMAScript和JavaScript到底是什麼關係？很多初學者會感到困惑，簡單來說，ECMAScript是JavaScript語言的國際標準，JavaScript是ECMAScript的實現。

　　1996年11月，JavaScript的創造者Netscape公司，決定將JavaScript提交給國際標準化組織ECMA，希望這種語言能夠成為國際標準。次年，ECMA釋出262號標準檔案（ECMA-262）的第一版，規定了瀏覽器指令碼語言的標準，並將這種語言稱為ECMAScript。這個版本就是ECMAScript 1.0版。

　　ES6的目標，是使得JavaScript語言可以用來編寫大型的複雜的應用程式，成為企業級開發語言。

　　作為新一代標準ES6將為我們帶來很多令人欣喜的功能特性，本課程將著重帶領大家領略ES6的風采，因此在學習本課程前需要具備JavaScript的基礎知識，如果你並不瞭解JavaScript是什麼，可以先學習一下JavaScript的入門課程。

支援 雖說ES6已經作為新一代標準釋出了，但是各大瀏覽器對新功能實現支援的還需要一段時間，那麼我們怎麼知道自己使用的瀏覽器是否支援ES6的相應功能呢？

　　不用緊張，對ES6的支援可以檢視kangax.github.io/es5-compat-table/es6/，在這裡可以清晰的瞭解到不同版本的瀏覽器對ES6功能的支援情況。隨著時間的推移，支援度已經越來越高了，ES6的大部分特性都實現了。

　　如果你想現在就在瀏覽器使用ES6的特性，還可以通過引用相容包的方式提前嚐嚐鮮。 https://github.com/paulmillr/es6-shim

環境支援

直接插入網頁

Traceur允許將ES6程式碼直接插入網頁。首先，必須在網頁頭部載入Traceur庫檔案。

    <!-- 載入Traceur編譯器 -->
<script src="http://google.github.io/traceur-compiler/bin/traceur.js" type="text/javascript"></script>
<!-- 將Traceur編譯器用於網頁 -->
<script src="http://google.github.io/traceur-compiler/src/bootstrap.js" type="text/javascript"></script>
<!-- 開啟實驗選項，否則有些特性可能編譯不成功 -->
<script>
　　traceur.options.experimental = true;
</script>

<script type="module">
　　class Calc {
　　　　constructor(){
　　　　　　console.log('Calc constructor');
　　　　}
　　　　add(a, b){
　　　　　　return a + b;
　　　　}
　　}

　　var c = new Calc();
　　console.log(c.add(4,5));
</script>

注意，script標籤的type屬性的值是module(或者traceur)，而不是text/javascript。這是Traceur編譯器識別ES6程式碼的標識，編譯器會自動將所有type=module的程式碼編譯為ES5，然後再交給瀏覽器執行。

let

let是ES6中新增關鍵字。

它的作用類似於var，用來宣告變數，但是所宣告的變數，只在let命令所在的程式碼塊內有效。

if(true){
    var a = 1;
l    et b = 2;
}
document.write(a);
document.write(b); // 報錯：ReferenceError: b is not defined

體會下let和var的作用域範圍:

function f1() {
    var a = 8;
    let n = 5;
    if (true) {
        let n = 10;
        var a = 20
    }
    document.write(n); // 5
    document.write(a); // 20
}
f1();

let應用

for迴圈的計數器，就很合適使用let命令。

var a = [];
for (let i = 0; i < 10; i++) {
    a[i] = function () {
        document.write(i);
    };
}
document.write(a[6]());

const命令

const 宣告的是常量，一旦宣告，值將是不可變的。

const PI = 3.1415;
PI // 3.1415

PI = 3;
PI // 3.1415

const PI = 3.1;
PI // 3.1415

const 也具有塊級作用域

if (true) {
    const max = 5;
}
document.write(max); // ReferenceError 常量MAX在此處不可得
const 不能變數提升（必須先宣告後使用）

if (true) {
    document.write(MAX); // ReferenceError
    const MAX = 5;
}

const 不可重複宣告

var message = "Hello!";
let age = 25;

// 以下兩行都會報錯
const message = "Goodbye!";
const age = 30;

const 指令指向變數所在的地址，所以對該變數進行屬性設定是可行的（未改變變數地址），如果想完全不可變化（包括屬性），那麼可以使用凍結。

const C1 = {};
C1.a = 1;
document.write(C1.a); // 1
C1 = {}; // 報錯 重新賦值，地址改變

//凍結物件，此時前面用不用const都是一個效果
const C2 = Object.freeze({});
C2.a = 1; //Error,物件不可擴充套件
document.write(C2.a);

是否包含字串三種新方法

　　傳統上，JavaScript只有 indexOf 方法，可以用來確定一個字串是否包含在另一個字串中。ES6又提供了三種新方法。

includes()：返回布林值，表示是否找到了引數字串。 startsWith()：返回布林值，表示引數字串是否在源字串的頭部。 endsWith()：返回布林值，表示引數字串是否在源字串的尾部。

var str = "Hello world!";

str.startsWith("Hello") // true
str.endsWith("!") // true
str.includes("o") // true

這三個方法都支援第二個引數，表示開始搜尋的位置。

var str = "Hello world!";

str.startsWith("world", 6) // true
str.endsWith("Hello", 5) // true
str.includes("Hello", 6) // false

上面程式碼表示，使用第二個引數n時，endsWith 的行為與其他兩個方法有所不同。它針對前n個字元，而其他兩個方法針對從第n個位置直到字串結束。

repeat()原字串重複

repeat()返回一個新字串，表示將原字串重複n次。

var str = "x";
str.repeat(3) // "xxx"

var str1 = "hello";
str1.repeat(2) // "hellohello"

模板字串

模板字串提供了3個有意思的特性。

模板字元中，支援字串插值：

let first = 'hubwiz';
let last = '匯智網';
document.write(`Hello ${first} ${last}!`);
// Hello hubwiz 匯智網!

模板字串可以包含多行：

let multiLine = '
　　　　This is
　　　　a string
　　　　with multiple
　　　　lines';
document.write(multiLine);

標籤模板

標籤模板

var a = 5;
var b = 10;

tag`Hello ${ a + b } world ${ a * b }`;

上面程式碼中，模板字串前面有一個標識名tag，它是一個函式。整個表示式的返回值，就是tag函式處理模板字串後的返回值。

tag函式所有引數的實際值如下。

第一個引數：['Hello ', ' world '] 第二個引數: 15 第三個引數：50 也就是說，tag函式實際上以下面的形式呼叫。

tag(['Hello ', ' world '], 15, 50)

下面是tag函式的一種寫法，以及執行結果。

var a = 5;
var b = 10;

function tag(s, v1, v2) {
document.write(s[0]);
document.write(s[1]);
document.write(v1);
document.write(v2);

return "OK";
}

tag`Hello ${ a + b } world ${ a * b}`;
// "Hello "
// " world "
// 15
// 50
// "OK"

String.raw()

模板字串可以是原始的：

ES6還為原生的String物件，提供了一個raw方法。

若使用String.raw 作為模板字串的字首，則模板字串可以是原始(raw)的。反斜線也不再是特殊字元，\n 也不會被解釋成換行符：

let raw = String.raw`Not a newline: \n`;
document.write(raw === 'Not a newline: \\n'); // true

相應的免費互動練習課程在匯智網（www.hubwiz.com）上