คู่มือ ecmascript6 ด่วนเริ่มต้น

การแนะนำ

Ecmascript 6 เป็นมาตรฐานต่อไปสำหรับ JavaScript และอยู่ในการพัฒนาอย่างรวดเร็ว เป้าหมายของ ECMASCRIPT 6 คือการเปิดใช้งาน JavaScript เพื่อใช้ในการเขียนแอปพลิเคชันที่ซับซ้อนไลบรารีฟังก์ชั่นและเครื่องกำเนิดไฟฟ้าอัตโนมัติ (เครื่องกำเนิดรหัส) เบราว์เซอร์ล่าสุดบางส่วนรองรับไวยากรณ์ของ ECMASCRIPT 6 ECMASCRIPT 6 ปัจจุบันเป็นมาตรฐานอุตสาหกรรมและความนิยมของมันเร็วกว่า ES5 มาก เหตุผลหลักคือเบราว์เซอร์ที่ทันสมัยรองรับ ES6 ได้อย่างรวดเร็วโดยเฉพาะเบราว์เซอร์ Chrome และ Firefox ซึ่งรองรับคุณสมบัติส่วนใหญ่ใน ES6 แล้ว

1. ปล่อยให้ const และบล็อกขอบเขต

ให้อนุญาตให้สร้างขอบเขตระดับบล็อก ES6 แนะนำให้ใช้ฟังก์ชั่นเพื่อกำหนดตัวแปรแทน VAR:

 var a = 2; {ให้ a = 3; console.log (a); // 3} console.log (a); // 2

อีกวิธีหนึ่งในการประกาศตัวแปรที่ใช้ได้ในขอบเขตระดับบล็อกคือ const ซึ่งสามารถประกาศค่าคงที่ ใน ES6 ค่าคงที่ที่ประกาศโดย const นั้นคล้ายกับตัวชี้ซึ่งชี้ไปที่การอ้างอิงซึ่งหมายความว่า "const" นี้ไม่คงที่เช่น:

 {const arr = [5,6]; arr.push (7); console.log (arr); // [5,6,7] arr = 10; // typeerror}

มีบางจุดที่ควรทราบ:

ให้คำหลักประกาศตัวแปรไม่มีคุณสมบัติการยก

การประกาศ Let and Const นั้นใช้ได้เฉพาะในบล็อกที่ใกล้ที่สุด (ภายในวงเล็บปีกกา)

เมื่อใช้การประกาศ const คงที่ให้ใช้ตัวแปรตัวพิมพ์ใหญ่เช่น: capital_casing

const จะต้องได้รับมอบหมายเมื่อประกาศ

2. ฟังก์ชั่นลูกศร

ใน ES6 ฟังก์ชั่นลูกศรเป็นรูปแบบสั้น ๆ ของฟังก์ชั่นโดยใช้วงเล็บเพื่อห่อพารามิเตอร์ตามด้วย => ตามด้วยฟังก์ชั่นร่างกาย:

 var getPrice = function () {return 4.55;}; // การใช้งานด้วย Arrow functionVar getPrice = () => 4.55;

ควรสังเกตว่าฟังก์ชั่น GetPrice Arrow ในเกาลัดด้านบนใช้ร่างกายฟังก์ชั่นที่กระชับซึ่งไม่จำเป็นต้องมีคำสั่งเก็บรักษา เกาลัดด้านล่างใช้ร่างกายฟังก์ชั่นปกติ:

 ให้ arr = ['Apple', 'Banana', 'Orange']; ปล่อยให้อาหารเช้า = arr.map (ผลไม้ => {return fruit + 's';}); console.log (อาหารเช้า); // แอปเปิ้ลกล้วยส้ม

แน่นอนฟังก์ชั่นลูกศรไม่เพียง แต่เกี่ยวกับการสร้างรหัสให้กระชับ แต่ในฟังก์ชั่นการเชื่อมโยงนี้ชี้ไปที่วัตถุเองเสมอ สำหรับรายละเอียดคุณสามารถดูเกาลัดต่อไปนี้:

 ฟังก์ชันบุคคล () {this.age = 0; setInterval (ฟังก์ชั่น Growup () {// ในโหมด non-strict, ฟังก์ชั่น Growup () ชี้ไปที่วัตถุหน้าต่าง this.age ++;}, 1000);} var person = บุคคลใหม่ ();

เรามักจะต้องใช้ตัวแปรเพื่อบันทึกสิ่งนี้แล้วอ้างอิงในฟังก์ชั่นการเติบโต:

 ฟังก์ชันบุคคล () {var self = this; self.age = 0; setInterval (ฟังก์ชั่น Growup () {self.age ++;}, 1000);}

และการใช้ฟังก์ชั่นลูกศรสามารถบันทึกปัญหานี้ได้:

 ฟังก์ชันบุคคล () {this.age = 0; setInterval (() => {// | สิ่งนี้ | ชี้ไปที่บุคคลวัตถุ this.age ++;}, 1,000);} var person = บุคคลใหม่ ();

3. ค่าพารามิเตอร์ฟังก์ชันค่าเริ่มต้น

ES6 อนุญาตให้คุณตั้งค่าเริ่มต้นสำหรับพารามิเตอร์ฟังก์ชัน:

 ให้ getFinalPrice = (ราคา, ภาษี = 0.7) => ราคา + ราคา * ภาษี; getFininalPrice (500); // 850

4. ตัวดำเนินการสเปรด/ส่วนที่เหลือ

ตัวดำเนินการสเปรด / ส่วนที่เหลือหมายถึง ... ไม่ว่าจะเป็นสเปรดหรือส่วนที่เหลือขึ้นอยู่กับบริบท

เมื่อใช้ในตัววนซ้ำมันเป็นตัวดำเนินการสเปรด:

 ฟังก์ชั่น foo (x, y, z) {console.log (x, y, z);} ให้ arr = [1,2,3]; foo (... arr); // 1 2 3

เมื่อใช้สำหรับการถ่ายโอนอาร์กิวเมนต์ฟังก์ชั่นมันเป็นตัวดำเนินการ REST:

 ฟังก์ชั่น foo (... args) {console.log (args);} foo (1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

5. การขยายคำศัพท์

ES6 อนุญาตให้ประกาศไวยากรณ์ตัวย่อเมื่อประกาศตัวอักษรวัตถุเพื่อเริ่มต้นวิธีการกำหนดวิธีการของตัวแปรและฟังก์ชั่นแอตทริบิวต์และอนุญาตให้ดำเนินการคำนวณในคุณสมบัติของวัตถุ:

 ฟังก์ชั่น getCar (make, model, value) {return {// ตัวแปรตัวย่อ make, // เทียบเท่าที่จะทำ: ทำโมเดล, // เทียบเท่ากับโมเดล: ค่าโมเดล, // เทียบเท่ากับค่า: ค่า // แอตทริบิวต์สามารถคำนวณได้โดยใช้การแสดงออก }};} ให้ car = getCar ('Barret', 'Lee', 40000); // เอาท์พุท: {// make: 'barret', // model: 'lee', // value: 40000, // makebarret: true, // depreciate: function () //}

6. ตัวอักษรไบนารีและแปด

ES6 รองรับตัวอักษรไบนารีและแปดค่าซึ่งสามารถแปลงเป็นค่าไบนารีได้โดยการเพิ่ม 0o หรือ 0o ด้านหน้าของจำนวน:

 ปล่อยให้ไข่ = 0o10; console.log (รูปไข่); // 8 ให้ bvalue = 0b10; // ใช้ `0b` หรือ` 0b` console.log (bvalue); // 2

7. การทำลายวัตถุและอาร์เรย์

การสร้างโครงสร้างสามารถหลีกเลี่ยงการสร้างตัวแปรระดับกลางเมื่อการกำหนดวัตถุ:

 function foo () {return [1,2,3];} ให้ arr = foo (); // [1,2,3] ให้ [a, b, c] = foo (); console.log (a, b, c); // 1 2 3 ฟังก์ชั่นแถบ () {return {x: 4, y: 5, z: 6};} ให้ {x: x, y: y, z: z} = bar (); console.log (x, y, z); // 4 5 6

8. วัตถุซุปเปอร์คลาส

ES6 อนุญาตให้ใช้วิธี Super ในวัตถุ:

 var parent = {foo () {console.log ("สวัสดีจากผู้ปกครอง"); }} var child = {foo () {super.foo (); console.log ("สวัสดีจากเด็ก"); }} Object.SetPrototypeof (เด็ก, ผู้ปกครอง); child.foo (); // สวัสดีจากผู้ปกครอง // สวัสดีจากเด็ก

9. ไวยากรณ์เทมเพลตและตัวคั่น

มีวิธีที่กระชับมากในการรวบรวมกลุ่มและตัวแปรใน ES6

$ {... } ใช้เพื่อแสดงผล

`เป็นตัวคั่น

 ให้ user = 'barret'; console.log (`hi $ {user}!`); // สวัสดี Barret!

10. สำหรับ ... จาก Vs สำหรับ ... ใน

สำหรับ ... ของใช้เพื่อสำรวจตัววนซ้ำเช่นอาร์เรย์:

 ให้ชื่อเล่น = ['di', 'boo', 'punkeye']; ชื่อเล่น. size = 3; สำหรับ (ให้ชื่อเล่นของชื่อเล่น) {console.log (ชื่อเล่น);} ผลลัพธ์: di, boo, punkeyee

สำหรับ ... ในใช้ในการสำรวจคุณสมบัติในวัตถุ:

 ให้ชื่อเล่น = ['di', 'boo', 'punkeye']; ชื่อเล่น. size = 3; สำหรับ (ให้ชื่อเล่นในชื่อเล่น) {console.log (ชื่อเล่น);} ผลลัพธ์: 0, 1, 2, ขนาด

11. แผนที่และ beakmap

มีชุดข้อมูลข้อมูลใหม่สองชุดใน ES6: MAP และ BEATMAP ในความเป็นจริงแต่ละวัตถุสามารถถือได้ว่าเป็นแผนที่

วัตถุประกอบด้วยคู่คีย์-วัลหลายคู่ ในแผนที่สามารถใช้ประเภทใดก็ได้เป็นกุญแจสำคัญของวัตถุเช่น:

 var mymap = แผนที่ใหม่ (); var keystring = "สตริง", keyObj = {}, keyfunc = function () {}; // ตั้งค่า mymap.set (keystring, "ค่าเชื่อมโยงกับ 'A String'"); mymap.set (keyobj, "ค่าเชื่อมโยงกับ keyobj"); mymap.set (keyfunc, "ค่าเชื่อมโยงกับ keyfunc"); mymap.size; // 3 // รับค่า mymap.get (keystring); // "ค่าเชื่อมโยงกับ 'A String'" mymap.get (keyobj); // "ค่าเชื่อมโยงกับ 'A String'" mymap.get (keyobj); // "ค่าเชื่อมโยงกับ 'A String'" mymap.get (keyobj); // "Value Associate กับ KeyObj" mymap.get (keyfunc); // "ค่าที่เกี่ยวข้องกับ keyfunc"

ความอ่อนแอ

WeakMap เป็นแผนที่ แต่กุญแจทั้งหมดเป็นข้อมูลอ้างอิงที่อ่อนแอซึ่งหมายความว่าสิ่งต่าง ๆ ใน WeakMap ไม่ได้รับการพิจารณาเมื่อรวบรวมขยะและคุณไม่ต้องกังวลเกี่ยวกับการรั่วไหลของหน่วยความจำเมื่อใช้งาน

สิ่งที่ควรทราบอีกอย่างคือคีย์ทั้งหมดของ Weakmap จะต้องเป็นวัตถุ มีเพียงสี่วิธีเท่านั้น: ลบ (คีย์), มี (คีย์), รับ (คีย์) และชุด (คีย์, val):

 ให้ w = new beatmap (); w.set ('a', 'b'); // uncaught typeError: ค่าไม่ถูกต้องใช้เป็นคีย์แผนที่อ่อนแอ var o1 = {}, o2 = function () {}, o3 = หน้าต่าง; W.Set (O1, 37); W.Set (O2, "Azerty"); W.Set (O3, ไม่ได้กำหนด); w.get (O3); // undefined เพราะนั่นคือค่าที่กำหนด w.has (O1); // Truew.delete (O1); W.HAS (O1); // เท็จ

12. ตั้งค่าและอ่อนแอ

วัตถุที่ตั้งไว้คือชุดของค่าที่ไม่ได้ทำซ้ำและค่าที่ซ้ำกันจะถูกละเว้น ประเภทค่าอาจเป็นแบบดั้งเดิมและประเภทอ้างอิง:

 ให้ myset = ชุดใหม่ ([1, 1, 2, 2, 3, 3]); myset.size; // 3myset.has (1); // truemyset.add ('strings'); myset.add ({a: 1, b: 2});

คุณสามารถสำรวจวัตถุที่ตั้งค่าผ่าน foreach และสำหรับ ... ของ:

 myset.foreach ((รายการ) => {console.log (รายการ); // 1 // 2 // 3 // 'สตริง' // วัตถุ {a: 1, b: 2}}); สำหรับ (ให้ค่าของ mySet) {console.log (ค่า); // 1 // 2 // 3 // 'Strings' // Object {A: 1, B: 2}}

ชุดยังมีวิธีการลบ () และ clear ()

ความอ่อนแอ

เช่นเดียวกับ beakmap วัตถุ Weakset ช่วยให้คุณสามารถบันทึกการอ้างอิงที่อ่อนแอไปยังวัตถุในคอลเลกชันและวัตถุใน weakset จะได้รับอนุญาตให้ปรากฏเพียงครั้งเดียว:

 var ws = new beapset (); var obj = {}; var foo = {}; ws.add (หน้าต่าง); ws.add (obj); ws.has (หน้าต่าง); // truews.has (foo); // FALSE, FOO ยังไม่ได้รับการเพิ่มได้สำเร็จ ws.delete (หน้าต่าง); // ลบวัตถุหน้าต่างจากการรวมกัน ws.has (หน้าต่าง); // เท็จวัตถุหน้าต่างถูกลบ

13. ชั้นเรียน

มีไวยากรณ์คลาสใน ES6 เป็นที่น่าสังเกตว่าชั้นเรียนที่นี่ไม่ใช่แบบจำลองการสืบทอดวัตถุใหม่มันเป็นเพียงการแสดงออกของน้ำตาลวากยสัมพันธ์ของห่วงโซ่ต้นแบบ

วิธีการและคุณสมบัติของตัวสร้างถูกกำหนดไว้ในฟังก์ชั่นโดยใช้คำหลักคงที่:

 งานคลาส {constructor () {console.log ("งานอินสแตนซ์!"); } showId () {console.log (23); } loadall แบบคงที่ () {console.log ("โหลดงานทั้งหมด .. "); }} console.log (typeof task); // task functionlet = task ใหม่ (); // "งานอินสแตนซ์!" task.showid (); // 23task.loadall (); // "โหลดงานทั้งหมด .. "

มรดกและ supersets ในชั้นเรียน:

 รถคลาส {constructor () {console.log ("การสร้างรถใหม่"); }} คลาส Porsche ขยายรถ {constructor () {super (); console.log ("การสร้างปอร์เช่"); }} ให้ c = new Porsche (); // การสร้างรถใหม่ // การสร้าง Porsche

ขยายช่วยให้คลาสย่อยสามารถสืบทอดคลาสพาเรนต์ ควรสังเกตว่าฟังก์ชั่น Super () จะต้องดำเนินการในฟังก์ชันตัวสร้างของคลาสย่อย

แน่นอนคุณยังสามารถเรียกวิธีการของคลาสแม่ในวิธีการย่อยเช่น super.parentmethodname ()

อ่านเพิ่มเติมเกี่ยวกับชั้นเรียนที่นี่

มีบางจุดที่ควรค่าแก่การสังเกต:

การประกาศของชั้นเรียนจะไม่ถูกยกขึ้น หากคุณต้องการใช้คลาสคุณต้องกำหนดก่อนที่จะใช้มิฉะนั้นจะมีข้อผิดพลาด ReferenceRror

การกำหนดฟังก์ชั่นในคลาสไม่จำเป็นต้องใช้คำหลักฟังก์ชัน

14. สัญลักษณ์

สัญลักษณ์เป็นประเภทข้อมูลใหม่ที่มีค่าไม่ซ้ำกันและไม่เปลี่ยนรูป จุดประสงค์ของสัญลักษณ์ที่เสนอใน ES6 คือการสร้างตัวระบุที่ไม่ซ้ำกัน แต่คุณไม่สามารถเข้าถึงตัวระบุนี้ได้:

 var sym = สัญลักษณ์ ("คำอธิบายเพิ่มเติมบางอย่าง"); console.log (typeof sym); // เครื่องหมาย

โปรดทราบว่าผู้ให้บริการใหม่ไม่สามารถใช้ต่อหน้าสัญลักษณ์ได้

หากใช้เป็นคุณสมบัติของวัตถุคุณสมบัตินี้จะไม่สามารถใช้งานได้:

 var o = {val: 10, [สัญลักษณ์ ("สุ่ม")]: "ฉันเป็นสัญลักษณ์",}; console.log (Object.getOwnPropertyNames (O)); // val

หากคุณต้องการรับคุณสมบัติสัญลักษณ์วัตถุคุณต้องใช้ Object.GetOwnPropertySymbols (O)

15. ตัววนซ้ำ

ตัววนซ้ำอนุญาตให้เข้าถึงองค์ประกอบของชุดข้อมูลทุกครั้งที่มีการเข้าถึงองค์ประกอบ เมื่อตัวชี้ชี้ไปที่องค์ประกอบสุดท้ายของชุดข้อมูลตัววนซ้ำจะออก มันให้ฟังก์ชั่นถัดไป () เพื่อทำซ้ำตามลำดับซึ่งส่งคืนวัตถุที่มีแอตทริบิวต์ที่ทำและค่า

ใน ES6 คุณสามารถตั้งค่า Traverser เริ่มต้นสำหรับวัตถุผ่าน Symbol.iterator ไม่ว่าเมื่อใดที่วัตถุจำเป็นต้องสำรวจวิธี @@ iterator ที่ดำเนินการวิธี @@ iterator สามารถส่งคืนตัววนซ้ำเพื่อรับค่า

อาร์เรย์เป็นตัววนซ้ำโดยค่าเริ่มต้น:

 var arr = [11,12,13]; var itr = arr [symbol.iterator] (); itr.next (); // {value: 11, ทำ: false} itr.next (); // {value: 12, ทำ: false} itr.next (); // {value: 13, ทำ: false} itr.next (); // {ค่า: ไม่ได้กำหนดเสร็จแล้ว: จริง}

คุณสามารถปรับแต่งตัววนซ้ำสำหรับวัตถุผ่าน [symbol.iterator] ()

16. เครื่องกำเนิดไฟฟ้า

ฟังก์ชั่นเครื่องกำเนิดไฟฟ้าเป็นคุณสมบัติใหม่ของ ES6 ซึ่งอนุญาตให้ฟังก์ชั่นส่งคืนวัตถุที่สามารถเคลื่อนที่ได้เพื่อสร้างค่าหลายค่า

ในการใช้งานคุณจะเห็น * ไวยากรณ์และผลผลิตคำหลักใหม่:

 ฟังก์ชั่น *infinitenumbers () {var n = 1; ในขณะที่ (จริง) {ให้ N ++; }} var numbers = infinitenumbers (); // ส่งคืนหมายเลขวัตถุที่วนซ้ำ next (); // {value: 1, ทำ: false} numbers.next (); // {value: 2, ทำ: false} numbers.next (); // {value: 3, DONE: FALSE}

ทุกครั้งที่มีการดำเนินการผลตอบแทนค่าที่ส่งคืนจะกลายเป็นค่าถัดไปของตัววนซ้ำ

17. สัญญา

ES6 ได้รับการสนับสนุนจากคำสัญญา สัญญาคือวัตถุที่รอการดำเนินการแบบอะซิงโครนัส เมื่อการดำเนินการเสร็จสมบูรณ์รัฐจะได้รับการแก้ไขหรือปฏิเสธ

 var p = สัญญาใหม่ (ฟังก์ชั่น (แก้ไข, ปฏิเสธ) {ถ้า (/ * เงื่อนไข */) {// เติมเต็มให้สำเร็จการแก้ไข (/ * ค่า */);} else {// ข้อผิดพลาด, ปฏิเสธปฏิเสธ (/ * เหตุผล */);}});

แต่ละสัญญามีวิธีการที่แล้วยอมรับพารามิเตอร์สองตัว ประการแรกคือการจัดการการโทรกลับของสถานะที่ได้รับการแก้ไขและอีกอันคือการจัดการการโทรกลับของสถานะที่ถูกปฏิเสธ:

 p.then ((val) => console.log ("สัญญาแก้ไข", val), (err) => console.log ("สัญญาปฏิเสธ", err));

ข้างต้นเป็นการแนะนำการเริ่มต้นอย่างรวดเร็วของ Ecmascript 6 ที่รวบรวมไว้สำหรับทุกคน เพื่อนที่ต้องการมันสามารถเรียนรู้และอ้างถึงมัน