วันที่ 5 ของการเรียนรู้ JavaScript — เหตุการณ์สำคัญ 1
บทความนี้เขียนขึ้นเล็กน้อยตามบทช่วยสอน Leanpub - การทำความเข้าใจ ES6 สำหรับคำอธิบายและตัวอย่างเพิ่มเติม โปรดเยี่ยมชมเว็บไซต์
1. Block Bindings: แทนที่ IIFE โดยใช้ 'let'
เราสามารถแทนที่ IIFE และรับผลลัพธ์เดียวกันโดยการประกาศ letภายในลูป ในการโยงบล็อก เพื่อให้โค้ดสะอาดตายิ่งขึ้น เราสามารถใช้ letแทน var ได้ต่างจาก IIFE สิ่งที่ IIFE ทำคือการประกาศตัวแปรลูปเป็น var สำหรับฟังก์ชันภายในลูปสามารถรับและระงับการเชื่อมโยงใหม่ได้ในแต่ละครั้ง การประกาศ letfor ตัวแปรลูปจะทำให้งานสะดวกและง่ายขึ้น
ตัวอย่าง:
var nums = [];
สำหรับ (ให้ i = 0; i ‹ 10; i++) {
จำนวน .push (ฟังก์ชั่น () {
console.log(i);
});
}
nums.forEach (ฟังก์ชัน (หมายเลข) {
หมายเลข(); // ส่งออก 0 จากนั้น 1 และ 2 จนถึง 9
})
2. ประกาศระดับบล็อก: โซนตายชั่วคราว
การยกช่วยให้เราสามารถเข้าถึงตัวแปรก่อนที่จะประกาศ แต่น่าเสียดายที่สามารถใช้ได้เฉพาะกับตัวแปรที่ประกาศเป็น var เท่านั้น สำหรับตัวแปรที่ประกาศด้วย let หรือ constการยกเป็นสิ่งต้องห้ามและจะทำให้เกิดข้อผิดพลาด
เนื่องจากกลไกเบราว์เซอร์ JS วางการประกาศไว้ใน Temporal Dead Zone หรือ TDZ (สำหรับ let และ const) หากเราต้องการเข้าถึงตัวแปรใน TDZ มันจะเกิดข้อผิดพลาดรันไทม์ เราสามารถปรับมันให้เหมาะสมได้ด้วยการดำเนินการง่ายๆ โดยใช้ typeOf()
ตัวอย่าง:
if ( — -) {
console.log (ประเภทของสี); // อ้างอิงผิดพลาด!
ให้สี = “สีแดง”;
}
3. ค่าพารามิเตอร์เริ่มต้นของ ES6 ส่งผลต่อออบเจ็กต์อาร์กิวเมนต์
แม้ว่าจะเป็นไปไม่ได้ใน ES5 ที่จะได้รับผลลัพธ์ อาร์กิวเมนต์ ที่คาดหวังไว้โดยไม่ต้องใช้โหมด เข้มงวด แต่ ES6 มอบวิธีแก้ปัญหาที่มหัศจรรย์เพียงแค่ใช้พารามิเตอร์เริ่มต้นในฟังก์ชัน พารามิเตอร์เริ่มต้นแยกวัตถุ อาร์กิวเมนต์ ออกจากพารามิเตอร์ที่มีชื่อ
ตัวอย่าง:
ทดสอบฟังก์ชัน (หนึ่ง สอง = “b”) {
console.log(อาร์กิวเมนต์.ความยาว); // 1
console.log (หนึ่ง === อาร์กิวเมนต์ [0]); // จริง
console.log (สอง === อาร์กิวเมนต์ [1]); // เท็จ อาร์กิวเมนต์[1] ไม่ได้กำหนดไว้
แรก = “ค”;
วินาที = “ง”
console.log (แรก === อาร์กิวเมนต์ [0]); // เท็จ
console.log (วินาที === อาร์กิวเมนต์ [1]); // เท็จ
}
ทดสอบ("ก");
4. ฟังก์ชัน: การแทนที่ Apply() ด้วย The Spread Operator
เมื่อเราต้องการค้นหาค่าจากอาร์เรย์ขององค์ประกอบหลายรายการ การค้นหาผ่านอาร์เรย์ใน ES5 ค่อนข้างสับสน วิธีแก้ไขอย่างหนึ่งคือการใช้วิธีการ apply() แต่มันสร้างไวยากรณ์เพิ่มเติมและทำให้สาระสำคัญดั้งเดิมของโค้ดเสียไป ใน ES6 เราสามารถทำได้โดยใช้ ตัวดำเนินการสเปรด (…)
ตัวอย่าง-1 (ES5):
ให้ค่า = [170, 30, 23, 100];
console.log(Math.max.apply(คณิตศาสตร์, ค่า)); // 170
ตัวอย่าง-2 (ES6):
ให้ค่า = [170, 30, 23, 100];
console.log(Math.max(...ค่า)); // 170
5. ฟังก์ชั่นระดับบล็อก ES6 ในโหมดไม่เข้มงวด
ES6 ยังรองรับการประกาศอีกด้วย แต่ในโหมดที่ไม่เข้มงวด การประกาศจะถูกยกขึ้นสู่สภาพแวดล้อมส่วนกลาง แทนที่จะเป็นระดับบนสุดของระดับบล็อก
ตัวอย่าง:
ถ้าเป็นจริง) {
console.log (ประเภทของการทดสอบ); // "การทำงาน"
ทดสอบฟังก์ชัน() {
// โค้ดของฟังก์ชัน
}
ทดสอบ();
}
console.log (ประเภทของการทดสอบ); // "การทำงาน"
6. ฟังก์ชั่นลูกศรและอาร์เรย์
ES6 มีฟีเจอร์อันทรงพลังที่เรียกว่าฟังก์ชันลูกศร (=›) มันมาแทนที่บล็อกฟังก์ชั่นแบบยาวแบบดั้งเดิมและทำให้โค้ดสะอาดขึ้น ในการประมวลผล องค์ประกอบอาร์เรย์ [.., .., ..] ด้วยความช่วยเหลือของ ฟังก์ชันลูกศร(=›) จะง่ายกว่าการประกาศฟังก์ชันแบบเดิมมาก
ตัวอย่าง-1 (ฟังก์ชันดั้งเดิม):
ให้ค่า = [170, 30, 23, 100];
ผลลัพธ์ var =value.sort(function(a, b) {
ส่งคืน a - b;
});
ผลลัพธ์ // [23, 30, 100, 170]
ตัวอย่าง-2 (ฟังก์ชันลูกศร):
ให้ค่า = [170, 30, 23, 100];
ผลลัพธ์ var =values.sort((a, b) =› a - b);
ผลลัพธ์ // [23, 30, 100, 170]
7. การกำหนดการทำลายล้าง การแลกเปลี่ยนมูลค่า
การทำลายล้างเป็นเทคนิคในการทำลายโครงสร้างข้อมูลที่จำเป็น การใช้การทำลายโครงสร้างอาร์เรย์ การสลับค่าของอาร์เรย์จะง่ายกว่ามากโดยไม่มีตัวแปรตัวที่สาม เราสามารถทำลายโครงสร้างอาร์เรย์ได้โดยใช้ วงเล็บ []ที่ด้านซ้ายของ ตัวดำเนินการกำหนด (=) และตัวแปรอาร์เรย์ทางด้านขวา
ตัวอย่าง-1 (ใช้ตัวแปรที่สาม - ES5):
ให้ a = 1, b = 2, อุณหภูมิ;
อุณหภูมิ = เป็น;
a = b;
ข = อุณหภูมิ;
console.log(ก); // 2
console.log(ข); // 1
ตัวอย่าง-2 (การใช้การทำลายโครงสร้างอาร์เรย์ - ES6):
ให้ a = 1, b = 2;
[ a, b ] = [ b, a ];
console.log(ก); // 2
console.log(ข); // 1
8. '... รายการที่เหลือ' ทำให้การโคลนอาเรย์เป็นเรื่องง่าย
ไม่น่าเชื่อว่าการโคลนองค์ประกอบอาร์เรย์จะง่ายกว่าที่เราคิดใน ES6 ก่อนที่นักพัฒนา ES6 จะใช้วิธี concat() เพื่อโคลนองค์ประกอบอาร์เรย์ แต่จุดประสงค์ดั้งเดิมของฟังก์ชัน concat(),นั้นไม่ได้เป็นเช่นนั้นอย่างแน่นอน อาร์เรย์โคลน '... รายการที่เหลือ' มาถึงแล้ว เพียงกำหนดอาร์เรย์ให้กับตัวแปร [… rest items] จะเป็นการจำลองอาร์เรย์ทั้งหมดโดยไม่มีข้อผิดพลาด
ตัวอย่าง:
ให้ผลไม้= [ “มะม่วง”, “ส้ม”, “สับปะรด” ];
ให้ [ …clonedFruits ] = ผลไม้;
console.log(โคลนผลไม้); // [“มะม่วง”, “ส้ม”, “สับปะรด”]
9. คลาส: ES6 พลเมืองชั้นหนึ่ง
ฟังก์ชั่น First-Class Citizens หรือ First-Class ใน ES6 ทำให้ JavaScript มีเอกลักษณ์เฉพาะจากภาษาอื่นๆ คุณสมบัติพิเศษนี้ให้ค่าที่คาดหวังให้เป็น -
i) ส่งผ่านไปยังฟังก์ชัน
ii) ส่งคืนจากฟังก์ชันและ
iii) กำหนดให้กับตัวแปร
ตัวอย่าง:
การทดสอบฟังก์ชั่น (demoClass) {
กลับ demoClass ใหม่ ();
}
ให้ x = ทดสอบ (คลาส {
พูดอะไรสักอย่าง() {
console.log("อรุณสวัสดิ์!");
}
});
x.saySomething();
10. คลาส: คุณสมบัติตัวเข้าถึง
คุณสมบัติของคลาสควรถูกสร้างขึ้นภายในตัวสร้างของคลาสนั้นเสมอ ใน ES6 อนุญาตให้กำหนดคุณสมบัติตัวเข้าถึงภายในคลาสต้นแบบได้ คลาสใช้เมธอด getterและ setter เพื่อทำให้การเข้าถึงคุณสมบัติง่ายขึ้น
ตัวอย่าง:
วิธีการ Object.getOwnPropertyDescriptor() ส่งคืนตัวอธิบายคุณสมบัติสำหรับคุณสมบัติของตัวเอง (อ้างอิง: MDN)
คลาส CustomHTMLLElement {
ตัวสร้าง (องค์ประกอบ) {
นี้องค์ประกอบ = องค์ประกอบ;
}
รับ html() {
ส่งคืน this.element.innerHTML;
}
ตั้งค่า html (ค่า) {
this.element.innerHTML = ค่า;
}
}
var descriptor = Object.getOwnPropertyDescriptor (CustomHTMLElement.prototype, “html”);
console.log("get" ในตัวอธิบาย); // จริง
console.log("set" ในตัวอธิบาย); // จริง
console.log(คำอธิบาย.นับได้); // เท็จ
