บทความ IT เจ๋งๆ
10 JavaScript Hacks ที่ Web Developer ทุกคนควรรู้ไว้
12-ก.พ.-21
คัมภีร์เทพ IT
JavaScript ถือเป็นหนึ่งในภาษา Programming ที่ได้รับความนิยมอย่างมาก หากคุณเป็น Developer ที่ต้องเขียน JavaScript Code หรือมีพื้นฐานอยู่แล้วแต่ต้องการพัฒนาทักษะให้เชี่ยวชาญยิ่งขึ้น ขอแนะนำให้อ่านบทความนี้ซึ่งเป็น 10 JavaScript Hacks ที่ Web Developer ทุกคนควรรู้ไว้
1. วิธีใช้ Shortcuts สำหรับ Conditionals
JavaScript ช่วยให้คุณสามารถใช้ Shortcuts เพื่อทำให้ง่ายหรือสะดวกต่อการเขียน Code ของคุณ ในบางกรณี คุณสามารถใช้ Logical Operators && และ || แทนการใช้ If และ Else ได้
มาดูการใช้งานของ && Operator กัน
ตัวอย่าง Code:
|| Operator ทำหน้าที่เป็นเหมือน “OR” Clause แต่การใช้ Operator นี้อาจดูเหมือนจะยุ่งยากเล็กน้อย เนื่องจากมันอาจทำให้ Application ไม่ Execute ได้ อย่างไรก็ตามเราสามารถเพิ่ม Condition เข้าไปเพื่อหลีกเลี่ยงเหตุการณ์ดังกล่าวได้
ตัวอย่าง Code:
2. วิธี Convert เป็น Integer โดยใช้ ~~ Operator
การใช้ Math.floor เพื่อปัดเศษทศนิยมลงให้เป็นเลขจำนวนเต็มในสมการทำให้ต้องใช้ Resources แต่ก็มีวิธีที่มีประสิทธิภาพมากกว่า ก็คือ การใช้ ~~ Operator
ดูตัวอย่างที่นี่:
3. ทำการ Resize หรือ Empty Array โดยใช้ array.length
บางครั้งคุณต้องปรับเปลี่ยน Size ของ Array ของคุณ หรือทำให้มัน Empty วิธีที่มีประสิทธิภาพมากก็คือ การใช้ Array.length
ตัวอย่าง Code:
นอกจากนี้คุณยังสามารถใช้ Array.length เพื่อลบค่าทั้งหมดออกจาก Array ที่ต้องการ
ตัวอย่าง Code:
4. วิธี Merge Arrays โดยไม่ทำให้ Server เกิด Overload
มันอาจเป็นปัญหาร้ายแรงบน Server ได้ หากเราทำการ Merge Arrays โดยเฉพาะอย่างยิ่งเมื่อคุณกำลังจัดการกับ Data Sets ที่มีขนาดใหญ่ เพื่อให้สิ่งต่าง ๆ ง่ายขึ้นและยังคงรักษาประสิทธิภาพเอาไว้ ขอแนะนำให้ใช้ Array.concat() และ Array.push.apply(arr1,arr2) Functions ซึ่งการที่จะใช้ Functions เหล่านี้ ก็ขึ้นอยู่กับขนาด Arrays ของคุณ
ลองมาดูวิธีจัดการกับ Arrays ที่มีขนาดเล็กกัน
ตัวอย่าง Code:
เมื่อใช้ Array.concat() Function กับ Data Sets ที่มีขนาดใหญ่ จะมีการใช้ Memory จำนวนมากในขณะที่สร้าง Array ใหม่ หากต้องการหลีกเลี่ยงปัญหาเรื่องประสิทธิภาพ แนะนำให้คุณใช้ Array.push.apply(arr1,arr2) ซึ่งจะทำการรวม Array ที่ 2 เข้ากับ Array แรก โดยที่ไม่ต้องสร้าง Array ใหม่
ตัวอย่าง Code:
5. วิธีใช้ Filters กับ Arrays
การ Filter Array มีประโยชน์ในกรณีที่คุณต้องทำงานกับหลาย ๆ Columns ของ Data ที่มีข้อมูลเหมือน ๆ กัน ในกรณีนี้คุณสามารถเลือกดู Data ตามลักษณะเฉพาะที่บรรยายถึงกลุ่มที่คุณต้องการใน Array ของคุณได้
ในการ Filter Array ให้ใช้ filter() Function
ตัวอย่าง Code:
อีกทั้งคุณยังสามารถใช้ filter() ร่วมกับ Boolean เพื่อ Remove Null Values หรือ Undefined Values ทั้งหมดออกจาก Array ของคุณได้
ตัวอย่าง Code:
6. วิธี Extract Unique Values
สมมติว่าคุณมี Data Set ที่มี Values ซ้ำ ๆ กัน และคุณต้องการสร้าง Unique Values จาก Data Set ดังกล่าว คุณสามารถทำได้ด้วยการผสมผสานระหว่าง Spread Syntax ... และ Object Type Set และวิธีนี้ก็สามารถใช้ได้กับทั้ง Words และ Numbers
ตัวอย่าง Code:
7. วิธีใช้ Replace Function Shortcut
คุณควรสร้างความรู้จักกับ String.replace() Function เอาไว้ แต่อย่างไรก็ตาม Function นี้มันเพียงแค่ Replace String ด้วยบรรทัดที่ต้องการเพียงครั้งเดียวแค่นั้น สมมติว่าคุณมี Data Set ขนาดใหญ่และคุณต้องพิมพ์ Function นี้ซ้ำหลาย ๆ ครั้ง เชื่อว่าอาจทำให้คุณรู้สึกหงุดหงิดอยู่บ้าง
เพื่อให้ชีวิตของคุณง่ายขึ้น คุณสามารถเพิ่ม /g เข้าไปที่ส่วนท้ายของ regex เพื่อให้ Function ทำงานและ Replace ด้วยเงื่อนไขที่ Match กันทั้งหมดจนครบทุกจุด
ตัวอย่าง Code:
8. วิธี Cache Values
เมื่อคุณทำงานกับ Array ที่มีขนาดใหญ่และต้องการ Request Elements ด้วย ID โดยใช้ getElementById() หรือด้วยชื่อ Class โดยใช้ getElementsByClassName() จากนั้น JavaScript จะ Run ผ่าน Array บน Loop ด้วย Element Request ที่คล้ายกัน ซึ่งวิธีการนี้อาจใช้ Resources เป็นจำนวนมาก
อย่างไรก็ตาม คุณสามารถเพิ่มประสิทธิภาพได้ด้วยการ Cache Value หากคุณรู้ว่า คุณใช้การเลือกในลักษณะนั้นอยู่เป็นประจำ
ตัวอย่าง Code:
9. วิธีตรวจสอบว่า Object มี Values หรือไม่
เมื่อคุณทำงานกับหลาย ๆ Objects มันคงจะยากที่จะ Track ว่า Objects ใดมี Value จริงและ Value ใดที่คุณสามารถลบออกไปได้
นี่คือเคล็ดลับง่าย ๆ ในการตรวจสอบว่า Object นั้น Empty หรือมี Value อยู่ ด้วยการใช้ Object.keys() Function
ตัวอย่าง Code:
10. วิธีลดขนาด Files ของ JavaScript
JS Files ที่มีขนาดใหญ่ ส่งผลต่อประสิทธิภาพในการ Load และ Response ของ Page ในขณะที่เขียน Code คุณอาจเคยเขียน Code, Comments ที่ไม่จำเป็นรวมทั้ง Dead Code ทำให้พวกมันอาจเพิ่มขนาดขึ้นเรื่อย ๆ จนกลายเป็นปัญหาคอขวดที่เกิดขึ้นซ้ำ ๆ
แต่ก็มี Tools อยู่ 2 – 3 อย่างที่จะช่วยคุณในการ Clean Code และทำให้ JS Files มีขนาดเล็กลงหรือลดขนาดลง แม้ว่าการทำให้ขนาด JS Files เล็กลง (Minify) จะไม่ใช่เคล็ดลับที่ดูยิ่งใหญ่มากอะไร แต่มันก็ยังเป็นสิ่งที่มีประโยชน์สำหรับ Developer ที่ควรต้องรู้และนำไปประยุกต์ใช้งาน
Tool แรกก็คือ Google Closure Compiler ซึ่งจะทำการแยกวิเคราะห์ JavaScript ของคุณ, ลบ Dead Code แล้ว Re-Write และลดขนาดให้ได้มากที่สุดเท่าที่จะทำได้ อีก Tool หนึ่งก็คือ Microsoft Ajax Minifier ซึ่งช่วยให้คุณสามารถปรับปรุงประสิทธิภาพของ Web Application ของคุณด้วยการลดขนาด JavaScript Files ของคุณ
เชื่อว่า หากคุณลองใช้เคล็ดลับเหล่านี้ น่าจะช่วยทำให้ Code ของคุณ Clean ขึ้น รวมทั้งช่วยประหยัด Resources ของ Server และประหยัดเวลาในการเขียน Program ของคุณ
ที่มา: https://www.freecodecamp.org/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด