COOL IT IDEAS AND STUFF
10 Useful JavaScript Coding Techniques That You Should Use
13-Jul-21
คัมภีร์เทพ IT
See the original english version Click here!
ปัจจุบันเราจะพบว่า JavaScript ถูกใช้งานและได้รับความนิยมอย่างมาก โชคดีที่ JavaScript มี Features และเทคนิคมากมายที่คุณสามารถใช้เพื่อให้การ Coding ของคุณสำเร็จได้อย่างง่ายดาย ในบทความนี้ 10 เทคนิค การเขียน Code ของ JavaScript ที่คุณควรลองนำไปใช้
1. ดึง Element ตัวสุดท้ายของ Array
หลายครั้งที่คุณเขียน Code ใน JavaScript คุณอาจต้องการดึง Element ตัวสุดท้ายของ Array ออกมา ในการทำเช่นนั้น คุณเพียงแค่ต้องใช้ Length Property เมื่อเข้าถึง Element
ดูตัวอย่างที่นี่:
เนื่องจาก Index เริ่มต้นจาก 0 เราจึงสามารถใช้ความยาวของ Array ลบด้วย 1 เป็น Index เพื่อเข้าถึง Element สุดท้ายได้
2. สุ่มตัวเลขจาก Range ที่กำหนด
คุณคงทราบอยู่แล้วว่า เราใช้ Math.random() Method เพื่อ Return ตัวเลขที่ถูกสุ่ม ระหว่าง 0 ถึง 1
แต่บางครั้ง คุณจะต้องสุ่มตัวเลขใน Range ที่กำหนด ตัวอย่างเช่น สุ่มตัวเลขที่อยู่ระหว่าง 0 ถึง 100 และอื่น ๆ เป็นต้น
ลองดูตัวอย่าง จากด้านล่าง:
3. ทำ Array หลายมิติ ให้เป็น Array 1 มิติ
คุณสามารถทำ Array หลายมิติ ให้เป็น Array 1 มิติได้โดยง่าย โดยใช้ flat() Method ซึ่งถูก Release ใน ES2017
flat() Method สามารถรับ Argument เดียวที่ใช้ในการกำหนดความลึกที่เราต้องการ ในการทำให้ Array เป็น 1 มิติ
ดูตัวอย่างที่นี่:
4. การตรวจสอบหลาย ๆ Condition
เมื่อเราต้องการตรวจสอบ Condition หลาย Condition ภายใน IF Statements เดียว มันจะดีกว่าถ้าใช้ Array Method include() เพื่อจัดการกับสิ่งนั้น
ด้านล่างนี้คือตัวอย่าง:
อย่างที่คุณเห็น include() Method ดังในกรณีข้างต้น เป็นเพียงการทำแบบย่อหากคุณต้องการทำให้ Code ของคุณ Clean ขึ้น ซึ่งขอแนะนำให้ทำแบบนี้เป็นอย่างยิ่ง
5. ทำการแยกค่าที่ไม่ซ้ำกัน
บางครั้งคุณอาจอยู่ในสถานการณ์ ที่คุณจะต้องลบรายการที่ซ้ำกันใน Array ออกไป
เพื่อให้บรรลุเป้าหมายนั้น คุณสามารถใช้ Set Object ใน JavaScript กับ Spread Operator
ดูตัวอย่างได้จากด้านล่างนี้:
6. Run Event เพียงครั้งเดียว
หากคุณมี Event ที่คุณต้องการ Run มันเพียงครั้งเดียว คุณสามารถใช้ Option once เป็น Parameter ที่ 3 สำหรับ addEventListener()
และนี่ก็คือตัวอย่าง
คุณจะเห็นว่า คุณเพียงแค่ต้อง Set ค่า Option ให้เป็น true แล้ว Event จะ Run เพียงครั้งเดียว
7. รวมผลบวกของตัวเลขทั้งหมดใน Array
วิธีที่ง่ายที่สุด ในการรวมผลบวกตัวเลขทั้งหมดภายใน Array ก็คือ การใช้ reduce Method ใน JavaScript
นี่คือตัวอย่าง:
8. รวมผลบวกของตัวเลขภายใน Array ของ Object
กรณีที่คุณต้องการผลรวมของตัวเลขทั้งหมดภายใน Array ของ Object นั้น ไม่เหมือนกับการรวมผลบวกจาก Array ปกติ
คุณยังคงสามารถใช้ reduce Method ในสถานการณ์นี้ได้ แต่คุณต้อง Return Object ภายใน Reduce Callback ด้วย
จากตัวอย่างด้านล่าง เป็น Array ของ Object ของ Users ที่มีทั้ง name และ age Properties เราต้องการรวมผลบวกของ age ทั้งหมดเพื่อให้ได้จำนวนรวมทั้งหมดของ age:
อย่างที่คุณเห็น เราเข้าถึง age ภายใน Object ที่ถูก Return จากนั้นเราก็เข้าถึงอีกครั้งหลังจาก reduce Method เนื่องจาก มันจะ Return Object ที่มีผลรวมทั้งหมดของ age
9. Keyword “in”
เราสามารถใช้ “in” ใน JavaScript เพื่อตรวจสอบว่า Properties ถูกกำหนดไว้ภายใน Object หรือว่า Element ถูกรวมอยู่ใน Array หรือไม่
คุณสามารถดู Code ได้จากด้านล่างนี้:
10. แปลงตัวเลขเป็น Array ของตัวเลข
เราสามารถใช้ Spread Operator, Map Method และ parseInt() Method เพื่อแปลงตัวเลขเป็น Array ของตัวเลขได้
นี่ก็คือตัวอย่าง Code:
อย่างที่คุณเห็น เราทำการกระจาย num Parameter ใน Empty Array และเราก็ Map ผ่านแต่ละ Element เพื่อแปลงมันเป็นตัวเลขโดยใช้ parseInt()
ที่มา: https://javascript.plainenglish.io/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด