สตริงเทมเพลต
นี่เป็นหนึ่งในคุณสมบัติของ ES6 ที่ฉันชอบมาก มันสะท้อนความสัมพันธ์ระหว่างตัวแปรและสตริงอย่างสังหรณ์ใจมาก ใน ES5 หากเราต้องการเพิ่มตัวแปรลงในสตริงเราจำเป็นต้องใช้วิธีการเขียนต่อไปนี้:
animate (box, 'translate (-' + itemWidth * num + 'px, 0)', 1000, function () {box.style.transitionDuration = ''; box.style.transform = 'translate (-800px, 0)'; flag = true;});ตอนนี้ใช้สตริงเทมเพลต ES6 คุณสามารถรวมสตริงและตัวแปรโดยตรงเพื่อให้เข้าใจได้ง่ายขึ้น
animate (box, `translate (-$ {itemwidth*num} px, 0)`, 1000, ฟังก์ชัน () {box.style.transitionDuration = '' box.style.transform = `แปล (-$ {itemWidth*(item.length-2)} px, 0)มันใช้งานง่ายและสะดวกมากหรือไม่? จากตัวอย่างง่ายๆสองตัวอย่างด้านบนเป็นที่ชัดเจนว่าใน ES6 สายจะถูกทำเครื่องหมายด้วย backticks (``) ซึ่งต้องเป็นที่รู้จัก
มีคุณสมบัติอื่น สตริงเทมเพลตสามารถส่งออกสตริงพับซึ่งเป็นไปไม่ได้ในสตริง ES5 แบบดั้งเดิม จะต้องใช้ (/n) และไม่สามารถเขียนเพื่อเข้าสู่การส่งคืนรถเมื่อเขียน อย่างไรก็ตามในเทมเพลตสตริง ES6 สามารถเขียนเพื่อป้อนและพื้นที่ได้โดยตรงจากนั้นเอาต์พุตโดยตรงเมื่อสตริงเป็นเอาต์พุตซึ่งสะดวกมาก
ให้ mystring = `abcdeffff fas`; console.log (mystring);/*เอาท์พุท abcdeffff fas*//
การขยายฟังก์ชั่น
1. ตั้งค่าเริ่มต้นสำหรับฟังก์ชัน
ในส่วนขยายของฟังก์ชั่นจะมีการเพิ่มฟังก์ชั่นลงในค่าเริ่มต้นสำหรับฟังก์ชันซึ่งสามารถกล่าวได้ว่าดีมาก คุณจำได้ไหมว่าเราตั้งค่าเริ่มต้นสำหรับฟังก์ชั่นใน ES5 ได้อย่างไร
การทดสอบฟังก์ชั่น (a, b, c) {var a = a || 10; var a = b || 15; var c = c || 20; console.log (a+b+c);}ที่นี่เราตั้งค่าเริ่มต้นเพื่อให้ได้เอฟเฟกต์ที่คาดหวังของเราจนถึงวันหนึ่งเราผ่าน A = 0 นิ้วในเวลานี้มันผิดสำหรับเราที่จะเขียนด้วยวิธีนี้ สำหรับโปรแกรม 0 เป็นเท็จดังนั้น A จะใช้ค่าเริ่มต้นที่ 10 ดังนั้นจึงล้มเหลวในการบรรลุผลที่คาดหวัง แต่ ES6 ให้วิธีที่ดีมากในการตั้งค่าเริ่มต้น รหัสข้างต้นสามารถเขียนใหม่ได้ดังนี้:
การทดสอบฟังก์ชั่น (a = 10, b = 15, c = 20) {console.log (a+b+c);}2. ฟังก์ชั่นลูกศร
นักเรียนที่เข้าใจ Cofficscript ควรชัดเจนว่าพลังของ Cofficescript เป็นฟังก์ชั่นลูกศรที่แพร่หลายซึ่งเป็นที่น่าพอใจมากที่จะเขียน ตอนนี้ ES6 ได้เปิดตัวฟังก์ชั่นลูกศรอย่างเป็นทางการเพื่อให้โปรแกรมของเราง่ายขึ้นตัวอย่างเช่น:
// วิธีการเขียนของ ES5 VAR TEST = ฟังก์ชั่น (A, B) {return a+B;} // ฟังก์ชันลูกศรของ ES6 VAR TEST2 = TEST (A, B) => A+B;เมื่อเขียนม้าหมุนคุณจะต้องย้ายเมาส์ไปยังจุดเล็ก ๆ ต่อไปนี้ในวัตถุอาร์เรย์ของจุดเล็ก ๆ เพื่อให้กราฟสามารถย้ายไปยังตำแหน่งที่ถูกต้อง ใน ES5 เราจำเป็นต้องเพิ่มแอตทริบิวต์ให้กับวัตถุปัจจุบันซึ่งเป็นเรื่องยุ่งยากในการเขียนและวิธีการเขียนมีดังนี้:
var lilist = document.querySelectorall ('li'); สำหรับ (var i = 0; i <lilist.length; i ++) {lilist [i] .index = i; lilist [i] .addeventListener ('mouseenter', function () {console.log (this.index);}, false);}สิ่งนี้แอตทริบิวต์นี้เป็นดัชนีขององค์ประกอบที่วางไว้บนเมาส์ปัจจุบันและจากนั้นองค์ประกอบปัจจุบันจะได้รับตามดัชนีนี้ แต่ใน ES6 เราสามารถใช้ฟังก์ชั่นลูกศรโดยตรงและ FindIndex ที่เพิ่งเปิดตัวใหม่ในอาร์เรย์เพื่อค้นหาดัชนีขององค์ประกอบที่ใช้งานปัจจุบัน รหัสมีดังนี้:
ให้ lilist = document.querySelectorall ('li'); ให้ arrayLilist = array.form (lilist); สำหรับ (var i = 0; i <lilist.length; i ++) {lilist [i] .index = i; lilist [i] .addeventListener ('mouseenter', function () {ให้ thisIndex = arrayLilist.findIndex ((n) => n == สิ่งนี้);}, false);}ThisIndex ที่ได้รับจากรหัสข้างต้นคือดัชนีที่วางไว้บนเมาส์ปัจจุบัน ที่นี่ฉันเข้าใจพารามิเตอร์ n ในฟังก์ชันลูกศร หลังจากผ่านในพารามิเตอร์ n มันจะสำรวจวัตถุในอาร์เรย์เพื่อค้นหาวัตถุเท่ากับสิ่งนี้แล้วส่งคืนดัชนี array.from () ใช้ที่นี่ นี่เป็นวิธีการใหม่ที่เพิ่มเข้ามาในอาร์เรย์ใน ES6 ซึ่งสามารถแปลงอาร์เรย์คลาสเป็นอาร์เรย์
ES6's for ... ของ Loop
รหัส js js ข้างต้นใช้สำหรับ แต่ในความเป็นจริงมันสามารถแทนที่ด้วยสำหรับ ... ของลูปใน ES6 ซึ่งทำให้การเขียนกระชับมากขึ้น คุณจำได้ไหมว่า ... ในลูปใน JS ลูปนี้สามารถวนซ้ำคีย์เป็นคู่คีย์-ค่า แต่ไม่สามารถวนค่าได้ การเกิดขึ้นของ ... ของคือการชดเชยข้อบกพร่องของมัน ช่วงที่สามารถใช้งานได้โดย ... ของลูปรวมถึงอาร์เรย์, ชุดและโครงสร้างแผนที่, วัตถุคล้ายอาร์เรย์บางอย่าง (เช่นอาร์กิวเมนต์อาร์กิวเมนต์, วัตถุ Nodelist DOM), วัตถุกำเนิดและสตริง ดังนั้นเราสามารถใช้ลูปนี้เพื่อแทนที่ FOR FOR แต่ที่นี่เราควรทราบว่า หากคุณใช้สำหรับ ... ของลูปโดยตรงจะมีการรายงานข้อผิดพลาดภายใต้ Chrome49 เจ้าหน้าที่ยืนยันว่านี่เป็นข้อบกพร่องของ Chrome49 และจะได้รับการแก้ไขใน Chrome51 ดังนั้นเมื่อฉันเขียนฉันใช้ array.from () เพื่อแปลงวัตถุที่มีน็อตเป็นอาร์เรย์เพื่อให้ฉันสามารถทำงานได้อย่างมั่นใจ รหัสมีดังนี้:
ให้ lilist = document.querySelectorall ('li'); ให้ arraylilist = array.form (lilist); สำหรับ (ให้ li ของ lilist) {li.addeventListener ('mouseenter', ฟังก์ชัน () {ให้ thisindex = arraylilist.findindex (n)สรุป
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ มันไม่กระชับมากเหรอ? ผ่านบทความนี้ฉันรู้สึกว่าสิ่งเหล่านี้ทำให้ฉันรู้สึกถึงเสน่ห์ของ ES6 แล้ว ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้ ES6