การวนลูป Array ใน JavaScript ด้วย map();
Supaluck Singjan
Posted on September 29, 2020
การวน loop ข้อมูลบน array ใน JavaScript นั้นสามารถทำได้หลายวิธีอย่างเช่น
การใช้คำสั่ง for
// กำหนดข้อมูล array เป็นดังนี้
let colors = ['red', 'green', 'black', 'yellow', 'blue'];
// เมื่อต้องการแสดงผลข้อมูลทั้งหมดใน array
for (let i = 0; i < colors.length; i++) {
console.log(colors[i]);
}
ผลลัพท์ที่ได้
red
green
black
yellow
blue
ซึ่งวิธีนี้ก็เป็นวิธีพื้นฐานที่ง่ายและสะดวกเหมาะสำหรับมือใหม่
หรือบางครั้งอาจะใช้คำสั่ง forEach
ซึ่งเป็นฟังก์ชั่นในการวนลูปสำหรับ array ซึ่งทำให้การเขียน code สั้นและเข้าใจง่ายขึ้น โดยจะมีตัวแปร parameter เป็น function
// จากตัวแปร array colors ที่กำหนดไว้ด้านบน
let result = colors.forEach((color) => {
// ตัวแปร color จะกำหนดเป็นชื่ออะไรก็ได้ แต่กำหนดเป็น color เพื่อให้เข้าใจง่าย ๆ
console.log(color);
});
ผลลัพท์ที่ได้จะเหมือนกับการใช้คำสั่ง for
red
green
black
yellow
blue
การลูป array ด้วย map()
ฟังก์ชั่น map()
เป็นเครื่องมืออีกขั้นที่สามารถใช้งานได้ทั้งการ loop ข้อมูลและเหมาะสมที่จะทำการแปรสภาพของข้อมูลใน array ตั้งต้น ให้ได้ค่าใหม่บนเงื่อนไขที่ต้องการ รวมทั้งมักเป็นเครื่องมือที่นิยมใช้งานอีกด้วย
array.map(ตัวแปร parameter ซึ่งเป็นฟังก์ชั่น);
ตัวอย่างการใช้งานการ loop เพื่อแสดงข้อมูลทั้งหมดใน array
// ต้องการ print ข้อมูลให้แสดงผลผ่าน console ดังนี้
let numbers = [10, 6, 7, 8, 11, 17, 22, 12];
let result = numbers.map((number) => {
console.log(number);
});
ผลลัพท์คือ
10
6
7
8
11
17
22
12
ตัวอย่างการใช้งานการ loop เพื่อทั้งแสดงข้อมูลและต้องการกรองหาข้อมูลผลลัพท์ในเงื่อนไขที่กำหนดดังนี้
// ต้องการแสดงค่าตัวเลขใน array ว่าเป็นเลขคู่ (even) หรือเลขคี่ (odd)
let numbers = [10, 6, 7, 8, 11, 17, 22, 12];
let typeOfNumbers = numbers.map((number) => {
//เช่นเดียวกันตัวแปร number นั้นสามารถใช้เป็นชื่ออะไรก็ได้
if (number % 2 === 0) {
return 'even';
}
return 'odd';
});
console.log(typeOfNumbers);
ผลลัพท์ที่ได้จะเป็น
["even", "even", "odd", "even", "odd", "odd", "even", "even"]
ซึ่งจะพบว่า map()
เป็นเครื่องมือที่สะดวกและมีความสามารถใช้งานได้หลากหลายมาก หวังว่าบทความนี้จะทำให้ผู้อ่านได้เข้าใจการใช้งาน map() ได้บ้างนะคะ
Posted on September 29, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.