ECMAScript 2017
JavaScript 版本號
舊的 ECMAScript 版本使用數字命名：ES5 和 ES6。
從 2016 年起，版本按年份命名：ES2016、2018、2020……
ECMAScript 2017 中的新功能
本章介紹 ECMAScript 2017 的新功能
- JavaScript 字串填充
- JavaScript Object entries()
- JavaScript Object values()
- JavaScript async 和 await
- 函式中的尾部逗號
- JavaScript Object.getOwnPropertyDescriptors
ES 2017 自 2017 年 9 月起已在所有現代瀏覽器中完全支援
| Chrome 57 | Edge 15 | Firefox 48 | Safari 11 | Opera 44 |
| 2017 年 3 月 | 2017 年 4 月 | 2016 年 8 月 | 2017 年 9 月 | 2017 年 3 月 |
JavaScript 字串填充
ECMAScript 2017 為 JavaScript 添加了兩個字串方法：padStart() 和 padEnd()，用於支援在字串開頭和結尾進行填充。
示例
let text = "5";
text = text.padStart(4,0);
自己動手試一試 »
let text = "5";
text = text.padEnd(4,0);
自己動手試一試 »
JavaScript 字串填充自 2017 年 4 月起在所有現代瀏覽器中均受支援
| Chrome 57 | Edge 15 | Firefox 48 | Safari 10 | Opera 44 |
| 2017 年 3 月 | 2017 年 4 月 | 2016 年 8 月 | 2016 年 9 月 | 2017 年 3 月 |
JavaScript Object Entries
ECMAScript 2017 為物件添加了 Object.entries() 方法。
Object.entries() 返回物件中鍵值對的陣列
示例
const person = {
firstName : "John",
lastName : "Doe",
age : 50,
eyeColor : "blue"
};
let text = Object.entries(person);
自己動手試一試 »
Object.entries() 使在迴圈中使用物件變得容易。
示例
const fruits = {Bananas:300, Oranges:200, Apples:500};
let text = "";
for (let [fruit, value] of Object.entries(fruits)) {
text += fruit + ": " + value + "<br>";
}
自己動手試一試 »
Object.entries() 也使得將物件轉換為 Map 變得簡單
示例
const fruits = {Bananas:300, Oranges:200, Apples:500};
const myMap = new Map(Object.entries(fruits));
自己動手試一試 »
Object.entries() 自 2017 年 3 月起在所有現代瀏覽器中受支援
| Chrome 47 | Edge 14 | Firefox 47 | Safari 10.1 | Opera 41 |
| 2016 年 6 月 | 2016 年 8 月 | 2016 年 6 月 | 2017 年 3 月 | 2016 年 10 月 |
JavaScript Object Values
Object.values() 與 Object.entries() 類似，但返回一個物件值的單維陣列
示例
const person = {
firstName : "John",
lastName : "Doe",
age : 50,
eyeColor : "blue"
};
let text = Object.values(person);
自己動手試一試 »
Object.values() 自 2017 年 3 月以來在所有現代瀏覽器中都得到支援
| Chrome 54 | Edge 14 | Firefox 47 | Safari 10.1 | Opera 41 |
| 2016 年 10 月 | 2016 年 8 月 | 2016 年 6 月 | 2017 年 3 月 | 2016 年 10 月 |
JavaScript Async Functions
等待超時
async function myDisplay() {
let myPromise = new Promise(function(myResolve, myReject) {
setTimeout(function() { myResolve("I love You !!"); }, 3000);
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
Async 函式自 2017 年 9 月起在所有現代瀏覽器中均受支援
| Chrome 55 | Edge 15 | Firefox 52 | Safari 11 | Opera 42 |
| 2016 年 12 月 | 2017 年 4 月 | 2017 年 3 月 | 2017 年 9 月 | 2016 年 12 月 |
JavaScript 尾部逗號
JavaScript 在接受逗號分隔值列表的地方都允許使用尾部逗號。
在 Array 和 Object Literals、Function Calls、Parameters、Imports 和 Exports 中。
示例
function myFunc(x,,,) {};
const myArr = [1,2,3,4,,,];
const myObj = {fname: John, age:50,,,};
尾部逗號自 2017 年 5 月起在所有現代瀏覽器中均受支援
| Chrome 58 | Edge 14 | Firefox 52 | Safari 10 | Opera 45 |
| 2017 年 4 月 | 2016 年 8 月 | 2017 年 3 月 | 2016 年 9 月 | 2017 年 5 月 |
