Node.js從入門到實戰ECMAScript6一頁紙總結(很大的一頁紙)
阿新 • • 發佈:2018-11-26
一、ES5/ES6和babel
ECMAScript5,即ES5,是ECMAScript的第五次修訂,於2009年完成標準化,現在的瀏覽器已經相當於完全實現了這個標準。
ECMAScript6,即ES6,也稱ES2015,是ECMAScript的第六次修訂,於2015年完成,並且運用的範圍逐漸開始擴大,因為其相對於ES5更加簡潔,提高了開發速率,開發者也都在陸續進行使用,但是由於ES6還存在一些支援的問題,所以一般即使是使用ES6開發的工程,也需要使用Babel進行轉換。
Babel是一個廣泛使用的ES6轉碼器,可以將ES6程式碼轉為ES5程式碼,從而在現有環境執行。這一過程叫做“原始碼到原始碼”編譯, 也被稱為轉換編譯。
一般來說Babel作為依賴包被引入ES6工程中,此處不再介紹以cli方式使用的ES6,如果你需要以程式設計的方式來使用 Babel,可以使用 babel-core 這個包。babel-core 的作用是把 js 程式碼分析成 ast ,方便各個外掛分析語法進行相應的處理。有些新語法在低版本 js 中是不存在的,如箭頭函式,rest 引數,函式預設值等,這種語言層面的不相容只能通過將程式碼轉為 ast,分析其語法後再轉為低版本 js。babel的使用過程如下:
1. 首先安裝 babel-core。
$ npm install babel-core
2. 在檔案開頭引入babel:var babel = require("babel-core");
3. 檔案轉換
字串形式的 JavaScript 程式碼可以直接使用 babel.transform 來編譯。
如果是檔案的話,可以使用非同步 api:
或者是同步 api:
或者在development環境下可以使用bable-node和bable-register的方式配置,過程如下:
1. 新增依賴
在Node.js工程package.json包中新增如下依賴:
2. 配置dev指令碼
接下來羅列一下ES6的語法要點參考備用。
二、let, const
這兩個的用途與var類似,都是用來宣告變數的,但在實際運用中他倆都有各自的特殊用途。首先來看下面這個例子:
使用var 兩次輸出都是obama,這是因為ES5只有全域性作用域和函式作用域,沒有塊級作用域,這帶來很多不合理的場景。第一種場景就是你現在看到的內層變數覆蓋外層變數。而let則實際上為JavaScript新增了塊級作用域。用它所宣告的變數,只在let命令所在的程式碼塊內有效。
另外一個var帶來的不合理場景就是用來計數的迴圈變數洩露為全域性變數,看下面的例子:
上面程式碼中,變數i是var宣告的,在全域性範圍內都有效。所以每一次迴圈,新的i值都會覆蓋舊值,導致最後輸出的是最後一輪的i的值。而使用let則不會出現這個問題。