ES5和ES6之間的區別
-
ECMAScript 5(ES5):ECMAScript的第5版,於2009年標準化。該標準已在所有現代瀏覽器中完全實現
-
ECMAScript 6(ES6)/ ECMAScript 2015(ES2015):第6版ECMAScript,於2015年標準化。該標準已在大多數現代瀏覽器中部分實施。
以下是ES5和ES6之間的一些主要區別:
- 箭頭函式 和字串插值 :
ES5:
const greetings = (name) => { return `hello ${name}`; }
ES6:
const greetings = name => `hello ${name}`;
- Const 。Const在許多方面像其他語言中的常量一樣工作,但有一些注意點:Const表示對值的“恆定引用”。因此,使用const,您實際上可以改變一個被變數引用的物件屬性,但是你無法改變引用本身。
const NAMES = []; NAMES.push("Jim"); console.log(NAMES.length === 1); // true NAMES = ["Steve", "John"]; // error
- 塊作用域變數 。新的ES6關鍵字let允許開發人員在塊級別定義變數。
- 預設引數值 預設引數允許我們使用預設值初始化函式。如果省略或未定義引數,則使用預設值 - 意味著null是有效值。
// Basic syntax function multiply (a, b = 2) { return a * b; } multiply(5); // 10
-
類定義和繼承
ES6引入了對類(class關鍵字),建構函式(constructor關鍵字)和extend繼承關鍵字的語言支援。
-
for-of運算子
for ... of語句建立一個迴圈遍歷可迭代物件的迴圈。
- Spread 操作符用於物件融合
const obj1 = { a: 1, b: 2 } const obj2 = { a: 2, c: 3, d: 4} const obj3 = {...obj1, ...obj2}
- Promises Promises提供了一種處理非同步操作的結果和錯誤的機制。你可以用回撥來完成同樣的事情,但是promises通過方法連結和簡潔的錯誤處理提供了更高的可讀性。
const isGreater = (a, b) => { return new Promise ((resolve, reject) => { if(a > b) { resolve(true) } else { reject(false) } }) } isGreater(1, 2) .then(result => { console.log('greater') }) .catch(result => { console.log('smaller') })
- 模組匯出和匯入 模組匯出:
const myModule = { x: 1, y: () => { console.log('This is ES5') }} export default myModule;
匯入:
import myModule from './myModule';