ECMAScript 6 - 10 คุณสมบัติใหม่ที่ยอดเยี่ยม
คุณรู้หรือไม่ว่า JavaScript (พร้อมด้วย JScript และ ActionScript) เป็นการใช้งานข้อกำหนดภาษาสคริปต์ฝั่งไคลเอ็นต์ทั่วไปที่เรียกว่า ECMAScript เพื่อให้นิยามที่น่ารังเกียจนี้น่าสนใจยิ่งขึ้นเราสามารถพูดได้ว่า ECMAScript (หรือ ECMA-262 อย่างเป็นทางการ) คือ มาตรฐานที่กำหนดวิธีที่เราใช้ JavaScript และสิ่งที่เราสามารถทำได้ กับมัน.
ภาษารุ่นที่ 6 รุ่นล่าสุด ECMAScript 2015 (หรือ ES6) น่าจะเป็นการอัปเดตที่สำคัญที่สุดนับตั้งแต่รุ่นแรกในปี 1997 เป้าหมายหลักของรุ่นล่าสุดคือการให้การสนับสนุนที่ดีกว่าสำหรับการสร้างแอปพลิเคชันและห้องสมุดขนาดใหญ่ ซึ่งหมายความว่าไวยากรณ์ที่เป็นผู้ใหญ่มากขึ้นทางลัดใหม่ ๆ เพื่อให้การเขียนโปรแกรมง่ายขึ้นและวิธีการใหม่คำหลักประเภทข้อมูลและการปรับปรุงอื่น ๆ อีกมากมาย.
เอกสาร ES6 มีมากมายหากคุณต้องการอ่านมากคุณสามารถดาวน์โหลดรายละเอียดทั้งหมดได้จากเว็บไซต์ของ ECMA International ในโพสต์นี้เราจะดูคุณสมบัติ 10 ที่ได้รับการคัดเลือกแม้ว่า ES6 จะมีอะไรให้มากกว่านี้ หากคุณต้องการทดลองใช้ซอฟแวร์ ES6 เป็นสถานที่ที่น่าสนใจและคุณสามารถหาตัวอย่างโค้ดบางส่วนได้ที่นั่น.
รองรับ ECMAScript 6
ผู้ขายเบราว์เซอร์ค่อยๆเพิ่มการสนับสนุนสำหรับคุณสมบัติของ ECMAScript 6 คุณสามารถค้นหาตารางความเข้ากันได้ที่ยอดเยี่ยมที่นี่เกี่ยวกับการสนับสนุนเบราว์เซอร์และคอมไพเลอร์สำหรับคุณสมบัติใหม่.
หากคุณมีความสนใจในการสนับสนุน ES6 ใน Node.js ตรวจสอบเอกสารที่นี่.
แม้ว่าคุณสมบัติบางอย่างอาจไม่รองรับ แต่เราสามารถใช้ transpilers เช่น Babel เพื่อ transpile รหัส ES6 ของเราเป็น ES5 มีปลั๊กอิน Grunt ที่ยอดเยี่ยมสำหรับ Babel, ปลั๊กอิน ES6 ที่น่ากลัวมากมายสำหรับ Grunt, และปลั๊กอิน Gulp-Babel ที่น่าตื่นตาตื่นใจออกมี, ดังนั้นโชคดีที่เรามีตัวเลือกมากมาย.
วิธีนี้เราสามารถเริ่มใช้ไวยากรณ์และความสามารถที่ได้รับการปรับปรุงในขณะที่เราไม่ต้องกังวลเกี่ยวกับปัญหาความสามารถในการคำนวณ ตอนนี้เรามาดูคุณสมบัติต่างๆ.
1. ใหม่ ปล่อย คำหลัก
ES6 แนะนำใหม่ ปล่อย คำหลักที่ช่วยให้เราสามารถประกาศตัวแปรท้องถิ่นในขอบเขตของบล็อกเช่นคำสั่งการแสดงออกหรือฟังก์ชั่น (ภายใน n) ตัวอย่างเช่นเราสามารถประกาศ สำหรับ วนรอบในวิธีต่อไปนี้จากนั้นใช้ชื่อตัวแปรเดิมอีกครั้ง (เนื่องจากขอบเขตจะ จำกัด อยู่ที่ สำหรับ ห่วง) ภายในถัดไป ถ้า คำสั่ง:
สำหรับ (ให้ i = 0; i < myArray.length; i++) // Do something inside the block if (x > 0 && x! = y) // เราใช้ "i" let i = x * y อีกครั้ง
ใช้ ปล่อย คำหลักนำไปสู่รหัสที่สะอาดและใช้งานได้มากกว่า ความแตกต่างระหว่าง ปล่อย และ var อยู่ในขอบเขตตัวอย่างเช่นตัวแปรท้องถิ่นที่กำหนดโดย var สามารถใช้คีย์เวิร์ดในฟังก์ชันการล้อมรอบทั้งหมดในขณะที่ตัวแปรกำหนดไว้ ปล่อย ทำงานเฉพาะในบล็อก (ย่อย) ของตนเอง. ปล่อย ยังสามารถใช้ได้ทั่วโลกในกรณีนี้มันทำงานแบบเดียวกับ var. แน่นอนใน ES6 เรายังคงสามารถใช้งานได้ var ถ้าเราต้องการ.
2. ใหม่ const คำหลัก
ใหม่ const คำหลักทำให้สามารถประกาศค่าคงที่หรือที่เรียกว่าตัวแปรที่ไม่เปลี่ยนรูปซึ่งเราไม่สามารถมอบหมายเนื้อหาใหม่ในภายหลังได้.
const MY_CONST = 12; console.log (MY_CONST); // 12 MY_CONST = 16; // ข้อผิดพลาดเงียบเนื่องจากเราไม่สามารถกำหนดค่าใหม่ให้กับค่าคงที่ได้อีกครั้ง
ตัวแปรที่ไม่เปลี่ยนรูปไม่ได้เปลี่ยนรูปแบบใน ECMAScript 6 แม้ว่าจะเป็นวัตถุที่มีค่าคงที่เราสามารถเปลี่ยนค่าคุณสมบัติและวิธีการในภายหลังได้ เช่นเดียวกับองค์ประกอบของอาร์เรย์.
const MY_CONSTANT = myProperty: 6; console.log (MY_CONSTANT.myProperty); // 6 MY_CONSTANT.myProperty = 18; console.log (MY_CONSTANT.myProperty); // 18 const OTHER_CONSTANT = [12, 14, 16]; console.log (OTHER_CONSTANT [0]); // 12 OTHER_CONSTANT [0] = 22; console.log (OTHER_CONSTANT [0]); // 22
เรายังไม่สามารถกำหนดค่าใหม่ให้กับวัตถุ MY_CONSTANT โดยตรงในตัวอย่างโค้ดข้างต้นซึ่งหมายความว่าเราไม่สามารถเปลี่ยนชื่อของคุณสมบัติและวิธีการและยังไม่สามารถเพิ่มใหม่หรือลบค่าที่มีอยู่ได้ดังนั้นเราจึงไม่สามารถทำ สิ่งต่อไปนี้:
MY_CONSTANT = newProperty: 18; console.log (MY_CONSTANT.newProperty); // ข้อผิดพลาด
3. ฟังก์ชั่นลูกศร
ECMAScript 6 อำนวยความสะดวกในการเขียนของเรา ฟังก์ชั่นที่ไม่ระบุชื่อ, ในขณะที่เราสามารถละเว้น ฟังก์ชัน คำหลัก เราจำเป็นต้องใช้ไวยากรณ์ใหม่เท่านั้น ฟังก์ชั่นลูกศร, ตั้งชื่อตามเครื่องหมายลูกศร => (ลูกศรอ้วน) ซึ่งให้ทางลัดที่ยอดเยี่ยมแก่เรา.
// 1. หนึ่งพารามิเตอร์ใน ES6 ให้ผลรวม = (a, b) => a + b; // ใน ES5 var sum = function (a, b) return a + b; ; // 2. ไม่มีพารามิเตอร์ใน ES6 ให้ randomNum = () => Math.random (); // ใน ES5 var randomNum = function () return Math.random (); ; // 3. ไม่มีการส่งคืนใน ES6 ให้ message = (name) => alert ("Hi" + name + "!"); // ใน ES5 var message = function (yourName) alert ("Hi" + yourName + "!"); ; มีความแตกต่างที่สำคัญระหว่างฟังก์ชั่นปกติและลูกศรนั่นคือฟังก์ชั่นลูกศรไม่ได้รับ นี้ ค่าโดยอัตโนมัติเช่นฟังก์ชั่นที่กำหนดด้วย ฟังก์ชัน คำหลักทำ ฟังก์ชั่นลูกศร ผูกศัพท์ นี้ ค่าให้กับขอบเขตปัจจุบัน ซึ่งหมายความว่าเราสามารถนำมาใช้ซ้ำได้อย่างง่ายดาย นี้ คำหลักในฟังก์ชั่นภายใน ใน ES5 สามารถทำได้โดยแฮ็คต่อไปนี้เท่านั้น:
// ES5 Hack เพื่อใช้คำสำคัญ "this" ในฟังก์ชันภายใน … addAll: function addAll (ส่วน) var self = this; _.each (ชิ้นส่วนฟังก์ชั่น (ชิ้น) self.add (ชิ้น);); , … // ES6 ฟังก์ชั่นภายในเดียวกันตอนนี้สามารถใช้ "this" ของตัวเอง … addAll: ฟังก์ชั่น addAll (ชิ้น) _.each (ชิ้นส่วนชิ้น => this.add (ชิ้น)); , …
โค้ดด้านบนนั้นมาจาก Mozilla Hacks
4. ใหม่ กระจาย ผู้ประกอบการ
ใหม่ กระจาย ตัวดำเนินการถูกทำเครื่องหมายด้วย 3 จุด (…) และเราสามารถใช้เพื่อลงชื่อสถานที่ของรายการที่คาดหวังหลายรายการ กรณีการใช้งานที่พบบ่อยที่สุดอย่างหนึ่งของตัวดำเนินการสเปรดคือการแทรกองค์ประกอบของอาร์เรย์ลงในอาร์เรย์อื่น:
ให้ myArray = [1, 2, 3]; ให้ newArray = [… myArray, 4, 5, 6]; console.log (newArray); // 1, 2, 3, 4, 5, 6
เรายังสามารถใช้ประโยชน์จาก กระจาย ผู้ประกอบการในการเรียกใช้ฟังก์ชั่นที่เราต้องการที่จะผ่านในการขัดแย้งจากอาร์เรย์:
ให้ myArray = [1, 2, 3]; ผลรวมของฟังก์ชัน (a, b, c) return a + b + c; console.log (ผลรวม (… myArray)); // 6
กระจาย ตัวดำเนินการค่อนข้างยืดหยุ่นเนื่องจากสามารถใช้งานได้หลายครั้งในอาเรย์หรือการเรียกใช้ฟังก์ชันเดียวกัน.
5. ค่าเริ่มต้นสำหรับพารามิเตอร์และพารามิเตอร์ที่เหลือใหม่
ข่าวดีว่าใน ECMAScript 6 เราสามารถเพิ่มค่าเริ่มต้นให้กับพารามิเตอร์ของฟังก์ชันได้ ซึ่งหมายความว่าหากเราไม่ผ่านการขัดแย้งในภายหลังในการเรียกใช้ฟังก์ชันพารามิเตอร์เริ่มต้นจะถูกนำมาใช้ ใน ES5 ค่าเริ่มต้นของพารามิเตอร์จะถูกตั้งเป็นเสมอ ไม่ได้กำหนด, ดังนั้นความเป็นไปได้ใหม่ในการตั้งค่าให้กับสิ่งที่เราต้องการคือการปรับปรุงภาษาที่ยอดเยี่ยมอย่างแน่นอน.
ฟังก์ชันรวม (a = 2, b = 4) return a + b; console.log (sum ()); // 6 console.log (รวม (3, 6)); // 9
ES6 ยังแนะนำพารามิเตอร์ชนิดใหม่คือ พารามิเตอร์ที่เหลือ. พวกเขาดูและทำงานในทำนองเดียวกันเพื่อกระจายผู้ประกอบการ มันมีประโยชน์ถ้าเราไม่รู้ว่าจะมีการโต้แย้งกี่ครั้งในการเรียกใช้ฟังก์ชันในภายหลัง เราสามารถใช้คุณสมบัติและวิธีการของวัตถุ Array กับพารามิเตอร์ที่เหลือ:
ฟังก์ชั่น putInAlphabet (... args) ให้เรียง = args.sort (); เรียงกลับ console.log (putInAlphabet ("e", "c", "m", "a", "s", "c", "r", "i", "p", "t")); // a, c, c, e, i, m, p, r, s, t 6. ใหม่ สำหรับ ... จาก คำแถลง
ด้วยความช่วยเหลือของใหม่ สำหรับ ... จาก วนเราสามารถวนซ้ำอาร์เรย์หรือวัตถุ iterable อื่น ๆ ได้อย่างง่ายดาย พร้อมกับของใหม่ สำหรับ ... จาก คำสั่ง ECMAScript 6 แนะนำสองวัตถุ iterable ใหม่เกินไปแผนที่สำหรับแผนที่ / คีย์ค่าและชุดสำหรับคอลเลกชันของค่าที่ไม่ซ้ำที่ยังสามารถเป็นค่าดั้งเดิมและการอ้างอิงวัตถุ เมื่อเราใช้งาน สำหรับ ... จาก คำสั่งรหัสภายในบล็อกจะถูกดำเนินการสำหรับแต่ละองค์ประกอบของวัตถุ iterable.
ให้ myArray = [1, 2, 3, 4, 5]; ให้ผลรวม = 0; สำหรับ (ให้ฉันเป็นของ myArray) sum + = i; console.log (ผลรวม); // 15 (= 1 + 2 + 3 + 4 + 5)
7. เทมเพลตตัวอักษร
ECMAScript 6 ให้ทางเลือกใหม่แก่เราในการต่อสตริงเข้าด้วยกัน. เทมเพลตตัวอักษร อนุญาตให้เราสร้างเทมเพลตที่เราสามารถฝังค่าที่แตกต่างไปยังจุดที่เราต้องการได้อย่างง่ายดาย ในการทำเช่นนั้นเราจำเป็นต้องใช้ $ … ไวยากรณ์ทุกที่ที่เราต้องการแทรกข้อมูลที่เราสามารถส่งจากตัวแปรอาร์เรย์หรือวัตถุด้วยวิธีต่อไปนี้:
ให้ลูกค้า = title: 'Ms', ชื่อ: 'Jane', นามสกุล: 'Doe', อายุ: '34'; ให้แม่แบบ = 'เรียน $ customer.title $ customer.firstname $ customer.surname! สุขสันต์วันเกิด $ customer.age th! '; console.log (แม่แบบ); // เรียนคุณ Jane Doe! สุขสันต์วันเกิดปีที่ 34!
8. ชั้นเรียน
ES6 แนะนำคลาส JavaScript ที่สร้างขึ้นจากการสืบทอดโดยใช้ต้นแบบที่มีอยู่ ไวยากรณ์ใหม่ทำให้ตรงไปตรงมามากขึ้นในการสร้างวัตถุใช้ประโยชน์จากการสืบทอดและใช้รหัสซ้ำ นอกจากนี้ยังจะทำให้ง่ายขึ้นสำหรับผู้เริ่มต้นที่มาจากภาษาโปรแกรมอื่น ๆ เพื่อทำความเข้าใจว่า JavaScript ทำงานอย่างไร.
ในคลาส ES6 มีการประกาศด้วยใหม่ ชั้น คำหลักและจำเป็นต้องมี คอนสตรัค () วิธีการที่เรียกว่าเมื่อวัตถุใหม่จะยกตัวอย่างโดยใช้การ ใหม่ myClass () วากยสัมพันธ์ เป็นไปได้ที่จะขยายคลาสใหม่ด้วย ชั้นเด็กขยายผู้ปกครอง ไวยากรณ์ที่สามารถคุ้นเคยจากภาษาเชิงวัตถุอื่น ๆ เช่น PHP สิ่งสำคัญคือต้องรู้ว่าไม่เหมือนกับการประกาศฟังก์ชันและตัวแปรการประกาศคลาสไม่ได้ถูกยกใน ECMAScript 6.
คลาสรูปหลายเหลี่ยม ตัวสร้าง (ความสูงความกว้าง) // ตัวสร้างคลาส this.name = 'รูปหลายเหลี่ยม'; this.height = height; this.width = width; sayName () // คลาสเมธอด console.log ('สวัสดีฉันชื่อ', this.name + '.'); ให้ myPolygon = รูปหลายเหลี่ยมใหม่ (5, 6); console.log (myPolygon.sayName ()); // สวัสดี, ฉันเป็นรูปหลายเหลี่ยม. โค้ดด้านบนจากตัวอย่างซอ ES6, .
9. โมดูล
คุณเคยสงสัยบ้างไหมว่า JavaScript จะยอดเยี่ยมขนาดไหน? แน่นอนว่ามีการแก้ไขเช่น CommonJS (ใช้ใน Node.js) หรือ AMD (Asynchronous Module Definition) (ใช้ใน RequireJS) เพื่อทำสิ่งนั้นมาก่อน แต่ ES6 แนะนำโมดูลเป็นคุณลักษณะดั้งเดิม.
เราจำเป็นต้องกำหนดแต่ละโมดูลในไฟล์ของตัวเองแล้วใช้ ส่งออก คำหลักเพื่อส่งออกตัวแปรและฟังก์ชั่น ไปยัง ไฟล์อื่น ๆ และ นำเข้า คำหลักที่จะนำเข้าพวกเขา จาก ไฟล์อื่น ๆ ตามไวยากรณ์ต่อไปนี้:
// function.js function cube (a) ส่งคืน a * a * a; function cubeRoot (a) return Math.cbrt (a); ส่งออก cube, cubeRoot // หรือ: ส่งออก cube เป็น cb, cubeRoot เป็น cr // app.js นำเข้า cube, cubeRoot จาก 'function'; console.log (ก้อน (4)); // 64 console.log (cubeRoot (125)); // 5
โซลูชันนี้ยอดเยี่ยมเนื่องจากโค้ดที่เก็บในโมดูลไม่สามารถมองเห็นได้จากภายนอกและเราจำเป็นต้องส่งออกเฉพาะส่วนที่เราต้องการเข้าถึงโดยไฟล์อื่น เราสามารถทำสิ่งที่น่าทึ่งมากขึ้นด้วยโมดูล ES6 ที่นี่คุณสามารถค้นหาคำอธิบายที่ดีและมีรายละเอียดเกี่ยวกับพวกเขา.
10. โหลดวิธีการใหม่
ECMAScript 6 แนะนำวิธีการใหม่มากมายสำหรับ String Prototype ที่มีอยู่, Object Array, Array Prototype และ Math Object วิธีการใหม่สามารถปรับปรุงวิธีที่เราสามารถจัดการเอนทิตีเหล่านี้ได้อย่างมีนัยสำคัญ Mozilla Dev มีตัวอย่างโค้ดที่ยอดเยี่ยมของการเพิ่มเติมใหม่มันคุ้มค่าที่จะใช้เวลาและตรวจสอบอย่างละเอียด.
เพื่อแสดงให้เห็นว่าเท่ห์จริงๆแล้วนี่คือสิ่งที่ฉันชอบ: วิธีการค้นหาของต้นแบบ Array ที่ช่วยให้เราทดสอบเกณฑ์ที่แน่นอนเกี่ยวกับองค์ประกอบของอาร์เรย์โดยดำเนินการฟังก์ชันเรียกกลับในแต่ละองค์ประกอบ ผลตอบแทน จริง.
ฟังก์ชั่น isPrime (องค์ประกอบดัชนีอาร์เรย์) var start = 2; ในขณะที่ (เริ่ม <= Math.sqrt(element)) if (element % start++ < 1) return false; return element > 1; console.log ([4, 6, 8, 12] .find (isPrime)); // ไม่ได้กำหนดไม่พบ console.log ([4, 5, 8, 12] .find (isPrime)); // 5
รหัสด้านบนจาก: Mozilla Dev
