本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出 原文連接，博客地址為 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); // 5document.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); // ReferenceErrorconst 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 isa stringwith multiplelines'; 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

轉載于:https://www.cnblogs.com/jasonnode/p/4651514.html

總結

以上是生活随笔為你收集整理的ECMAScript 6教程 (一)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。