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

supaluckn

Supaluck Singjan

Posted on September 29, 2020

การวนลูป 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]);
}
Enter fullscreen mode Exit fullscreen mode

ผลลัพท์ที่ได้

red
green
black
yellow
blue
Enter fullscreen mode Exit fullscreen mode

ซึ่งวิธีนี้ก็เป็นวิธีพื้นฐานที่ง่ายและสะดวกเหมาะสำหรับมือใหม่

หรือบางครั้งอาจะใช้คำสั่ง forEach

ซึ่งเป็นฟังก์ชั่นในการวนลูปสำหรับ array ซึ่งทำให้การเขียน code สั้นและเข้าใจง่ายขึ้น โดยจะมีตัวแปร parameter เป็น function

// จากตัวแปร array colors ที่กำหนดไว้ด้านบน
let result = colors.forEach((color) => { 
    // ตัวแปร color จะกำหนดเป็นชื่ออะไรก็ได้ แต่กำหนดเป็น color เพื่อให้เข้าใจง่าย ๆ
    console.log(color);
});
Enter fullscreen mode Exit fullscreen mode

ผลลัพท์ที่ได้จะเหมือนกับการใช้คำสั่ง for

red
green
black
yellow
blue
Enter fullscreen mode Exit fullscreen mode

การลูป 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);
});
Enter fullscreen mode Exit fullscreen mode

ผลลัพท์คือ

10
6
7
8
11
17
22
12
Enter fullscreen mode Exit fullscreen mode

ตัวอย่างการใช้งานการ 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);
Enter fullscreen mode Exit fullscreen mode

ผลลัพท์ที่ได้จะเป็น

["even", "even", "odd", "even", "odd", "odd", "even", "even"]
Enter fullscreen mode Exit fullscreen mode

ซึ่งจะพบว่า map() เป็นเครื่องมือที่สะดวกและมีความสามารถใช้งานได้หลากหลายมาก หวังว่าบทความนี้จะทำให้ผู้อ่านได้เข้าใจการใช้งาน map() ได้บ้างนะคะ

💖 💪 🙅 🚩
supaluckn
Supaluck Singjan

Posted on September 29, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related