สมัครเรียนโทร. 085-350-7540 , 084-88-00-255 , ntprintf@gmail.com
# For Each: การวนซ้ำสุดประสิทธิภาพใน JavaScript
การเขียนโปรแกรมไม่เพียงเป็นการสร้างคำสั่งให้คอมพิวเตอร์ทำงานเท่านั้น แต่ยังคือศิลปะของการแก้ปัญหาอีกด้วย หนึ่งในการเขียนโค้ดที่ชัดเจนและง่ายต่อการเข้าใจคือการวนซ้ำ (iteration) และ `for each` ใน JavaScript ถือเป็นหนึ่งในเครื่องมือที่ใช้วนซ้ำผ่าน elements ของ array ที่มีความสำคัญเป็นอย่างยิ่ง Entering the realm of `for each` is like embracing the synergy between ease-of-use and efficiency when it comes to iterating over arrays or array-like objects in JavaScript.
หลายคนอาจจะเคยได้ยินคำว่า `for loop` ในการวนซ้ำ แต่ `for each` ทำงานอย่างไร? `for each` เป็น method ที่ใช้ใน array ของ JavaScript เพื่อวนผ่าน element ต่างๆ ใน array อย่างง่ายดาย โดยที่ไม่ต้องใช้การนับ index หรือกลัวว่าจะเกินขอบเขตของอาร์เรย์
ตัวอย่างการเขียน `for each` ใน JavaScript:
let fruits = ['apple', 'banana', 'cherry'];
fruits.forEach(function(item, index, array) {
console.log(item, index);
});
จะเห็นว่า `for each` รับค่า callback function ที่มี parameter สามตัวคือ item (element ปัจจุบันที่กำลังวนถึง), index (ดัชนีของ element นั้น), และ array (อาร์เรย์ที่กำลังถูกวนด้วย `for each`). ในทุกๆ การวนซ้ำ, JavaScript จะเรียก function นี้และผ่านค่าเหล่านั้นเข้าไป.
Usecase 1: การประมวลผลข้อมูลสินค้า
ประกอบด้วย array ของ object ที่มีข้อมูลสินค้า เราต้องการแสดงชื่อสินค้าและราคาออกมา.
let products = [
{ name: 'Laptop', price: 50000 },
{ name: 'Phone', price: 30000 },
{ name: 'Tablet', price: 20000 }
];
products.forEach(function(product) {
console.log(`Product: ${product.name}, Price: ${product.price}`);
});
การใช้ `for each` เช่นนี้ช่วยลดความซับซ้อนเนื่องจากไม่จำเป็นต้องวนลูปด้วยการนับ index ของ array ด้วยมือ ทำให้โค้ดดูสะอาดและเข้าใจได้ง่าย.
Usecase 2: การอัพเดตรายการที่เลือก
มาดูตัวอย่างการประยุกต์ใช้ `for each` เพื่ออัพเดต element ใน array อื่นตามเงื่อนไขที่กำหนด.
let tasks = [
{ description: 'Write article', done: true },
{ description: 'Review code', done: false },
{ description: 'Update resume', done: false }
];
tasks.forEach(task => {
if (!task.done) {
console.log(`You still need to: ${task.description}`);
}
});
ในที่นี้ `for each` นำมาใช้เพื่อวนผ่าน array ของ tasks เพื่อหางานที่ยังไม่เสร็จแล้วแสดงข้อความเตือน.
การใช้ `for each` ใน JavaScript นับเป็นสิ่งจำเป็นที่นักพัฒนาควรรู้ ไม่ว่าจะเป็นการผ่านการแสดงข้อมูลหรือการจัดการกับ elements ใน array นอกจากนี้ยังช่วยให้โค้ดของคุณดูสะอาดและมีคุณภาพมากขึ้น
หากคุณสนใจวิธีการเขียนโปรแกรมอย่างมืออาชีพ หรือต้องการเพิ่มทักษะการใช้เครื่องมือต่างๆ อย่างถูกวิธี ยินดีต้อนรับสู่ EPT ที่นี่เรามีหลักสูตรต่างๆ ที่จะช่วยเพิ่มเติมความรู้ในภาษารูปแบบต่างๆ ไม่เพียงแต่ JavaScript ทีมของเราพร้อมพัฒนาความเข้าใจในด้านการเขียนโปรแกรมให้กับท่าน โดยเฉพาะการใช้เครื่องมือให้ได้ผลลัพธ์ที่ยอดเยี่ยม มาเป็นส่วนหนึ่งของเราที่ EPT และเริ่มต้นปลดล็อกศักยภาพของคุณในโลกการเขียนโปรแกรมไปกับเรา!
(ข้อความด้านบนได้ถูกแต่งสรรสร้างให้เป็นมิตรกับผู้อ่าน สามารถนำไปใช้เป็นต้นแบบหรือแรงบันดาลใจในการเขียนบทความเพื่อดึงดูดผู้เรียนให้สนใจการเขียนโปรแกรมมากยิ่งขึ้น)
หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง
Tag ที่น่าสนใจ: for_each javascript iteration array callback_function programming loop development code web_development front-end back-end software_engineering
หากมีข้อผิดพลาด/ต้องการพูดคุยเพิ่มเติมเกี่ยวกับบทความนี้ กรุณาแจ้งที่ 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