本文版權歸做者和博客園共有,歡迎轉載,但未經做者贊成必須保留此段聲明,且在文章頁面明顯位置給出 原文鏈接,博客地址爲 http://www.cnblogs.com/jasonnode/ 。該系列課程是匯智網 整理編寫的,課程地址爲 http://www.dwz.cn/3e6Ymljavascript
ECMAScript 6(如下簡稱ES6)是JavaScript語言的下一代標準,已經在2015年6月正式發佈了。Mozilla公司將在這個標準的基礎上,推出JavaScript 2.0。java
ECMAScript和JavaScript究竟是什麼關係?不少初學者會感到困惑,簡單來講,ECMAScript是JavaScript語言的國際標準,JavaScript是ECMAScript的實現。node
1996年11月,JavaScript的創造者Netscape公司,決定將JavaScript提交給國際標準化組織ECMA,但願這種語言可以成爲國際標準。次年,ECMA發佈262號標準文件(ECMA-262)的初版,規定了瀏覽器腳本語言的標準,並將這種語言稱爲ECMAScript。這個版本就是ECMAScript 1.0版。git
ES6的目標,是使得JavaScript語言能夠用來編寫大型的複雜的應用程序,成爲企業級開發語言。es6
做爲新一代標準ES6將爲咱們帶來不少使人欣喜的功能特性,本課程將着重帶領你們領略ES6的風采,所以在學習本課程前須要具有JavaScript的基礎知識,若是你並不瞭解JavaScript是什麼,能夠先學習一下JavaScript的入門課程。github
雖然說ES6已經做爲新一代標準發佈了,可是各大瀏覽器對新功能實現支持的還須要一段時間,那麼咱們怎麼知道本身使用的瀏覽器是否支持ES6的相應功能呢?bootstrap
不用緊張,對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是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();
for循環的計數器,就很合適使用let命令。
var a = []; for (let i = 0; i < 10; i++) { a[i] = function () { document.write(i); }; } document.write(a[6]());
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又提供了三種新方法。
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()返回一個新字符串,表示將原字符串重複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函數全部參數的實際值以下。
也就是說,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"
模板字符串能夠是原始的:
ES6還爲原生的String對象,提供了一個raw方法。
若使用String.raw 做爲模板字符串的前綴,則模板字符串能夠是原始(raw)的。反斜線也再也不是特殊字符,\n 也不會被解釋成換行符:
let raw = String.raw`Not a newline: \n`; document.write(raw === 'Not a newline: \\n'); // true