引言:javascript
ECMAScript 和 JavaScript 的關係是,前者是後者的規格,後者是前者的一種實現(另外的 ECMAScript 方言還有 JScript 和 ActionScript)。平常場合,這兩個詞是能夠互換的。html
ES6 既是一個歷史名詞,也是一個泛指,含義是 5.1 版之後的 JavaScript 的下一代標準,涵蓋了 ES201五、ES201六、ES2017 等等,而 ES2015 則是正式名稱,特指該年發佈的正式版本的語言標準。本書中提到 ES6 的地方,通常是指 ES2015 標準,但有時也是泛指「下一代 JavaScript 語言」。java
Babel 是一個普遍使用的 ES6 轉碼器,能夠將 ES6 代碼轉爲 ES5 代碼,從而在現有環境執行。(Google 公司的Traceur轉碼器,也能夠將 ES6 代碼轉爲 ES5 代碼。Traceur 容許將 ES6 代碼直接插入網頁,Traceur 也提供一個在線編譯器,能夠在線將 ES6 代碼轉爲 ES5 代碼)git
1.變量與做用域github
var 能夠重複聲明,沒法限制修改,沒有塊級做用域(即{})json
let :不能重複聲明,變量-能夠修改,塊級做用域,數組
const:不能重複聲明,常量-不能夠修改,塊級做用域瀏覽器
注:安全
let
命令不存在變量提高,它所聲明的變量必定要在聲明後使用babel
在代碼塊內,使用let,const
命令聲明變量以前,該變量都是不可用的。這在語法上,稱爲「暫時性死區」,「暫時性死區」也意味着typeof
再也不是一個百分之百安全的操做。
let
不容許在相同做用域內,重複聲明同一個變量。
for
循環還有一個特別之處,就是設置循環變量的那部分是一個父做用域,而循環體內部是一個單獨的子做用域。
ES5 規定,函數只能在頂層做用域和函數做用域之中聲明,不能在塊級做用域聲明。(可是,瀏覽器沒有遵照這個規定,爲了兼容之前的舊代碼,仍是支持在塊級做用域之中聲明函數)
ES6 引入了塊級做用域,明確容許在塊級做用域之中聲明函數。ES6 規定,塊級做用域之中,函數聲明語句的行爲相似於let
,在塊級做用域以外不可引用。
2.箭頭函數:
function hanshu(){}等價於 去掉function 加上=>
()=> {}
只有一個參數,可省略()
只有一個return,可省略{}
3.函數的參數:
a.參數擴展(收集參數-必須最後一個參數rest parameter,展開數組)
b.默認參數:function hanshu(a,b=10,c=5){} 即傳了參數則以傳的參數爲準,不傳則以默認值爲準
4.解構賦值:
左右兩邊結構一致,右邊必須是個東西(是個json是個數組對象都行,合法),聲明跟賦值要在一塊兒,如let [a,b,c] = [1,2,3];
數組,json,數組對象字符串等嵌套均可解構賦值。let {a,b,c} = {a:1,b:2,c:3}
如:let [{a,b},[n1,n2,n3],num,str] = [{a:10,b:13},[1,2,3],56,'qwer']------可控制粒度,即控制輸出形式
let [obj,arr,num,str] = [{a:10,b:13},[1,2,3],56,'qwer'] -----輸出爲json和數組形式
不徹底解構,即等號左邊的模式,只匹配一部分的等號右邊的數組。這種狀況下,解構依然能夠成功。
解構賦值容許指定默認值。默認值能夠引用解構賦值的其餘變量,但該變量必須已經聲明。
對象的解構賦值,能夠很方便地將現有對象的方法,賦值到某個變量。
對象的解構賦值的內部機制,是先找到同名屬性,而後再賦給對應的變量。真正被賦值的是後者,而不是前者。(注意,對象的解構賦值能夠取到繼承的屬性。)
對象的解構也能夠指定默認值。默認值生效的條件是,對象的屬性值嚴格等於undefined
。
若是要將一個已經聲明的變量用於解構賦值,必須很是當心。
// 錯誤的寫法 let x; {x} = {x: 1}; // SyntaxError: syntax error
上面代碼的寫法會報錯,由於 JavaScript 引擎會將{x}
理解成一個代碼塊,從而發生語法錯誤。只有不將大括號寫在行首,避免 JavaScript 將其解釋爲代碼塊,才能解決這個問題。
// 正確的寫法 let x; ({x} = {x: 1});
上面代碼將整個解構賦值語句,放在一個圓括號裏面,就能夠正確執行。
字符串也能夠解構賦值。這是由於此時,字符串被轉換成了一個相似數組的對象。而相似數組的對象都有一個length
屬性,所以還能夠對這個屬性解構賦值。
解構賦值時,若是等號右邊是數值和布爾值,則會先轉爲對象。解構賦值的規則是,只要等號右邊的值不是對象或數組,就先將其轉爲對象。因爲undefined
和null
沒法轉爲對象,因此對它們進行解構賦值,都會報錯。
5.函數的解構賦值:
函數的參數也可使用解構賦值。函數參數的解構也可使用默認值,函數參數自己設置默認值也能夠。函數的參數能夠是數組對象,
6.字符串擴展:
ES6 爲字符串添加了遍歷器接口(詳見《Iterator》一章),使得字符串能夠被for...of
循環遍歷。
模板字符串(template string)是加強版的字符串,用反引號(`)標識。它能夠看成普通字符串使用,也能夠用來定義多行字符串,或者在字符串中嵌入變量。模板字符串中嵌入變量,須要將變量名寫在${}
之中。大括號內部能夠放入任意的 JavaScript 表達式,能夠進行運算,以及引用對象屬性。全部模板字符串的空格和換行,都是被保留的,好比<ul>
標籤前面會有一個換行。若是你不想要這個換行,可使用trim
方法消除它。模板字符串之中還能調用函數。若是大括號中的值不是字符串,將按照通常的規則轉爲字符串。好比,大括號中是一個對象,將默認調用對象的toString
方法。若是模板字符串中的變量沒有聲明,將報錯。因爲模板字符串的大括號內部,就是執行 JavaScript 代碼,所以若是大括號內部是一個字符串,將會原樣輸出。模板字符串甚至還能嵌套。若是須要引用模板字符串自己,在須要時執行,能夠寫成函數。
模板字符串的功能,不只僅是上面這些。它能夠緊跟在一個函數名後面,該函數將被調用來處理這個模板字符串。這被稱爲「標籤模板」功能(tagged template)。
alert`123` // 等同於 alert(123)
標籤模板其實不是模板,而是函數調用的一種特殊形式。「標籤」指的就是函數,緊跟在後面的模板字符串就是它的參數。「標籤模板」的一個重要應用,就是過濾 HTML 字符串,防止用戶輸入惡意內容。