本文版權(quán)歸作者和博客園共有，歡迎轉(zhuǎn)載，但未經(jīng)作者同意必須保留此段聲明，且在文章頁(yè)面明顯位置給出 原文連接，博客地址為 http://www.cnblogs.com/jasonnode/?。該系列課程是匯智網(wǎng)?整理編寫(xiě)的，課程地址為?http://www.dwz.cn/3e6Yml

?

什么是ES6？

---

　　ECMAScript 6（以下簡(jiǎn)稱ES6）是JavaScript語(yǔ)言的下一代標(biāo)準(zhǔn)，已經(jīng)在2015年6月正式發(fā)布了。Mozilla公司將在這個(gè)標(biāo)準(zhǔn)的基礎(chǔ)上，推出JavaScript 2.0。

　　ECMAScript和JavaScript到底是什么關(guān)系？很多初學(xué)者會(huì)感到困惑，簡(jiǎn)單來(lái)說(shuō)，ECMAScript是JavaScript語(yǔ)言的國(guó)際標(biāo)準(zhǔn)，JavaScript是ECMAScript的實(shí)現(xiàn)。

　　1996年11月，JavaScript的創(chuàng)造者Netscape公司，決定將JavaScript提交給國(guó)際標(biāo)準(zhǔn)化組織ECMA，希望這種語(yǔ)言能夠成為國(guó)際標(biāo)準(zhǔn)。次年，ECMA發(fā)布262號(hào)標(biāo)準(zhǔn)文件（ECMA-262）的第一版，規(guī)定了瀏覽器腳本語(yǔ)言的標(biāo)準(zhǔn)，并將這種語(yǔ)言稱為ECMAScript。這個(gè)版本就是ECMAScript 1.0版。

　　ES6的目標(biāo)，是使得JavaScript語(yǔ)言可以用來(lái)編寫(xiě)大型的復(fù)雜的應(yīng)用程序，成為企業(yè)級(jí)開(kāi)發(fā)語(yǔ)言。

　　作為新一代標(biāo)準(zhǔn)ES6將為我們帶來(lái)很多令人欣喜的功能特性，本課程將著重帶領(lǐng)大家領(lǐng)略ES6的風(fēng)采，因此在學(xué)習(xí)本課程前需要具備JavaScript的基礎(chǔ)知識(shí)，如果你并不了解JavaScript是什么，可以先學(xué)習(xí)一下JavaScript的入門(mén)課程。

支持

---

　　雖說(shuō)ES6已經(jīng)作為新一代標(biāo)準(zhǔn)發(fā)布了，但是各大瀏覽器對(duì)新功能實(shí)現(xiàn)支持的還需要一段時(shí)間，那么我們?cè)趺粗雷约菏褂玫臑g覽器是否支持ES6的相應(yīng)功能呢？

　　不用緊張，對(duì)ES6的支持可以查看kangax.github.io/es5-compat-table/es6/，在這里可以清晰的了解到不同版本的瀏覽器對(duì)ES6功能的支持情況。隨著時(shí)間的推移，支持度已經(jīng)越來(lái)越高了，ES6的大部分特性都實(shí)現(xiàn)了。

　　如果你想現(xiàn)在就在瀏覽器使用ES6的特性，還可以通過(guò)引用兼容包的方式提前嘗嘗鮮。https://github.com/paulmillr/es6-shim

環(huán)境支持

---

直接插入網(wǎng)頁(yè)

Traceur允許將ES6代碼直接插入網(wǎng)頁(yè)。首先，必須在網(wǎng)頁(yè)頭部加載Traceur庫(kù)文件。

<!-- 加載Traceur編譯器 --> <script src="http://google.github.io/traceur-compiler/bin/traceur.js" type="text/javascript"></script> <!-- 將Traceur編譯器用于網(wǎng)頁(yè) --> <script src="http://google.github.io/traceur-compiler/src/bootstrap.js" type="text/javascript"></script> <!-- 打開(kāi)實(shí)驗(yàn)選項(xiàng)，否則有些特性可能編譯不成功 --> <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標(biāo)簽的type屬性的值是module(或者traceur)，而不是text/javascript。這是Traceur編譯器識(shí)別ES6代碼的標(biāo)識(shí)，編譯器會(huì)自動(dòng)將所有type=module的代碼編譯為ES5，然后再交給瀏覽器執(zhí)行。

let

---

let是ES6中新增關(guān)鍵字。

它的作用類似于var，用來(lái)聲明變量，但是所聲明的變量，只在let命令所在的代碼塊內(nèi)有效。

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

體會(huì)下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應(yīng)用

---

for循環(huán)的計(jì)數(shù)器，就很合適使用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?也具有塊級(jí)作用域

if (true) {const max = 5; } document.write(max); // ReferenceError 常量MAX在此處不可得

const?不能變量提升（必須先聲明后使用）

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

const?不可重復(fù)聲明

var message = "Hello!"; let age = 25;// 以下兩行都會(huì)報(bào)錯(cuò) const message = "Goodbye!"; const age = 30;

const?指令指向變量所在的地址，所以對(duì)該變量進(jìn)行屬性設(shè)置是可行的（未改變變量地址），如果想完全不可變化（包括屬性），那么可以使用凍結(jié)。

const C1 = {}; C1.a = 1; document.write(C1.a); // 1 C1 = {}; // 報(bào)錯(cuò) 重新賦值，地址改變//凍結(jié)對(duì)象，此時(shí)前面用不用const都是一個(gè)效果 const C2 = Object.freeze({}); C2.a = 1; //Error,對(duì)象不可擴(kuò)展 document.write(C2.a);

是否包含字符串三種新方法

---

　　傳統(tǒng)上，JavaScript只有?indexOf?方法，可以用來(lái)確定一個(gè)字符串是否包含在另一個(gè)字符串中。ES6又提供了三種新方法。

• includes()：返回布爾值，表示是否找到了參數(shù)字符串。
• startsWith()：返回布爾值，表示參數(shù)字符串是否在源字符串的頭部。
• endsWith()：返回布爾值，表示參數(shù)字符串是否在源字符串的尾部。

var str = "Hello world!";str.startsWith("Hello") // true str.endsWith("!") // true str.includes("o") // true

這三個(gè)方法都支持第二個(gè)參數(shù)，表示開(kāi)始搜索的位置。

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

上面代碼表示，使用第二個(gè)參數(shù)n時(shí)，endsWith?的行為與其他兩個(gè)方法有所不同。它針對(duì)前n個(gè)字符，而其他兩個(gè)方法針對(duì)從第n個(gè)位置直到字符串結(jié)束。

repeat()原字符串重復(fù)

---

repeat()返回一個(gè)新字符串，表示將原字符串重復(fù)n次。

var str = "x"; str.repeat(3) // "xxx"var str1 = "hello"; str1.repeat(2) // "hellohello"

模板字符串

---

模板字符串提供了3個(gè)有意思的特性。

模板字符中，支持字符串插值：

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

模板字符串可以包含多行：

let multiLine = 'This isa stringwith multiplelines'; document.write(multiLine);

標(biāo)簽?zāi)０?/h2>

---

標(biāo)簽?zāi)０?/p> var a = 5; var b = 10;tag`Hello ${ a + b } world ${ a * b }`;

上面代碼中，模板字符串前面有一個(gè)標(biāo)識(shí)名tag，它是一個(gè)函數(shù)。整個(gè)表達(dá)式的返回值，就是tag函數(shù)處理模板字符串后的返回值。

tag函數(shù)所有參數(shù)的實(shí)際值如下。

• 第一個(gè)參數(shù)：['Hello ', ' world ']
• 第二個(gè)參數(shù): 15
• 第三個(gè)參數(shù)：50

也就是說(shuō)，tag函數(shù)實(shí)際上以下面的形式調(diào)用。

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

下面是tag函數(shù)的一種寫(xiě)法，以及運(yùn)行結(jié)果。

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對(duì)象，提供了一個(gè)raw方法。

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

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

轉(zhuǎn)載于:https://www.cnblogs.com/jasonnode/p/4651514.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。