JavaScript Map และ Set

JavaScript

เรียนรู้ Map และ Set ใน JavaScript ตั้งแต่การจัดเก็บคู่คีย์-ค่า การเพิ่มและลบข้อมูล การวนลูป การกำจัดข้อมูลซ้ำ การเปรียบเทียบกับ Object และ Array ไปจนถึงการประยุกต์ใช้กับข้อมูลจริง

EP 14: JavaScript Map และ Set

1. Map คืออะไร

const scores = new Map();

scores.set('Mali', 90);
scores.set('Narin', 85);
scores.set('Ploy', 95);

console.log(scores.get('Mali'));
console.log(scores.has('Narin'));
console.log(scores.size);

2. เพิ่ม แก้ไข และลบข้อมูลใน Map

const inventory = new Map();

inventory.set('pen', 100);
inventory.set('book', 50);
inventory.set('pen', 120);

console.log(inventory.get('pen'));

inventory.delete('book');
console.log(inventory.has('book'));
console.log(inventory.size);

inventory.clear();
console.log(inventory.size);

3. Map รองรับ Key ได้หลายชนิด

const data = new Map();
const firstUser = { id: 1 };
const secondUser = { id: 1 };

data.set(100, 'numeric key');
data.set(true, 'boolean key');
data.set(firstUser, 'first user');

console.log(data.get(100));
console.log(data.get(true));
console.log(data.get(firstUser));
console.log(data.get(secondUser));

4. วนลูปข้อมูลใน Map

const prices = new Map([
  ['coffee', 60],
  ['tea', 45],
  ['water', 15]
]);

for (const [name, price] of prices) {
  console.log(`${name}: ${price} บาท`);
}

console.log([...prices.keys()]);
console.log([...prices.values()]);

prices.forEach((price, name) => {
  console.log(name, price);
});

5. Set คืออะไร

const tags = new Set();

tags.add('javascript');
tags.add('web');
tags.add('javascript');

console.log(tags.size);
console.log(tags.has('web'));
console.log(tags.has('python'));
console.log([...tags]);

6. เพิ่ม ตรวจสอบ และลบค่าใน Set

const attendees = new Set(['Mali', 'Narin']);

attendees.add('Ploy');
attendees.add('Mali');

console.log(attendees.size);
console.log(attendees.has('Ploy'));

attendees.delete('Narin');
console.log([...attendees]);

attendees.clear();
console.log(attendees.size);

7. กำจัดข้อมูลซ้ำใน Array ด้วย Set

const categories = [
  'book',
  'electronics',
  'book',
  'clothing',
  'electronics'
];

const uniqueCategories = [...new Set(categories)];

console.log(uniqueCategories);

const users = [
  { id: 1, name: 'Mali' },
  { id: 1, name: 'Mali' },
  { id: 2, name: 'Narin' }
];

const uniqueObjects = [...new Set(users)];

console.log(uniqueObjects.length);

const uniqueById = [
  ...new Map(users.map(user => [user.id, user])).values()
];

console.log(uniqueById);

8. เปรียบเทียบ Object, Array, Map และ Set

9. เลือกใช้ Map แทน Object เมื่อใด

const userProfile = {
  name: 'Mali',
  role: 'editor'
};

const sessionById = new Map();
sessionById.set(1001, { userId: 1, active: true });
sessionById.set(1002, { userId: 2, active: false });

console.log(userProfile.name);
console.log(sessionById.get(1001));

for (const [sessionId, session] of sessionById) {
  console.log(sessionId, session.active);
}

10. Set กับการหาจุดร่วมของข้อมูล

function intersection(setA, setB) {
  return new Set([...setA].filter(value => setB.has(value)));
}

function difference(setA, setB) {
  return new Set([...setA].filter(value => !setB.has(value)));
}

const first = new Set([1, 2, 3, 4]);
const second = new Set([3, 4, 5, 6]);

console.log([...intersection(first, second)]);
console.log([...difference(first, second)]);

11. สร้างระบบนับความถี่ของข้อมูลด้วย Map

function countFrequency(items) {
  const frequency = new Map();

  for (const item of items) {
    const currentCount = frequency.get(item) ?? 0;
    frequency.set(item, currentCount + 1);
  }

  return frequency;
}

const orders = [
  'pending', 'paid', 'pending', 'cancelled',
  'paid', 'pending'
];

const result = countFrequency(orders);

for (const [status, count] of result) {
  console.log(`${status}: ${count}`);
}

12. ข้อควรระวังเมื่อใช้ Map และ Set

• Map และ Set เปรียบเทียบ Object ตามตัวตนของ Object ไม่ใช่เปรียบเทียบ property ภายในทีละค่า
• Map ใช้ `size` สำหรับนับรายการ ไม่ใช่ `length`
• Set ใช้ `has()` เพื่อตรวจสอบสมาชิก ไม่ใช่ `includes()` แบบ Array
• Map และ Set ไม่ได้แปลงเป็น JSON โดยตรงในรูปแบบที่เก็บข้อมูลทั้งหมดตามต้องการ ต้องกำหนดวิธีแปลงข้อมูลอย่างชัดเจน
• Map และ Set รักษาลำดับการวนลูปตามลำดับการเพิ่มสมาชิก แต่การลบแล้วเพิ่ม key หรือค่ากลับเข้ามาใหม่อาจทำให้ตำแหน่งเปลี่ยนไป
• หากใช้ Object เป็น key หรือสมาชิก ต้องเก็บ reference ที่ถูกต้องไว้เพื่อค้นหาหรือลบรายการนั้น

13. แปลง Map และ Set เป็น JSON

const prices = new Map([
  ['pen', 10],
  ['book', 80]
]);

const uniqueTags = new Set(['study', 'coding', 'study']);

const mapJson = JSON.stringify([...prices]);
const setJson = JSON.stringify([...uniqueTags]);

console.log(mapJson);
console.log(setJson);

const restoredMap = new Map(JSON.parse(mapJson));
const restoredSet = new Set(JSON.parse(setJson));

console.log(restoredMap.get('book'));
console.log([...restoredSet]);

14. แบบฝึกหัดท้ายบท

const applicants = [
  'Mali', 'Narin', 'Mali', 'Ploy',
  'Narin', 'Mali'
];

const uniqueApplicants = [...new Set(applicants)];
const applicantCounts = new Map();

for (const name of applicants) {
  applicantCounts.set(
    name,
    (applicantCounts.get(name) ?? 0) + 1
  );
}

console.log(uniqueApplicants);
console.log([...applicantCounts]);

15. สรุปบทเรียน