บทความ IT เจ๋งๆ

Image by Arek Socha from Pixabay

หลาย ๆ ภาษา Programming รวมทั้ง JavaScript ต่างก็มีข้อบกพร่องหรือมี Features บางอย่างที่ไม่ได้รองรับกับปัญหาต่าง ๆ ซึ่งสิ่งที่เราต้องการก็คือ การช่วยเหลือเล็ก ๆ น้อย ๆ เพื่อให้สามารถแก้ปัญหาของงานที่มักจะเกิดขึ้นในแต่ละวัน และนี่ก็คือ 6 ตัวอย่าง JavaScript Code สำหรับใช้แก้ปัญหาที่มักเจอกันบ่อย ๆ

หมายเหตุ: ในหลาย ๆ ตัวอย่างของบทความนี้ ใช้งานใน ES6

1. การค้นหา Object ที่ต้องการใน Array ของ Object

นี่เป็นหนึ่งในงานทั่วไปที่คุณอาจต้องการทำให้สำเร็จในโลกของ JavaScript นั่นคือการ Iterate ผ่าน Array ของ Object เพื่อค้นหาสิ่งที่ต้องการ และ find Method ก็เป็นตัวช่วยสำหรับเรื่องนี้ ลองดูตัวอย่างจากด้านล่าง:

2. การวน Loop Keys และ Values ของ Object

บางครั้ง Data Structure ของคุณอาจเป็น Object ที่ซับซ้อนซึ่งมี Key/Value pairs อยู่เป็นจำนวนมาก ในการ Iterate แต่ละ pair นั้นอาจทำให้คุณรู้สึกแปลก ๆ เล็กน้อยในช่วงแรกซึ่งก็ขึ้นอยู่กับภาษาที่คุณใช้ แต่มันจะง่ายมากขึ้นหากคุณคุ้นเคยกับการใช้ Function ของ Object

หลังจากที่คุณมี Objects Keys คุณสามารถวน Loop ผ่าน Keys และ Values ได้ในเวลาเดียวกัน ในตัวอย่างนี้ คุณสามารถเข้าถึงแต่ละ pair โดยใช้ Key และ Value Variables ในระหว่างการวน Loop

3. การ Filter Array ของ Objects ตามเงื่อนไข

หากคุณมี Array ของ Data ที่มีขนาดใหญ่และคุณต้องการที่จะ Filter บาง Items ตามเงื่อนไขที่ต้องการ คุณก็สามารถใช้ filter Function ได้ ในตัวอย่างนี้ เรามี Array ของ File Paths อยู่ ซึ่งบาง Files อยู่ใน "dir1" ในขณะที่ Files อื่นที่เหลืออยู่ใน "dir2" สมมติว่า เราต้องการที่จะ Filter เฉพาะ Directory ที่ต้องการ:

การ Filter Directory ที่ต้องการภายใน Array ของ Paths ข้างต้น สามารถทำได้ง่าย ๆ ด้วยการระบุว่า Path String จะต้องมี String "dir2" นั้น สิ่งที่ควรรู้ก็คือ Function ใดก็ตามที่คุณส่งผ่านไปเพื่อทำการ Filter จะมีการ Return ค่า True สำหรับ Items ที่แสดงอยู่ในผลลัพธ์

4. การ Destructing Variable Assignment

การ Assign ตัวแปรทีละตัวจาก Array นั้น อาจเป็นสิ่งที่ดูจะยุ่งยาก เพียงแค่คุณใช้ Destructuring Assignment ก็จะช่วยให้คุณทำงานได้รวดเร็วและง่ายขึ้น:

5. การ Assign Keys ให้กับ Object ด้วยชื่อที่เหมือนกัน

เมื่อคุณทำการ Assign Keys ให้กับ Object แต่หาก Key ดันมีชื่อเดียวกันกับตัวแปรที่เก็บค่าที่คุณต้องการจะ Assign คุณสามารถที่จะไม่ต้อง Assign ค่าพวกมันทั้งหมดก็ได้ วิธีนี้จะป้องกันไม่ให้คุณต้องทำซ้ำ ๆ ซึ่งเป็นสิ่งที่เราทุกคนคงไม่ชอบ เรามาดูตัวอย่างจากด้านล่างนี้กัน:

6. การใช้ Spread Operator

Spread Operator จะช่วยให้คุณสามารถ "กระจาย" Array ออกได้อย่างแท้จริง สิ่งนี้สามารถใช้เพื่อเปลี่ยน Array ให้เป็น List ของ Arguments หรือแม้แต่รวม Array 2 Array เข้าด้วยกัน นอกจากนี้คุณยังสามารถใช้มันเพื่อสร้าง List ของ Arguments เพื่อใช้ใน Function ได้อีกด้วย ลองดูที่ด้านล่างนี้:

ในตัวอย่างแรก เป็นการแสดงให้เห็นว่า Spread Operator ทำงานอย่างไรบน Array และเปลี่ยนแต่ละ Item ให้เป็น Individual Element ได้ ส่วนในตัวอย่างที่ 2 เป็นรวม Contents ของ Array 2 Array เข้าด้วยกันโดยการสร้าง Array ชั่วคราวขึ้นมาใหม่ซึ่งมีมี Contents ของทั้ง 2 Array อยู่ในนั้น ตัวอย่างสุดท้าย เป็นการแสดงให้เห็นว่า Spread Operator สามารถเปลี่ยน Array ให้เป็น List ของ Arguments เพื่อใช้ใน Function ได้อย่างไร ซึ่ง Math.max จะทำการ Return จำนวนที่มีค่ามากที่สุดใน List ของ Arguments ที่ถูกส่งไป ซึ่ง Argument ที่มีค่าสูงที่สุดก็คือ 10 นั่นเอง

ที่มา:  https://levelup.gitconnected.com/

รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert

อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ

บทความล่าสุด

• Top 10 Libraries ที่ Java Developer ทุกคนควรรู้จักไว้
• 4 Python Features ที่มีประโยชน์สุด ๆ 
• 7 Tools ที่ Developer ควรใช้ เพื่อเพิ่มประสิทธิภาพการทำงาน