ECMAScript 6教程 (一)

　　本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出 原文鏈接，博客地址爲 http://www.cnblogs.com/jasonnode/ 。該系列課程是匯智網 整理編寫的，課程地址爲 http://www.dwz.cn/3e6Yml

 

什麼是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