foreach loop คืออะไร การใช้งาน foreach loop ในภาษา JavaScript แบบง่ายๆ พร้อมตัวอย่าง

บทความ: การใช้งาน foreach loop ในภาษา JavaScript และการประยุกต์ใช้งานในโลกจริง

การเขียนโปรแกรมนั้นหลากหลายดุจดั่งภาษาที่มีไว้สื่อสาร, และ JavaScript เป็นหนึ่งในภาษาที่จำเป็นในโลกของการเขียนโค้ดอย่างยิ่ง เพราะเป็นพื้นฐานสำคัญในการพัฒนาเว็บแอปพลิเคชันและอินเตอร์เฟซผู้ใช้ การเข้าใจในโครงสร้างพื้นฐานอย่าง "foreach loop" ใน JavaScript จึงเป็นก้าวสำคัญที่จะทำให้นักพัฒนาสามารถควบคุมและดำเนินการกับข้อมูลแบบชุด(collection) ได้อย่างมีประสิทธิภาพ

foreach loop คืออะไร?

foreach loop ใน JavaScript เป็นรูปแบบหนึ่งของ loop ที่ใช้เพื่อดำเนินการกับแต่ละองค์ประกอบหรือ element ใน array หรือ object ที่เป็น iterable โดยไม่จำเป็นต้องใช้การนับ index หรือจัดการกับขนาดของ array ด้วยตัวเอง มันทำให้การเขียนโค้ดสะอาดขึ้น และลดความซับซ้อนในการโค้ดที่เกี่ยวข้องกับการเดินทางผ่านข้อมูล

การใช้งาน foreach loop ใน JavaScript

ตัวอย่างโค้ดที่ 1: การสร้างรายการจาก array ของผลไม้


const fruits = ['แอปเปิ้ล', 'กล้วย', 'เชอร์รี่'];
fruits.forEach(function(fruit) {
  console.log(fruit);
});

ที่นี่เรามี array ชื่อ `fruits` และเรากำลังเรียกใช้ `forEach` โดยที่มันจะเรียก function ที่เราส่งเข้าไปสำหรับแต่ละ element ใน array ซึ่งในกรณีนี้คือการแสดงชื่อของผลไม้ในคอนโซล

การทำงานของโค้ด

ในตัวอย่างข้างต้น, `forEach` method เริ่มจากองค์ประกอบแรกของ array(`'แอปเปิ้ล'`), จากนั้นเรียก function ที่กำหนดโดยส่งองค์ประกอบนั้นเป็น argument และเดินหน้าไปยังองค์ประกอบถัดไปจนกว่าจะถึงสิ้นสุด array

Usecase ในโลกจริง

ตัวอย่างที่ 1: การแสดงผลสินค้าในเว็บไซต์ E-commerce

คิดถึงเว็บไซต์ที่ขายผลิตภัณฑ์หลากหลายประเภท เมื่อข้อมูลสินค้าถูกส่งมาจากฐานข้อมูล คุณอาจต้องการแสดงผลชื่อและราคาของแต่ละสินค้า ด้วยการใช้ `forEach`, คุณสามารถสร้าง element หน้าจอสำหรับแต่ละสินค้าได้อย่างง่ายดาย:


const products = [
  { name: 'คอมพิวเตอร์', price: 30000 },
  { name: 'โทรศัพท์', price: 10000 },
  { name: 'หูฟัง', price: 1500 }
];

products.forEach(function(product) {
  console.log(`${product.name} ราคา: ${product.price} บาท`);
});

ตัวอย่างที่ 2: การประมวลผลข้อมูลจากแบบสำรวจ

หากคุณมี array ของข้อมูลจากแบบสำรวจ และคุณต้องการประมวลผลคำตอบจากผู้ตอบแบบสำรวจทุกคน, `forEach` loop สามารถช่วยเหลือคุณได้:


const surveyResponses = ['ใช่', 'ไม่', 'ไม่แน่ใจ', 'ใช่'];

let positiveAnswers = 0;
surveyResponses.forEach(function(response) {
  if (response === 'ใช่') positiveAnswers++;
});

console.log(`มีคนตอบ 'ใช่' ทั้งหมด ${positiveAnswers} คน`);

การใช้งาน `forEach` loop ในสองตัวอย่างนี้ช่วยให้การดำเนินการกับข้อมูลเป็นไปอย่างสำเร็จลุล่วงและราบรื่น ซึ่งแสดงถึงว่า JavaScript ไม่เพียงแต่เป็นเครื่องมือที่ทรงพลังเท่านั้น แต่ยังช่วยให้เราอำนวยความสะดวกและแก้ปัญหาได้มากมาย

การเชิญชวน

หากคุณต้องการเป็นผู้เชี่ยวชาญในการใช้งาน JavaScript และต้องการประยุกต์ใช้ loops และสตรักเจอร์ข้อมูลอื่นๆ อย่างมีประสิทธิภาพในการเขียนโปรแกรม, EPT ขอแนะนำหลักสูตรที่จะช่วยให้คุณก้าวไปอีกขั้นในโลกของการพัฒนาเว็บ มาเรียนรู้และเติบโตไปพร้อมกับเรา และไขความลับของ JavaScript ร่วมกัน!

หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง

Tag ที่น่าสนใจ: foreach_loop javascript programming array object iterable coding web_development looping functional_programming

บทความนี้อาจจะมีที่ผิด กรุณาตรวจสอบก่อนใช้

หากมีข้อผิดพลาด/ต้องการพูดคุยเพิ่มเติมเกี่ยวกับบทความนี้ กรุณาแจ้งที่ http://m.me/Expert.Programming.Tutor

ไม่อยากอ่าน Tutorial อยากมาเรียนเลยทำอย่างไร?

สมัครเรียน ONLINE ได้ทันทีที่ https://elearn.expert-programming-tutor.com

หรือติดต่อ

085-350-7540 (DTAC)
084-88-00-255 (AIS)
026-111-618
หรือทาง EMAIL: NTPRINTF@GMAIL.COM

แผนที่ ที่ตั้งของอาคารของเรา

EXPERT-PROGRAMMING-TUTOR
รับสอนเขียนโปรแกรมคอมพิวเตอร์

JavaScript

foreach loop คืออะไร การใช้งาน foreach loop ในภาษา JavaScript แบบง่ายๆ พร้อมตัวอย่าง