เคล็ดลับการเพิ่มประสิทธิภาพ JavaScript ที่ใช้งานได้จริงหลายประการที่ควรรู้

วิธีเริ่มต้นใช้งาน VUE3.0 อย่างรวดเร็ว: เข้าสู่การเรียนรู้

"ความยาก:?" " เวลาในการอ่านที่แนะนำ: 5 min "

วิดีโอหลัก

จะลดโค้ด if...else

• เมื่อเราเขียนฟังก์ชัน if...else มากกว่าสองรายการ เราควรพิจารณาว่าจะมีวิธีการเพิ่มประสิทธิภาพที่ดีกว่านี้หรือไม่
• เช่นตอนนี้เราต้องคำนวณราคาอาหารในไม้ลาวตามชื่อคุณก็ทำได้

• วิธีเขียนนี้จะทำให้ Function Body มีคำสั่งเงื่อนไขจำนวนมาก เมื่อเราต้องการเพิ่ม Product ในครั้งต่อไป เราจำเป็นต้องแก้ไขตรรกะในฟังก์ชันและเพิ่ม คำ สั่ง if...else ด้วยเช่นกัน การเปิดและปิดในระดับหนึ่ง หลักการ คือ เมื่อเราต้องการเพิ่มตรรกะ เราควรพยายามแก้ไขการเปลี่ยนแปลงในข้อกำหนดโดยขยายเอนทิตีซอฟต์แวร์แทนการแก้ไขโค้ดที่มีอยู่เพื่อให้การเปลี่ยนแปลงเสร็จสมบูรณ์
• นี่เป็นวิธีการเพิ่มประสิทธิภาพแบบคลาสสิก เราสามารถใช้โครงสร้างข้อมูลที่คล้ายกับ Map เพื่อบันทึกผลิตภัณฑ์ทั้งหมดที่นี่เราสร้างออบเจ็กต์เพื่อจัดเก็บโดยตรง

• ด้วยวิธีนี้ เราไม่จำเป็นต้องเปลี่ยนลอจิกของ getPrice เมื่อเราต้องการเพิ่มผลิตภัณฑ์อื่นในครั้งต่อไป แน่นอนว่า ผู้คนจำนวนมากที่นี่ชอบใช้ foodMap โดยตรงตรงที่มันถูกใช้งาน ฉันแค่ยกตัวอย่างง่ายๆ เพื่อแสดง ความคิดนี้
• นักเรียนบางคนจะถามในเวลานี้ว่าจะทำอย่างไรถ้าฉันไม่ต้องการใช้เฉพาะสตริงสำหรับ key จากนั้นคุณสามารถใช้ new Map ได้ แนวคิดนี้คล้ายกันและมีการขยายเอนทิตีเพิ่มเติมเพื่อจัดเก็บการเปลี่ยนแปลง

การดำเนินงานไปป์ไลน์แทนที่ลูปที่ซ้ำซ้อน

• มีรายการอาหารของ Mai Moulao

• ถ้าอยากหาอาหารที่เป็น Set 1 จะหาได้อย่างไร?
• ข้างต้นเป็นวิธีการที่เรามักใช้ก่อนหน้านี้ แน่นอนว่าการแทนที่ด้วย filter และ map แทน for loop ไม่เพียงแต่จะทำให้โค้ดมีความคล่องตัวมากขึ้นเท่านั้น แต่ยังทำให้ความหมายชัดเจนขึ้นอีกด้วย ด้วยวิธีนี้ เราจะเห็นได้ทันทีว่า อาร์เรย์จะ过滤ก่อนแล้วจึง重组

Find แทนที่ลูปซ้ำซ้อน

• หรือตัวอย่างข้างต้น หากเราต้องการค้นหาอาหารเฉพาะตามค่าแอตทริบิวต์ในอาร์เรย์ออบเจ็กต์อาหารนี้ การใช้ find จะออกมา

รวม แทนที่ลูปซ้ำซ้อน

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

• ในทำนองเดียวกัน ไม่เพียงแต่ กะหล่ำปลีดองและบะหมี่เนื้อของ Kang Fu เท่านั้นที่สามารถเล่นได้เช่นนี้ แต่การดำเนินการที่คล้ายกันทั้งหมดในการค้นหาองค์ประกอบเฉพาะในอาร์เรย์สามารถเรียกใช้ได้โดยใช้ฟังก์ชัน includes

