JS รุ่น ES6 ได้รับการสนับสนุนอย่างกว้างขวางจากเบราว์เซอร์ที่สำคัญและกรอบส่วนหน้าจำนวนมากก็ใช้ ES6 และ Babel สามารถใช้สำหรับความเข้ากันได้ดังนั้น ES6 จึงเข้าสู่ขั้นตอนการใช้งาน
หากคุณไม่คุ้นเคยกับ ES6 ต่อไปนี้เป็นประเพณีพื้นฐานง่าย ๆ 4 ข้อที่สามารถช่วยให้คุณเข้าใจ ES6 ได้อย่างรวดเร็ว
1. ประกาศตัวแปรโดยใช้ Let and Const
ในรหัส ES5 แบบดั้งเดิมมีสองปัญหาหลักเกี่ยวกับการประกาศตัวแปร
(1) ขาดการสนับสนุนขอบเขตบล็อก
(2) ไม่สามารถประกาศค่าคงที่
ใน ES6 ปัญหาทั้งสองนี้ได้รับการแก้ไขเพิ่มคำหลักใหม่สองคำ: Let and Const
ใช้สำหรับขอบเขตบล็อก
var a = 1; ถ้า (จริง) {var b = 2;} console.log (a); // 1console.log (b); // 2ใน ES5 ตัวแปร B ประกาศในบล็อก IF สามารถเข้าถึงได้นอกบล็อก
// ใน es6let a = 1; ถ้า (จริง) {ให้ b = 2;} console.log (a); // 1console.log (b); // ReferenceRoror: B ไม่ได้กำหนดไว้ใน ES6 ตัวแปร B ประกาศโดยใช้ Let In หากไม่สามารถเข้าถึงบล็อกนอกบล็อกได้
รหัสต่อไปนี้เป็นสถานการณ์ที่สับสนทั่วไป
var a = []; สำหรับ (var i = 0; i <5; i ++) {a.push (ฟังก์ชัน () {console.log (i);});} a.foreach (ฟังก์ชัน (ค่า) {value ();});ผลลัพธ์ของการวิ่งคือ: 5, 5, 5, 5, 5
ใช้ปล่อยให้ประกาศตัวแปร I ในลูป
var b = []; สำหรับ (ให้ i = 0; i <5; i ++) {b.push (ฟังก์ชัน () {console.log (i);});} b.foreach (ฟังก์ชัน (ค่า) {value ();});ผลลัพธ์ของการรันคือ: 0, 1, 2, 3, 4
กำหนดค่าคงที่โดยใช้ const
// ใน es5var my_constant = true; my_constant = false;
ค่าคงที่ไม่สามารถกำหนดได้ใน ES5 ค่าสามารถเปลี่ยนแปลงได้และเราสามารถรับประกันได้เองเท่านั้น
// ใน es6const my_constant = true; my_constant = false; // uncaught typeerror: การกำหนดตัวแปรคงที่
const ประกาศใน ES6 ไม่สามารถเปลี่ยนแปลงได้
2. สตริงเทมเพลต
วิธีการต่อไปนี้ของการประกบสตริงและตัวแปรเป็นเรื่องธรรมดามากขึ้น
var url = 'http: // www' + โดเมน + '.com/' + พา ธ + '?' + QueryParams;
ES6 ให้การใช้งานที่กระชับ
ให้ url = `http: //www.$ {domain} .com/$ {path}? $ {queryparams}`;
3. ชุดใหม่และแผนที่วัตถุ
ใน ES5 เรามักจะใช้อาร์เรย์เพื่อจัดเก็บข้อมูลแบบไดนามิกเช่น
var collection = []; collection.push (1, 2, 1); console.log (คอลเลกชัน); // [1, 2, 1]
มันมีข้อมูลที่ซ้ำกัน หากคุณไม่ต้องการข้อมูลที่ซ้ำกันคุณต้องใช้รหัสเพื่อตัดสิน
ฟังก์ชั่น addTocollection (คอลเลกชัน, ค่า) {if (collection.indexof (value) <0) {collection.push (value)}}}ES6 จัดเตรียมวัตถุที่ตั้งไว้ซึ่งทำให้สะดวกในการจัดการกับสถานการณ์นี้มากขึ้น
ให้คอลเลกชัน = new set (); collection.add (1); collection.add (2); collection.add (1); console.log (คอลเลกชัน); // set {1, 2}ชุดยังสามารถสำรวจชุดและประมวลผลข้อมูลในชุดได้อย่างสะดวก
ES5 มักจะใช้ในการจัดเก็บข้อมูลคู่คีย์-ค่า
var collection = {}; collection.a = 'abc'; collection.b = 'xyz';ES6 มีแผนที่ดังนั้นจึงสามารถใช้งานได้
ให้คอลเลกชัน = แผนที่ใหม่ (); collection.set ('a', 'abc'); collection.set ('b', 'xyz');Traversal นั้นง่ายมาก
collection.foreach (ฟังก์ชัน (ค่า, คีย์) {console.log (คีย์ + ":" + ค่า);}); console.log (collection.size);4. พารามิเตอร์ฟังก์ชัน
มีคุณสมบัติใหม่สองประการสำหรับพารามิเตอร์ของฟังก์ชั่นใน ES6
ค่าเริ่มต้น
ฟังก์ชัน Dosomething (someObject) {console.log (someObject);}อาจมีข้อผิดพลาดรันไทม์ที่นี่และต้องตรวจสอบพารามิเตอร์
ฟังก์ชั่น dosomething (someObject) {if (someObject === undefined) {someObject = {}; } console.log (someObject);}รหัสการตรวจสอบประเภทนี้เป็นเรื่องธรรมดามาก คุณสามารถตั้งค่าเริ่มต้นสำหรับพารามิเตอร์ใน ES6 ซึ่งง่ายกว่ามาก
ฟังก์ชั่น dosomething (someObject = {}) {console.log (someObject);}การทำลายวัตถุ
เรามักจะผ่านวัตถุที่มีคู่คีย์-ค่าเป็นพารามิเตอร์ไปยังฟังก์ชันจากนั้นรับคุณสมบัติต่าง ๆ ของวัตถุภายในฟังก์ชัน
ฟังก์ชั่น dosomething (someObject) {var one = someObject.propone; console.log (หนึ่ง); var two = someobject.proptwo; console.log (สอง); var สาม = someObject.propthree; console.log (สาม);}ES6 ช่วยให้เราสามารถแยกแยะพารามิเตอร์วัตถุโดยตรงในพารามิเตอร์
ฟังก์ชั่น dosomething ({propone, proptwo, propthree}) {console.log (propone); console.log (proptwo); console.log (propthree);}ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น