ES5和ES6之間的區別
摘要：
ECMAScript 5（ES5）：ECMAScript的第5版，於2009年標準化。該標準已在所有現代瀏覽器中完全實現
ECMAScript 6（ES6）/ ECMAScript 2015（ES2015）：第6版E...
-
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';