ค่าส่งกลับผลลัพธ์

• เมื่อเราเขียนฟังก์ชันบางอย่างด้วยค่าส่งคืน เรามักจะประสบปัญหาในการตั้งชื่อตัวแปรค่าส่งคืน แม้แต่ฟังก์ชันยาวๆ บางตัว เราก็ไม่ได้ใช้ตัวแปร แต่ return โดยตรง นิสัยนี้ไม่ดีจริงๆ เนื่องจากเราจำเป็นต้องชี้แจงตรรกะ อีกครั้งเมื่อเราอ้างถึงรหัสนี้ในครั้งต่อไป
• โดยปกติแล้วในฟังก์ชันขนาดเล็ก เราสามารถใช้ result เป็นค่าส่งคืนได้

การส่งคืนก่อนกำหนด

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

• ในตัวอย่างต่อไปนี้ เมื่อ selectedKey ของเราไม่มีอยู่ เราควร return ทันที เพื่อที่เราจะได้ไม่ต้องอ่านโค้ดต่อไปนี้ต่อไป ไม่เช่นนั้นจะเพิ่มค่าใช้จ่ายในการอ่านจำนวนมากเมื่อเผชิญกับฟังก์ชันที่ซับซ้อนมากขึ้น

เพื่อรักษาออบเจ็กต์ให้สมบูรณ์

• บ่อยครั้งเมื่อเราได้รับข้อมูลที่ส่งคืนโดยแบ็กเอนด์ผ่านการร้องขอ มันจะถูกประมวลผลตามคุณลักษณะบางอย่าง หากมีแอตทริบิวต์ไม่กี่อย่างที่จำเป็นต้องได้รับการประมวลผล นักเรียนหลายคนจะคุ้นเคยกับการใช้ วิธีแรก
• แต่ในความเป็นจริง นิสัยนี้ไม่ดี เพราะเมื่อคุณไม่แน่ใจว่าฟังก์ชันนี้จำเป็นต้องเพิ่มแอตทริบิวต์การพึ่งพาในอนาคตหรือไม่ คุณควรรักษาความสมบูรณ์ของวัตถุ ดังที่ได้กล่าวไว้ในบทความล่าสุดของฉัน ให้เรียนรู้ที่จะยอมรับการเปลี่ยนแปลง getDocDetail ไม่ได้จำกัดแค่การใช้ icon และ content ในอนาคตอาจมีแอตทริบิวต์ เช่น title และ date ดังนั้นเราอาจส่งผ่าน object ที่สมบูรณ์โดยตรงเช่นกัน ซึ่งจะไม่เพียงทำให้รายการพารามิเตอร์สั้นลง แต่ยังทำให้โค้ดมีมากขึ้นอีกด้วย อ่านได้

การใช้โอเปอเรเตอร์อย่างชาญฉลาด

• เมื่อเราต้องการสร้างตัวแปรใหม่และบางครั้งเราต้องตรวจสอบว่าตัวแปรที่อ้างอิงด้วยค่านั้นเป็น null หรือไม่ได้กำหนด เราสามารถใช้การเขียนแบบง่ายๆ ได้

ในตอนท้ายของการเขียน

• ก่อนอื่นฉันอยากจะขอบคุณทุกคนที่อ่านบทความนี้ ฉันจะแบ่งปันบทความนี้ที่นี่และสรุปวิธีการเพิ่มประสิทธิภาพขั้นพื้นฐานบางอย่าง ฉันหวังว่ามันจะช่วยทุกคนได้

[วิดีโอแนะนำที่เกี่ยวข้อง: ส่วนหน้าของเว็บ]

ข้างต้นคือรายละเอียดของเคล็ดลับการเพิ่มประสิทธิภาพ JavaScript ที่ใช้งานได้จริงหลายประการที่น่ารู้ สำหรับข้อมูลเพิ่มเติม โปรดอ่านบทความอื่นๆ ที่เกี่ยวข้องบนเว็บไซต์ PHP ภาษาจีน