การวนลูป Array ใน JavaScript ด้วย map();

การวน 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() ได้บ้างนะคะ