ECMAScript 2017
หลักการตั้งชื่อ JavaScript เริ่มต้นด้วย ES1, ES2, ES3, ES5 และ ES6
แต่ ECMAScript 2016 และ 2017 ไม่ได้เรียกว่า ES7 และ ES8
ตั้งแต่ปี 2016 มีการตั้งชื่อเวอร์ชันใหม่ตามปี (ECMAScript 2016 / 2017 / 2018)
คุณลักษณะใหม่ใน ECMAScript 2017
บทนี้จะแนะนำคุณลักษณะใหม่ใน ECMAScript 2017:
- JavaScript การแพ็ดสตริง
- JavaScript Object.entries
- JavaScript Object.values
- ฟังก์ชัน async ของ JavaScript
- JavaScript แชร์หน่วยความจำ
JavaScript String Padding
ECMAScript 2017 ได้เพิ่มวิธีสตริงสองวิธี: padStart
และpadEndเพื่อรองรับการเติมที่จุดเริ่มต้นและส่วนท้ายของสตริง
ตัวอย่าง
let str = "5";
str = str.padStart(4,0);
// result is 0005
ตัวอย่าง
let str = "5";
str = str.padEnd(4,0);
// result is 5000
ไม่รองรับการแพ็ดสตริงใน Internet Explorer
Firefox และ Safari เป็นเบราว์เซอร์แรกที่รองรับการเติมสตริง JavaScript:
| Chrome 57 | Edge 15 | Firefox 48 | Safari 10 | Opera 44 |
| Mar 2017 | Apr 2017 | Aug 2016 | Sep 2016 | Mar 2017 |
รายการวัตถุ JavaScript
ECMAScript 2017 เพิ่มObject.entriesวิธีการใหม่ให้กับวัตถุ
Object.entries() วิธีการส่งกลับอาร์เรย์ของคู่คีย์/ค่าในวัตถุ:
ตัวอย่าง
const person = {
firstName : "John",
lastName : "Doe",
age : 50,
eyeColor : "blue"
};
document.getElementById("demo").innerHTML =
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 + "
";
}
Object.entries() ยังทำให้ง่ายต่อการแปลงวัตถุเป็นแผนที่:
ตัวอย่าง
const fruits = {Bananas:300, Oranges:200, Apples:500};
const myMap = new Map(Object.entries(fruits));
Chrome และ Firefox เป็นเบราว์เซอร์แรกที่รองรับ
Object.entries:
| Chrome 47 | Edge 14 | Firefox 47 | Safari 10.1 | Opera 41 |
| Jun 2016 | Aug 2016 | Jun 2016 | Mar 2017 | Oct 2016 |
ค่าวัตถุ JavaScript
Object.valuesคล้ายกับObject.entriesแต่ส่งคืนอาร์เรย์มิติเดียวของค่าอ็อบเจ็กต์:
ตัวอย่าง
const person = {
firstName : "John",
lastName : "Doe",
age : 50,
eyeColor : "blue"
};
document.getElementById("demo").innerHTML =
Object.values(person);
Firefox และ Chrome เป็นเบราว์เซอร์แรกที่รองรับ
Object.values:
| Chrome 54 | Edge 14 | Firefox 47 | Safari 10.1 | Opera 41 |
| Oct 2016 | Aug 2016 | Jun 2016 | Mar 2017 | Oct 2016 |
ฟังก์ชัน JavaScript Async
รอการหมดเวลา
async function myDisplay() {
let myPromise = new Promise(function(myResolve, myReject) {
setTimeout(function() { myResolve("I love You !!"); }, 3000);
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
Firefox และ Chrome เป็นเบราว์เซอร์แรกที่รองรับฟังก์ชัน async JavaScript:
| Chrome 55 | Edge 15 | Firefox 52 | Safari 11 | Opera 42 |
| Dec 2016 | Apr 2017 | Mar 2017 | Sep 2017 | Dec 2016 |