สมัครเรียนโทร. 085-350-7540 , 084-88-00-255 , ntprintf@gmail.com
title: รู้จักกับ "Loop" ในภาษา JavaScript อย่างง่ายๆ พร้อมตัวอย่างการใช้งานจัดการข้อมูล
Loop หรือ การวนซ้ำ ในโลกของการเขียนโปรแกรมคือเครื่องมือที่ช่วยให้เราสามารถทำงานซ้ำๆ ได้โดยไม่ต้องเขียนโค้ดเดิมซ้ำแล้วซ้ำเล่า ลองนึกภาพหากคุณต้องการพิมพ์ข้อความ "ยินดีต้อนรับสู่ EPT" 100 ครั้ง ไม่ใช่ว่าคุณต้องนั่งพิมพ์ซ้ำแบบนั้นจริงๆ ใช่ไหม? ด้วย loop เราสามารถบอกคอมพิวเตอร์ว่า "ทำซ้ำงานนี้ 100 ครั้ง" เพียงแค่นั้น!
ในภาษา JavaScript, มีหลายแบบของ loop ที่ช่วยให้เกิดความหลากหลายในการใช้งานได้ ตัวอย่างเช่น:
1. for loop
2. while loop
3. do...while loop
4. for...in loop → ใช้ กับ Object
5. for...of loop → ใช้กับ Array
แต่ละแบบมีคุณสมบัติที่ตอบโจทย์การใช้งานในแบบที่แตกต่างกัน วันนี้เราจะมาดูเพียง for loop ซึ่งเป็นการ loop ที่ใช้กันอย่างแพร่หลาย และง่ายต่อการเรียนรู้สำหรับผู้เริ่มต้น!
ตัวอย่างโค้ด การใช้ for loop เพื่อพิมพ์ข้อความ "ยินดีต้อนรับสู่ EPT" 10 ครั้งใน JavaScript:
for (let i = 1; i <= 10; i++) {
console.log("ยินดีต้อนรับสู่ EPT ครั้งที่ " + i);
}
การทำงานของโค้ด:
1. เริ่มโดยการกำหนดตัวแปร `i` เริ่มต้นที่ 1
2. ตรวจสอบเงื่อนไข `i <= 10` ถ้าเป็นจริง จึงจะวนซ้ำต่อ
3. ประมวลผลใน block ที่อยู่ภายใต้ for loop คือการพิมพ์ข้อความออกมา
4. เพิ่มค่า `i` อีก 1 หน่วย (`i++`)
5. วนกลับไปตรวจสอบเงื่อนไขและทำซ้ำจนกว่า `i` จะไม่น้อยกว่าหรือเท่ากับ 10
ให้เรามาดู Usecase ภายในแวดวงโลกจริงที่ loop ได้ถูกนำไปใช้:
1. การจัดการอาเรย์ข้อมูล: ลองนึกดูหากมีอาเรย์ของผู้ใช้ และต้องการแสดงชื่อของผู้ใช้แต่ละบุคคลไปยังหน้าเว็บไซต์ หรือการทำงานกับข้อมูลที่มีจำนวนมาก เช่น:
let users = ['Alice', 'Bob', 'Charlie', 'David'];
for (let i = 0; i < users.length; i++) {
console.log(users[i]);
}
2. การวนรูปภาพในกลุ่ม: คุณมีเว็บแอปที่จัดการกับแกลเลอรี่ภาพ, คุณต้องการโหลดและแสดงภาพทั้งหมดบนหน้าเว็บ โดยใช้รหัส JavaScript เพื่อสร้างแท็กภาพ แล้ววนข้อมูลของภาพนั้นๆ ให้แสดงอกมาทีละภาพ:
let imageUrls = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
for (let url of imageUrls) {
let img = document.createElement('img');
img.src = url;
document.body.appendChild(img);
}
3 ตัวอย่างการใช้ for..in ทำการวน loop ทุกๆElement (Field) ของ Object นั้นเอง
const object = { a: 1, b: 2, c: 3 };
for (const property in object) {
console.log(`${property}: ${object[property]}`);
}
การเรียนรู้การใช้ loop เป็นหัวใจสำคัญของการเขียนโปรแกรม ที่ EPT เรามีทั้งวิธีการสอนที่เข้าใจง่าย และครูผู้เชี่ยวชาญที่พร้อมจะคอยช่วยเหลือพัฒนาทักษะของคุณตั้งแต่พื้นฐานจนถึงขั้นสูง จองคลาสเรียนกับเราวันนี้ เพื่อทำให้การเรียนรู้การเขียนโค้ดของคุณเต็มไปด้วยความสนุกสนาน และคุณจะได้ฝึกการใช้ loop กับโจทย์ปัญหาจริงๆ ที่พร้อมจะตอกย้ำความเข้าใจของคุณในทุกสถานการณ์!
หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง
Tag ที่น่าสนใจ: loop การวนซ้ำ ภาษา_javascript for_loop while_loop do...while_loop for...in_loop for...of_loop อาเรย์ การวนรูปภาพ for..in_loop การใช้งานกับ_object การใช้งานกับ_array
หากมีข้อผิดพลาด/ต้องการพูดคุยเพิ่มเติมเกี่ยวกับบทความนี้ กรุณาแจ้งที่ http://m.me/Expert.Programming.Tutor
085-350-7540 (DTAC)
084-88-00-255 (AIS)
026-111-618
หรือทาง EMAIL: NTPRINTF@GMAIL.COM
Copyright (c) 2013 expert-programming-tutor.com. All rights reserved. | 085-350-7540 | 084-88-00-255 | ntprintf@gmail.com