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

Array เป็น Data Structure พื้นฐานที่ Developer มักใช้ในสถานการณ์ต่าง ๆ ของการ Development ดังนั้น ECMAScript จึงเพิ่ม Array Methods ใหม่ ๆ เข้ามาเพื่อให้สามารถประมวลผล JavaScript Arrays ได้อย่างมีประสิทธิภาพ บทความนี้จึงมาแนะนำ JavaScript Array Methods ที่ Web Developer ควรเรียนรู้ไว้

ย่อ Index-Based Element Access Code ให้สั้นลงด้วย at()

ภาษา Programming ส่วนใหญ่ จะเปิดให้สามารถเข้าถึง Array Item ด้วยเครื่องหมายวงเล็บเหลี่ยม ในทำนองเดียวกัน JavaScript ยังให้คุณ สามารถใช้ [i] เพื่อเข้าถึง i Element จาก Array Object ได้ แต่อย่างไรก็ตาม JavaScript ไม่รองรับ Index ที่เป็นลบจากการใช้เครื่องหมายนี้เหมือนอย่างที่ Python ทำ แต่กลับเสนอ Inbuilt at() Array Method พร้อมรองรับการใช้งาน Index ที่เป็นลบ

คุณสามารถดูตัวอย่างนี้และทำความเข้าใจว่า at() Method จะช่วยย่อ Code ให้สั้นลงเพื่อเข้าถึง Element สุดท้ายได้อย่างไร:

คุณสามารถเปิดใช้งานการเข้าถึง Index Item ที่เป็นลบสำหรับเครื่องหมายวงเล็บเหลี่ยมโดยใช้ at() Method และ Proxy Object ร่วมกัน ดังที่แสดงในตัวอย่าง Code ต่อไปนี้:

Browsers ส่วนใหญ่ที่เปิดตัวหลังปี 2022 มีการรองรับ at() Method ดังนั้น มันควรจะใช้งานได้หาก Web App Users ของคุณใช้ Browsers ที่ทันสมัย

ทำให้ Arrays เป็น 1 มิติด้วย flat() และ flatMap() Methods

เรามักจะต้องประมวลผล Arrays ตาม Requirements ต่าง ๆ ในระหว่างการพัฒนา Software สมมติว่า เซ็นเซอร์อุณหภูมิส่งค่าโดยใช้ JSON Format ต่อไปนี้สำหรับ IoT App:

Arrays นี้ประกอบด้วย Single Elements และ Nested Arrays แล้วเราจะแปลงสิ่งนี้ให้เป็น Array หนึ่งมิติ ได้อย่างไร Flat() Array Method สามารถเปลี่ยน Array หลายมิติ ให้เป็น Array หนึ่งมิติ ตามระดับความลึกที่กำหนด (ค่าเริ่มต้นคือ 1) :

นี่เป็นอีกตัวอย่างหนึ่ง ที่มีการระบุระดับความลึกเข้าไปเอง:

flatMap() Function นำเสนอ Solution ที่มีประสิทธิภาพสำหรับสถานการณ์ในกรณีที่คุณต้องการรวม flat() และ map() Methods โดยการยอมรับให้ Function เป็น Input Parameter ส่วน flatMap(callback) ก็เหมือนกันกับ .map(callback).flat() แต่มีประสิทธิภาพกว่าเล็กน้อย ดังที่ระบุไว้ใน MDN Documentation

Web Browser ยอดนิยมในเวอร์ชันที่เปิดตัวหลังปี 2020 มีการรองรับ flat() และ flatMap() Array Method ดังนั้น การใช้งานจริงจึงน่าจะไม่มีปัญหาอะไร

ค้นหา Array Elements ด้วย find*() Methods

ในอดีต Web Developers ส่วนใหญ่ใช้ indexOf() Method ในการค้นหา Array Elements ด้วย ค่าและ Loops แบบดั้งเดิม เพื่อค้นหา Elements ใน JavaScript Arrays แบบมีเงื่อนไข นอกจากนี้ การใช้งาน JavaScript ในอดีต ยังมีการใช้ some(), every() และ includes() Methods ในการค้นหา Array Elements

ปัจจุบัน ECMAScript Standard ได้กำหนด 4 Array Methods ใหม่ขึ้นมา สำหรับการค้นหา Array Elements ด้วยการใช้แนวทาง Functional Programming:

• find(): Return Element แรก ที่ผ่าน Element-Testing Function ที่กำหนด
• findIndex(): ทำงานเหมือนกับ find() Method แต่จะ Return Index กลับไปให้แทน
• findLast(): Return Element สุดท้าย ที่ผ่าน Element-Testing Function ที่กำหนด
• findLastIndex(): ทำงานเหมือนกับ findLast() Method แต่จะ Return Index กลับไปให้แทน

Inbuilt Array Methods เหล่านี้ จะช่วยให้คุณสามารถทำงานกับ Array ในรูปแบบ Functional โดยที่ไม่ต้องเขียน Code ที่ยืดยาวด้วยการใช้แบบ Loops แบบเก่า ๆ

ลองดู Code Snippet ต่อไปนี้ ซึ่งจะแสดงให้เห็นถึง Array find*() Methods ทั้งหมด:

Web Browser เวอร์ชันส่วนใหญ่ ที่ออกมาหลังปี 2022 มีการรองรับ Element-Searching Methods เหล่านี้ ดังนั้น การใช้งานจริงจึงไม่ควรมีปัญหา หากฐาน Users ของคุณใช้ Browsers ที่ทันสมัย

Set ค่า Array Elements ด้วยการใช้ with()

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

นอกจากนี้ Imperative Programming Approach นี้ อาจดูไม่ดีนัก หากคุณเป็นแฟนตัวยงของ Functional Programming นอกจากนี้ ใน Libraries ที่มีลักษณะคล้าย React นั้น คุณควร Copy Array ด้วยตนเองเพื่อเปลี่ยน Array Element เนื่องจาก Mutated Array Object จะไม่ไปกระตุ้นให้เกิดการ Render ใหม่อีกครั้ง ในขณะที่ with() Method เอง มี Function ง่าย ๆ ที่จะช่วยเปลี่ยน Element และทำการ Return Array Instance ใหม่ กลับไปให้:

เช่นเดียวกับ at() Method ซึ่ง Method นี้จะมีการรองรับการใช้ Index ที่เป็นลบ เพื่อให้ Developers อ้างอิงถึง Elements จากด้านขวาในระหว่างการกำหนดค่าใหม่ ซึ่ง Method นี้จะช่วยกระตุ้น React Developers ให้เขียน Clean Code เพื่อเปลี่ยน Array Elements อย่างไม่ต้องสงสัย:

คุณยังสามารถเขียน Functional Code ที่ทั้ง Clean และอ่านเข้าใจง่าย ได้โดยการใช้ with() กับ Array Methods อื่น ๆ ตามความต้องการในการ Develop ของคุณ ดังที่แสดงในตัวอย่าง Code ต่อไปนี้:

with() Array Method เป็น JavaScript Feature ใหม่ที่จะถูกเปิดตัวใน Browsers ส่วนใหญ่ช่วงปี 2023 นี้ ดังนั้น เราอาจต้องรอสักครู่ก่อนที่จะใช้งานได้ภายใน Apps

ใช้ Copying Versions ของ sort(), reverse() และ splice()

JavaScript Array Methods บางตัวมีการใช้ Algorithms ในการประมวลผล Array Structures ตัวอย่างเช่น ก่อนหน้านี้เราใช้ flat() Method เพื่อทำให้ Arrays เป็น 1 มิติ  แต่ Array Methods ที่รู้จักกันดีและถูกใช้งานบ่อยอย่าง sort(), reverse() และ splice() ก็มี Algorithms ที่ถูกพัฒนาไว้ล่วงหน้าแล้วสำหรับ Developers ด้วยเช่นกันโดย Methods เหล่านี้จะมี In-Place Algorithms ซึ่งจะเปลี่ยนแปลงแก้ไข Array Object ดั้งเดิม ดังนั้น Methods เหล่านี้อาจทำให้ Code ของคุณยาวขึ้นหากคุณต้องการแบบ Immutable Versions และคุณก็ไม่สามารถใช้ Methods เหล่านี้กับ Functional-Style Chaining โดยที่ไม่เรียกใช้ slice() เนื่องจาก Mutability ของ Methods เหล่านี้ ยิ่งไปกว่านั้น การใช้พวกมันกับ Libraries ที่มีลักษณะคล้าย React จำเป็นต้องสร้าง Array Copies ด้วยตนเอง

Methods เหล่านี้ มี Copying Versions ที่ทั้งใหม่และเป็น Functional อข่างแท้จริง ซึ่งประกอบไปด้วย toSorted(), toReversed() และ toSpliced() ดังที่แสดงในตัวอย่าง Code ต่อไปนี้:

การใช้งาน Methods เหล่านี้ร่วมกับ Array Methods อื่น ๆ ดูจะมีความเป็นไปได้สำหรับการเขียน Code แบบ Functional:

เป็นเรื่องน่าสนใจที่จะได้เห็นว่า Open-Source V8 JavaScript Engine มีการใช้ Array Methods อย่างไร มันใช้ Torque Custom Language ที่ Generate C++ Code เพื่อนำไปใช้กับ Standard ECMAScript API Methods ทั้งหมด

ตัวอย่างเช่น มาดูกันว่า มีการนำ toSorted() Method ไปใช้งานโดยใช้ Torque Language ได้อย่างไร:

ภาพ Screenshot จากผู้เขียนบทความ

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

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

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

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

• 10 SQL Queries ที่ Developer สามารถนำไปประยุกต์ใช้ได้
• 5 Git Commands และ Features ที่มีประโยชน์ต่อการทำงานของคุณ
• IT & Digital Events in June 2024