ES6 箭頭函式讓 code 更簡短
箭頭函式讓 Javascript code 更簡短也更清楚，以下是 ES5 與 ES6 函式範例。
ES5
function greetings(name) {
return 'hello' + name
}
ES6
const greetings = (name) => {
return `hello ${name}`;
}
可以看到我們不需要使用 function 來定義函式。
看看另一種我們可以在 ES6 中定義函式的方法：
const greetings = name =>
`hello ${name}`;
這是一些 code 的縮減。在 ES6 中，如果你的函式只有一個參數，那麼可以讓參數完全捨棄圓括號。
另外可以看到在 ES6 中，在單一行表達式沒使用大括號({})時可以不必寫 return 來回傳值也會自動有 return 的作用。但個人不建議這樣寫，可能容易看錯 code，還是保持一致性比較好閱讀。
ES5 與 ES6 的物件操作
物件在 ES6 中有重大的改進，解構賦值 (Destructuring Assignment)、展開運算子 (Spread Operator) 與其餘參數 (Rest parameters) 是 ES6 的新特性讓物件操作變簡單。
來看看複製兩個物件在 ES5 的寫法：
var obj1 = { a: 1, b: 2 };
var obj2 = { a: 2, c: 3, d:4 };
var obj3 = Object.assign(obj1, obj2)
我們必須使用 Object.assign() 來複製物件，來看看 ES6 怎麼處理這個問題：
var obj1 = { a: 1, b: 2 };
var obj2 = { a: 2, c: 3, d:4 };
var obj3 = {...obj1, ...obj2};
變簡單了許多，展開運算子 (Spread Operator) 讓開發人員可以輕易地複製物件。
再來看看物件的解構。如果想在 ES5 中提取多個值，則必須寫如下所示的 code：
var obj1 = { a: 1, b: 2, c: 3, d: 4 };
var a = obj1.a;
var b = obj1.b;
var c = obj1.c;
var d = obj1.d;
ES6 可以這樣寫：
var obj1 = { a: 1, b: 2, c: 3, d: 4 };
const
a,
b,
c,
d
} = obj1
來看看另一個對物件新功能的介紹。
我們用 ES5 定義一個物件如下：
var a = 1;
var b = 2;
var c = 3;
var d = 4;
var obj1 = { a: a, b: b, c: c, d: d}
ES5 可以這樣寫：
var a = 1;
var b = 2;
var c = 3;
var d = 4;
var obj1 = { a, b, c, d }
如果 key 的名稱和 value 相同，則可以使用這種簡寫形式。
Promises 和 Callbacks
我們都知道 Javascript 是一個非同步的語言，這個特性為我們提供很多自由。
下面我們用 ES5 寫一個非同步的 function
function isGreater(a, b, cb) {
var greater = false;
if (a > b) {
greater = true;
}
cb(greater)
}
isGreater(1, 2, function(result) {
if (result) {
console.log('greater');
} else {
console.log('smaller');
}
});
上面我們定義了一個名為 isGreater 的函式，他有三個參數 a , b 和 cb 。當執行時，函式會檢查如果 a 大於 b 就讓 greater 為 true , 如果不是則 greater 保持 false 。
之後 isGreater 呼叫 callback 函式 cb 並將 greater 的變數作為參數傳給函式。
我們定義了一個名為 isGreater function，他有三個參數 a , b 和 cb 。當執行時這個 function 會檢查 a 是否比 b 大，如果是讓 greater 為 true ，反之則讓 greater 保持 false 。在 isGreater 呼叫 callback function 之後，以 greater 為參數透過 cb 來驗證。
下一段 code 我們以 a 和 b 為參數呼叫 isGreater 函式並執行 callback function。在 callback function 中我們檢查結果是 true 或是 false 來顯示相對應的顯示訊息。我們來看 ES6 是怎麼處理的：
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');
})
ES6 的 Promises 讓我們去 resolve 和 reject 一個請求。然而我們 resolve 一個需求就會呼叫 callback 提供在 then 然後每當我們 reject 一個請求，他就會呼叫 catch callback。
ES6 的 promises 比 callback 好，因為它讓我們簡單的區分一個 success 和 error 所以我們不用再用 callback function 去檢查一次。
匯入和匯出的模組
隨著 ES6 規範的引入，匯入和匯出模組語法完全改變。我們來看看如何在 ES5 中會出一個模組：
const myModule = {
x: 1, y: () => {
console.log('This is ES6');
}
}
exports default myModule;
ES6:
var myModule = {
x: 1, y: function() {
console.log('This is ES5');
}
}
module.exports = myModule;
ES6 語法更具可讀性。除了 export 關鍵字 ES6 之外，還會在後面出現 export default ，讓我們看看如何匯入一個模組在 ES6 是如何變化的。
這是 ES5 版本：
var myModule = require('./myModule');
這是 ES6 版本：
import myModule from './myModule';
所以我們現在來談 export default 。當你會出一些東西使用預設的我們會匯入一個模組像這樣：
import myModule from './myModule';
上面意味著我們預設匯出一個模組然後我們必須匯入全部的模組在你的原始資料夾內。
但 ES6 還為我們提供了從單一模組 export 和 import 多個子模組或變數的功能。
所以在你的模組資料夾你將 export 你的模組像這樣：
export const x = 1;
export const y = 2;
export const z = 'String';
然後 import 一些東西像這樣：
import {x, y, z} from './myModule';
這裡我們使用 ES6 物件解構從單一模組來匯入多個子模組。
留言列表
英文 (3)
