การใช้งาน Map ในภาษา TypeScript แบบง่าย ๆ

เมื่อเราพูดถึงการจัดการข้อมูลในภาษาโปรแกรม TypeScript (หรือ JavaScript) หนึ่งในโครงสร้างข้อมูลที่น่าสนใจและมีอำนาจมากคือ `Map` นั่นเอง ในบทความนี้เราจะมาทำความรู้จักกับ Map ว่าคืออะไร วิธีการทำงานของมัน พร้อมตัวอย่าง code ที่ใช้งานง่าย และยกตัวอย่าง use case ในโลกจริงที่เกี่ยวข้องกับการใช้งาน Map

Map คืออะไร?

`Map` เป็นโครงสร้างข้อมูลที่รองรับการเก็บค่าที่สามารถเข้าถึงได้ง่าย โดยจะเก็บข้อมูลในรูปแบบของคู่ของคีย์ (key) และค่า (value) ซึ่งแตกต่างจาก Object ใน JavaScript และ TypeScript ที่รองรับเฉพาะคีย์ที่เป็น string หรือ symbol อย่างเดียว ในขณะที่ Map นั้นคีย์สามารถเป็นชนิดข้อมูลใดก็ได้ รวมถึงฟังก์ชันหรือวัตถุ (object)

ทำไมถึงควรใช้ Map?

การสร้างและเพิ่มข้อมูลใน Map

การสร้าง Map สามารถทำได้ง่ายๆ ด้วย constructor ของ Map:

 let myMap = new Map<number, string>();

ในตัวอย่างนี้ เราสร้าง Map ที่จะเก็บคีย์เป็นเลขจำนวนเต็ม (number) และค่าเป็น string

การเพิ่มข้อมูล

เราสามารถเพิ่มข้อมูลได้ด้วย `set` method ดังนี้:

 myMap.set(1, "One");
myMap.set(2, "Two");
myMap.set(3, "Three");

การเข้าถึงข้อมูล

การเข้าถึงข้อมูลใน Map สามารถทำได้ด้วย `get` method:

 console.log(myMap.get(1)); // Output: One
console.log(myMap.get(2)); // Output: Two

นอกจากนี้ เราสามารถตรวจสอบว่าคีย์นั้นมีอยู่ใน Map หรือไม่ โดยการใช้ `has` method:

 console.log(myMap.has(3)); // Output: true
console.log(myMap.has(4)); // Output: false

การลบข้อมูล

การลบข้อมูลสามารถทำได้ด้วย `delete` method:

 myMap.delete(2);
console.log(myMap.has(2)); // Output: false

การใช้งานทั้งหมด

เราสามารถวนลูปเพื่อเข้าถึงข้อมูลทั้งหมดใน Map ได้ด้วย `forEach` หรือ `for..of`:

 myMap.forEach((value, key) => {
    console.log(`${key}: ${value}`);
});

// หรือใช้ for..of
for (const [key, value] of myMap) {
    console.log(`${key}: ${value}`);
}

ตัวอย่าง Use Case ของ Map ในโลกจริง

มาลองมองในมุมของการใช้งาน Map กับโปรเจคที่น่าสนใจกันบ้าง เช่น การสร้างระบบจัดการข้อมูลผู้ใช้งานในแอปพลิเคชันที่ต้องการเก็บข้อมูลของผู้ใช้ ซึ่งอาจจะมีรหัสผู้ใช้เป็นคีย์ และค่าจะเป็นรายละเอียดอื่นๆ ซึ่งในระยะยาวการจัดการข้อมูลด้วย Map จะช่วยให้การเข้าถึงข้อมูลของผู้ใช้ต่างๆ ได้สะดวกและรวดเร็ว

ตัวอย่างโค้ดระบบจัดการผู้ใช้งาน

 interface User {
    id: number;
    name: string;
    email: string;
}

let usersMap = new Map<number, User>();

// เพิ่มข้อมูลผู้ใช้
usersMap.set(1, { id: 1, name: "John Doe", email: "john@example.com" });
usersMap.set(2, { id: 2, name: "Jane Doe", email: "jane@example.com" });

// เข้าถึงข้อมูลผู้ใช้
let user1 = usersMap.get(1);
if (user1) {
    console.log(`User: ${user1.name}, Email: ${user1.email}`);
}

// ลบผู้ใช้
usersMap.delete(1);
console.log(usersMap.has(1)); // Output: false

// แสดงข้อมูลผู้ใช้ทั้งหมด
usersMap.forEach((user, id) => {
    console.log(`ID: ${id}, Name: ${user.name}, Email: ${user.email}`);
});

สรุป

การใช้งาน `Map` ใน TypeScript เป็นวิธีที่สะดวกและมีประสิทธิภาพในการจัดการข้อมูล โดยเฉพาะอย่างยิ่งเมื่อเราต้องจัดเก็บข้อมูลที่มีความหลากหลาย ไม่ว่าจะเป็นข้อมูลที่ซับซ้อน เช่น ระบบผู้ใช้ หรือการจัดเก็บข้อมูลจาก API นอกจากนี้ ความสามารถในการเข้าถึงข้อมูลที่รวดเร็วจะช่วยให้เราเพิ่มประสิทธิภาพให้กับโปรแกรมของเรา

หากคุณสนใจที่จะเรียนรู้เพิ่มเติมเกี่ยวกับการโปรแกรม หรือการทำงานกับ TypeScript และ JavaScript คุณสามารถมาเรียนรู้ได้ที่ EPT (Expert-Programming-Tutor) ซึ่งมีหลักสูตรการสอนที่หลากหลาย มาร่วมสร้างสรรค์ผลงานโปรแกรมไปด้วยกันเถอะ!

หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง