forEach/JavaScript

#พื้นฐานการเขียนเว็ปไซต์

#javascript

#forEach

การเข้าถึงสมาชิกใน Array ด้วย forEach ใน JavaScript เป็นวิธีการวนซ้ำ (iterate) ที่ง่ายและเป็นที่นิยม ใช้เมธอด Array.prototype.forEach() ครับ/ค่ะการใช้งาน forEachเมธอด forEach จะเรียกใช้ฟังก์ชัน callback หนึ่งครั้งสำหรับทุก ๆ สมาชิกในอาร์เรย์ตามลำดับรูปแบบ (Syntax)JavaScriptarray.forEach(callback(currentValue, index, array), thisArg);

พารามิเตอร์คำอธิบายcallback (Required)ฟังก์ชันที่จะถูกเรียกใช้สำหรับสมาชิกแต่ละตัวในอาร์เรย์currentValueค่าของสมาชิกตัวปัจจุบันที่กำลังประมวลผลindex (Optional)ดัชนี (index) ของสมาชิกตัวปัจจุบันarray (Optional)อาร์เรย์ที่กำลังประมวลผลthisArg (Optional)ค่าที่จะใช้เป็น this เมื่อเรียกใช้ callbackตัวอย่างโค้ดนี่คือตัวอย่างการเข้าถึงสมาชิกในอาร์เรย์และแสดงผลออกมาJavaScriptconst fruits = ["Apple", "Banana", "Cherry", "Date"];

// 1. เข้าถึงแค่ค่าของสมาชิก (currentValue)

console.log("--- เข้าถึงแค่ค่า ---");

fruits.forEach(function(fruit) {

console.log(fruit);

});

// Output:

// Apple

// Banana

// Cherry

// Date

// 2. เข้าถึงทั้งค่าและดัชนี (currentValue, index) - แนะนำให้ใช้ Arrow Function

console.log("\n--- เข้าถึงค่าและดัชนี ---");

fruits.forEach((fruit, index) => {

console.log(`Fruit at index ${index} is: ${fruit}`);

});

// Output:

// Fruit at index 0 is: Apple

// Fruit at index 1 is: Banana

// Fruit at index 2 is: Cherry

// Fruit at index 3 is: Date

ข้อควรจำไม่สามารถหยุดหรือออกจากลูป (Break/Return) ได้: forEach ถูกออกแบบมาให้ประมวลผลสมาชิกทุกตัวเสมอ ถ้าต้องการกลไกในการหยุดลูปก่อนกำหนด ควรใช้ลูป for หรือเมธอดอื่น ๆ เช่น some หรือ every แทนไม่มีค่าคืนกลับ (Return Value): เมธอด forEach จะคืนค่าเป็น undefined เสมอ ไม่เหมือนกับเมธอด map หรือ filter ที่คืนค่าเป็นอาร์เรย์ใหม่เปลี่ยนค่าเดิม: ฟังก์ชัน callback สามารถเปลี่ยนแปลงอาร์เรย์เดิมได้ หากคุณเปลี่ยนค่าของ currentValue มันจะไม่เปลี่ยนค่าในอาร์เรย์ แต่ถ้าคุณแก้ไขออบเจกต์ที่อยู่ในอาร์เรย์ (เช่น อาร์เรย์ของออบเจกต์) การเปลี่ยนแปลงนั้นจะมีผลต่ออาร์เรย์เดิม