# การใช้งานฟังก์ชันมีประโยชน์ของอาร์เรย์ในภาษา TypeScript แบบง่ายๆ
TypeScript, ภาษาโปรแกรมที่เป็นหนึ่งในภาษารักของนักพัฒนาเว็บในยุคปัจจุบันนี้ ด้วยความที่มันเป็นซุปเปอร์เซ็ตของ JavaScript ทำให้เราสามารถใช้งานฟีเจอร์และฟังก์ชันที่มีอยู่ใน JavaScript รวมถึงการทำงานกับอาร์เรย์ที่ประหยัดเวลาและลดความซับซ้อนของโค้ดลงได้เป็นอย่างดี
ในอาร์เรย์ของ TypeScript มีฟังก์ชันมากมายที่เราสามารถใช้ประโยชน์ได้ เพื่อช่วยในการจัดการกับข้อมูลที่เป็นกลุ่มหรือพวกคอลเลกชัน ในบทความนี้ เราจะมาดูฟังก์ชันที่น่าสนใจสามฟังก์ชัน: `map()`, `filter()`,และ `reduce()` พร้อมยกตัวอย่างโค้ดสำหรับแต่ละฟังก์ชันและเซนาริโอใช้งานจริงที่เราอาจพบเจอ
ฟังก์ชัน `map()` ทำหน้าที่แปลงหรือทำการเปลี่ยนแปลงทุกๆ องค์ประกอบในอาร์เรย์ตามฟังก์ชันที่เรากำหนด
ตัวอย่างโค้ด:
const numbers: number[] = [1, 2, 3, 4];
const squaredNumbers = numbers.map(x => x * x);
console.log(squaredNumbers); // [1, 4, 9, 16]
อธิบายการทำงาน:
ทุกๆ องค์ประกอบในอาร์เรย์ `numbers` จะถูกนำไปคูณกับตัวเองผ่านฟังก์ชันที่ถูกส่งผ่านเข้าไปใน `map()` (ในที่นี้คือ `x => x * x`) และผลลัพธ์ที่ได้คืออาร์เรย์ใหม่ที่มีค่าเป็นจำนวนที่ถูกยกกำลังสอง
ยกตัวอย่าง usecase:
สำหรับนักพัฒนาที่ทำงานกับอินเตอร์เฟสของผู้ใช้ ฟังก์ชัน `map()` สามารถใช้เพื่อแปลงข้อมูลที่ได้รับจาก API ก่อนนำไปแสดงผลบนหน้าเว็บไซต์
ฟังก์ชัน `filter()` ช่วยให้เราสามารถกรององค์ประกอบในอาร์เรย์ตามเงื่อนไขที่เรากำหนด
ตัวอย่างโค้ด:
const numbers: number[] = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(x => x % 2 === 0);
console.log(evenNumbers); // [2, 4]
อธิบายการทำงาน:
เราต้องการกรองเฉพาะตัวเลขที่เป็นจำนวนคู่ ฉะนั้นเราใช้ `filter()` ที่มีเงื่อนไขคือ `x % 2 === 0` ว่าต้องหารด้วยสองลงตัว และผลลัพธ์ที่ได้คืออาร์เรย์ใหม่ที่มีเพียงจำนวนคู่
ยกตัวอย่าง usecase:
เว็บไซต์ eCommerce สามารถใช้ `filter()` ในการแสดงผลเฉพาะสินค้าที่ตรงกับคำค้นหาหรือเงื่อนไขกรองที่ผู้ใช้เลือก
ฟังก์ชัน `reduce()` ทำหน้าที่ลดขนาดของอาร์เรย์ลงโดยการรวมองค์ประกอบทั้งหมดไปเป็นค่าเดียว
ตัวอย่างโค้ด:
const numbers: number[] = [1, 2, 3, 4];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 10
อธิบายการทำงาน:
ฟังก์ชัน `reduce()` รับสองพารามิเตอร์: ฟังก์ชันที่จะทำการรวมค่าและค่าเริ่มต้น (ในที่นี้คือ 0) เราจะรวมค่าไปเรื่อยๆ จนกระทั่งผ่านทุกองค์ประกอบ
ยกตัวอย่าง usecase:
ในการพัฒนาซอฟต์แวร์เกี่ยวกับการเงินหรือโปรแกรมบัญชี `reduce()` อาจถูกใช้ในการคำนวณผลรวมยอดขายหรือยอดเงินที่ต้องชำระทั้งหมด
การใช้งานฟังก์ชันเหล่านี้ใน TypeScript ไม่เพียงแต่สะดวกและรวดเร็ว แต่ยังช่วยให้โค้ดของเราดูสะอาด และง่ายต่อการอ่านและบำรุงรักษา ณ สถาบัน EPT เราสอนการใช้งานโครงสร้างข้อมูลเช่นอาร์เรย์และการใช้งานฟังก์ชันเหล่านี้ในการพัฒนาโปรแกรมแบบเจาะลึก เพื่อให้นักเรียนของเราพร้อมสำหรับการจัดการข้อมูลในโปรเจ็คจริง ถ้าคุณสนใจที่จะเรียนรู้วิธีการใช้งานฟังก์ชันพื้นฐานเหล่านี้ไปถึงการประยุกต์ใช้ในการสร้างแอปพลิเคชันที่ซับซ้อน อย่าลืมเข้าสู่หน้าสถาบัน EPT ของเราและเริ่มเส้นทางการเรียนรู้ของคุณที่นี่นะครับ!
หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง
หากมีข้อผิดพลาด/ต้องการพูดคุยเพิ่มเติมเกี่ยวกับบทความนี้ กรุณาแจ้งที่ http://m.me/Expert.Programming.Tutor
085-350-7540 (DTAC)
084-88-00-255 (AIS)
026-111-618
หรือทาง EMAIL: NTPRINTF@GMAIL.COM