บทนำ:
ในโลกแห่งการพัฒนาเว็บแอปพลิเคชั่น, JavaScript ถือเป็นหนึ่งในภาษาที่ได้รับความนิยมอันดับต้น ๆ ไม่เพียงแต่เพราะมันเป็นภาษาสก์ริปต์ที่ใช้งานได้ทั่วไปบนเบราว์เซอร์ แต่ยังเพราะภาษานี้มี functions และเครื่องมือต่าง ๆ อย่างมากมายที่ช่วยทำให้งานของนักพัฒนาง่ายขึ้นอย่างไม่น่าเชื่อ
1. map()`map()` เป็น function ที่ฝังอยู่ใน prototype ของ Array ใน JavaScript ซึ่งช่วยให้คุณสามารถสร้าง array ใหม่จากการเรียก function กับแต่ละองค์ประกอบของ array เดิม ซึ่งทำให้การแปลงข้อมูลใน array เป็นไปได้ง่ายและรวดเร็ว โดยไม่ต้องใช้ loop แบบดั้งเดิมที่ยุ่งยากและเสี่ยงทำผิดพลาด
ตัวอย่างโค้ด:
const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(num => num * num);
console.log(squaredNumbers); // [1, 4, 9, 16, 25]
2. filter()
ถัดมาคือ function `filter()`, อีกหนึ่งความสามารถที่มาพร้อมกับ Arrays ใน JavaScript ฟังก์ชันนี้มีประโยชน์อย่างยิ่งเมื่อต้องการกรองข้อมูลที่ตอบโจทย์เงื่อนไขเฉพาะ โดยส่งผลลัพธ์เป็น array ใหม่ที่มีเฉพาะข้อมูลที่ตรงตามเงื่อนไขที่กำหนดไว้เท่านั้น
ตัวอย่างโค้ด:
const products = [
{ name: 'banana', type: 'fruit' },
{ name: 'cucumber', type: 'vegetable' },
{ name: 'apple', type: 'fruit' },
{ name: 'tomato', type: 'vegetable' }
];
const fruits = products.filter(product => product.type === 'fruit');
console.log(fruits); // [{ name: 'banana', type: 'fruit' }, { name: 'apple', type: 'fruit' }]
3. reduce()
`reduce()` เป็นฟังก์ชันที่อาจดูซับซ้อนกว่า `map()` หรือ `filter()` แต่กลับเป็น function ที่มีพลังในการเปลี่ยนแปลงข้อมูลภายใน array ได้อย่างมากมาย ฟังก์ชันนี้ทำงานโดยการ "ลด" array ลงไปเหลือเพียงค่าเดียว โดยที่คุณสามารถกำหนดการดำเนินการระหว่างการประมวลผลได้
ตัวอย่างโค้ด:
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => {
return accumulator + currentValue;
}, 0);
console.log(sum); // 15
4. forEach()
ในขณะที่ `map()` และ `filter()` คืนค่าเป็น array ใหม่, `forEach()` นั้นทำหน้าที่วนลูปเพื่อทำงานกับแต่ละองค์ประกอบใน array แต่ไม่คืนค่าอะไรกลับมา นี่เป็นวิธีที่ดีในการทำงานกับ elements ทุกอันใน array เพื่อส่งผลกระทบต่อภายนอก (เช่น การอัปเดต UI)
ตัวอย่างโค้ด:
const colors = ['red', 'green', 'blue'];
colors.forEach(color => {
console.log(color);
});
// red
// green
// blue
5. Promise และ async/await
สุดท้ายนี้ไม่ใช่ function แต่เป็นแนวคิดเกี่ยวกับการทำงานแบบ asynchronous ใน JavaScript: Promise และ async/await ทำให้การจัดการกับเหตุการณ์ที่ไม่เกิดขึ้นทันที (เช่น การร้องขอข้อมูลจากเซิร์ฟเวอร์) นั้นง่ายขึ้นมาก ด้วยการใช้ Promise, คุณสามารถเขียนโค้ดที่ "สัญญา" ว่าจะทำบางอย่างเมื่อข้อมูลพร้อม ต่อมากับ async/await ช่วยให้คุณเขียน asynchronous code ในแบบที่อ่านง่ายขึ้นเสมือนว่าเป็นโค้ดแบบ synchronous
ตัวอย่างโค้ด:
async function fetchData() {
try {
const response = await fetch('https://api.expert-programming-tutor.com/data');
const data = await response.json();
console.log(data);
} catch (error) {
console.error("An error occurred:", error);
}
}
fetchData();
ที่ EPT, เราเข้าใจในคุณค่าของการสอนโปรแกรมมิ่งอย่างมีหลักการและปฏิบัติการ, การเข้าใจใน functions ที่ทรงพลังเหล่านี้ใน JavaScript จะช่วยปูพื้นฐานให้นักเรียนทั้งน้อยและใหญ่เติบโตเป็นนักพัฒนาที่สามารถตอบสนองความต้องการที่ไม่หยุดยั้งของตลาดได้อย่างมืออาชีพ โลกของเทคโนโลยีและการเขียนโปรแกรมนั้นกว้างขวางและมีแต่จะก้าวหน้าไปข้างหน้า สิ่งที่สำคัญคือการเริ่มต้นจากขั้นพื้นฐานด้วยความเข้าใจที่แน่นอนและการฝึกฝนอย่างเสมอมั่น.
หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง
หากเจอข้อผิดพลาด หรือต้องการพูดคุย ติดต่อได้ที่ https://m.me/expert.Programming.Tutor/
หากมีข้อผิดพลาด/ต้องการพูดคุยเพิ่มเติมเกี่ยวกับบทความนี้ กรุณาแจ้งที่ http://m.me/Expert.Programming.Tutor
085-350-7540 (DTAC)
084-88-00-255 (AIS)
026-111-618
หรือทาง EMAIL: NTPRINTF@GMAIL.COM