บทความ IT เจ๋งๆ
9 เคล็ดลับ เพื่อเขียน JavaScript Code อย่างมืออาชีพ
26-ส.ค.-20
คัมภีร์เทพ IT
ช่วงแรก ๆ ของการเขียน Code คงมี Developer หลายคนที่รู้สึกว่า Code ที่ตัวเองเขียน ยังไม่ดีนัก เนื่องจากการใช้ Specification/Features เก่า ๆ ของ JavaScript และคงมีหลายครั้งที่ Code เหล่านั้นถูก Restructure หรือทำให้เรียบง่ายและกระชับยิ่งขึ้นด้วยบาง Features ที่ทันสมัยกว่า วันนี้เรามาดู 9 เคล็ดลับ เพื่อเขียน JavaScript Code อย่างมืออาชีพ
1. Arrow Functions
ES6 ได้เปิดตัว Arrow Functions ซึ่งทำให้ Function Code ดู Clean ขึ้นมากและโดยรวมก็ช่วยให้เขียน Code ได้เร็วขึ้นด้วย
แทนที่จะประกาศ Functions เช่นนี้:
แต่คุณสามารถได้ผลลัพธ์แบบเดียวกันโดยใช้ Code ที่น้อยลง
และมันจะเรียบง่ายขึ้นอีก หากมีเพียงแค่ Expression เดียว
2. Spread Operator
Spread Syntax (หรือ Three-Dot Expression) ช่วยให้เราสามารถกระจายสมาชิกของตัวแปรที่ Iterate ได้ อย่างเช่น Array Expression หรือ String เพื่อที่จะกระจายไปยัง Arguments (สำหรับ Function Calls) หรือ Elements (สำหรับ Array Literals) ที่ต้องการ หรือ Object Expression ที่จะกระจายไปยัง Key-Value Pairs ที่ต้องการ (สำหรับ Object Literals)
สร้าง Array ใหม่โดยใช้ Array ที่มีอยู่แล้ว เป็นส่วนหนึ่งของมัน
วิธีที่ดีกว่าในการ Concatenate Array
ใช้ Elements ของ Array เป็น Arguments ของ Function
3. Rest Operator
Rest Syntax มีลักษณะเหมือน ๆ กับ Spread Syntax แต่มันใช้สำหรับการ Destruct ไม่ว่าจะเป็น Arrays หรือ Objects
ในอีกทางหนึ่ง Rest Syntax จะมีลักษณะตรงกันข้ามกับ Spread Syntax เนื่องจาก Spread Syntax จะกระจาย Arrays เป็น Elements ในขณะที่ Rest Syntax จะรวบรวมหลาย ๆ Elements และทำให้มันรวมเป็น Element เดียว
Parameter สุดท้ายของ Function สามารถถูกนำหน้าด้วย ... ซึ่งจะทำให้ Arguments ที่เหลือทั้งหมดถูกวางไว้ใน JavaScript Array
4. Fill Arrays
เป็นการสร้าง Array ง่าย ๆ ภายในบรรทัดเดียว
Array ของ 5 Empty Strings
Array ของ Number ตั้งแต่ 0 - 4
5. Computed Object Property Names
ES6 มีการรองรับ Computed Object Property Names ซึ่งช่วยให้คุณสามารถใส่ Expression ในวงเล็บ [] โดยจะถูกคำนวณและถูกใช้เป็น Property Name/Key
6. วิธีใช้ Console.log()
ใช้ console.table() เมื่อคุณมี Array ของ Objects
ผลลัพธ์:
ทำให้ Data โดดเด่นขึ้นด้วย CSS Style ที่กำหนดเอง ด้วยการใช้เครื่องหมาย "%"
ผลลัพธ์:
ดูค่าจากหลาย ๆ Objects ใน Console Log เดียว เพื่อลด Code Footprint แล้วดูการกำหนด Data ของตัวแปร
ผลลัพธ์:
7. Object Destructuring
กำจัด Code ที่ซ้ำซ้อนด้วยการ Destruct Properties ของ Object ที่คุณต้องการ
Destruct ภายใน Arguments ของ Function ด้วยการใส่ ชื่อของ Properties ที่เราต้องการ ลงในวงเล็บ
หรือ
ส่งผ่าน Animal Object และ Set ตัวแปรที่มี ชื่อของ Properties ใน Object ให้เท่ากับ Object มันจะดีกว่าถ้ามีหลาย Objects ที่จะ Destruct ใน Function เดียว
8. ใช้ Reduce() Map() และ Filter() แทนการใช้ For Loops
ใช้ Reduce() Method เพื่อรวมค่าใน Array ให้เป็นค่าเดียว
ใช้ Map() Method เพื่อสร้าง Array ใหม่ พร้อมผลลัพธ์ของการเรียกใช้ Function สำหรับทุก Array Element
ใช้ Filter() Method เพื่อสร้าง Array ที่บรรจุ Array Elements ทั้งหมดที่ผ่านเงื่อนไข ของการ Test แล้ว (เป็นเหมือน Function)
9. Conditional Operator
If..Else Statement สามารถถูกเปลี่ยนเป็น Conditional Statement โดยใช้ Syntax ต่อไปนี้:
อย่างเช่น Code ดังต่อไปนี้:
สามารถเปลี่ยน Code เป็น:
ที่มา: https://medium.com/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด