พื้นฐาน Map และ Set
ใช้ Map สำหรับค้นหาคีย์→ค่า และ Set สำหรับค่าที่ไม่ซ้ำกัน วนซ้ำ แปลงค่า และประยุกต์ใช้รูปแบบเล็ก ๆ
พื้นฐาน Map และ Set เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 3 บทเรียน
เหตุใดจึงใช้แมปและเซต
เป้าหมาย: เลือกโครงสร้างจัดเก็บที่เหมาะสม
- แมป: คีย์→ค่า (คีย์ชนิดใดก็ได้)
- เซต: ค่าไม่ซ้ำกัน
- วนซ้ำและแปลงข้อมูล
- รูปแบบการใช้งานทั่วไปขนาดเล็ก

แมป: set/get/has
แมป มี set, get, has, delete, clear และคุณสมบัติ ขนาด
// Map: key→value with any key type
const userToScore = new Map();
// set values
userToScore.set("ayla", 10);
userToScore.set("mina", 15);
// read values
console.log("ayla:", userToScore.get("ayla"));
console.log("has lena?", userToScore.has("lena"));
// size
console.log("size:", userToScore.size);

เซต: ค่าไม่ซ้ำกัน
เซต เก็บสำเนาของแต่ละค่าไว้เพียงหนึ่งชุด และไม่สนใจค่าซ้ำ
// Set: unique values
const seen = new Set();
// add values (duplicates are ignored)
seen.add("red");
seen.add("blue");
seen.add("red"); // ignored
console.log("size:", seen.size);
console.log("has red?", seen.has("red"));
seen.delete("blue");
console.log("after delete:", seen.size);

เหตุใดจึงเลือกแมปแทนออบเจ็กต์
แมป รักษาเอกลักษณ์ของออบเจ็กต์เมื่อใช้เป็นคีย์ แต่ออบเจ็กต์ทั่วไปจะแปลงคีย์เป็นสตริง
// Map can use objects as keys directly
const key1 = { id: 1 };
const key2 = { id: 1 }; // different reference
const map = new Map();
map.set(key1, "A");
console.log("get key1:", map.get(key1));
console.log("get key2:", map.get(key2)); // undefined (different object)
const obj = {};
obj[key1] = "B"; // coerces key to "[object Object]"
console.log("object key:", obj["[object Object]"]);

การแปลงข้อมูล
สร้างอาร์เรย์ที่มีค่าไม่ซ้ำจาก เซต สร้าง แมป จาก pairs และแปลงกลับด้วย entries()
// Unique array values via Set
const nums = [2, 2, 3, 4, 3];
const unique = Array.from(new Set(nums));
console.log("unique:", unique);
// Map from pairs; back to pairs
const pairs = [["a", 1], ["b", 2]];
const m = new Map(pairs);
console.log("get a:", m.get("a"));
console.log("entries:", Array.from(m.entries()));

รูปแบบที่ควรจำ
รูปแบบขนาดเล็ก:
- ใช้แมปสำหรับ counts (คีย์ → ตัวเลข)
- ใช้เซตเพื่อตรวจสอบการเป็นสมาชิกอย่างรวดเร็ว
- เลือกใช้แมปเมื่อคีย์ไม่ใช่สตริง หรือต้องการลำดับการแทรก

แบบทดสอบค่าไม่ซ้ำในเซต
ตรวจสอบอย่างรวดเร็ว: ความไม่ซ้ำกัน

ทบทวน
ทบทวน: เลือกแมปสำหรับการค้นหาแบบคีย์→ค่า (คีย์ชนิดใดก็ได้) และเลือกเซตสำหรับค่าที่ไม่ซ้ำกัน วนซ้ำและแปลงข้อมูลด้วย entries()/Array.from

คำถามที่พบบ่อย
บทเรียน “พื้นฐาน Map และ Set” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “พื้นฐาน Map และ Set” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 3 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “พื้นฐาน Map และ Set”
ใช้ Map สำหรับค้นหาคีย์→ค่า และ Set สำหรับค่าที่ไม่ซ้ำกัน วนซ้ำ แปลงค่า และประยุกต์ใช้รูปแบบเล็ก ๆ คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน
บทเรียน “พื้นฐาน Map และ Set” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม
ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- พื้นฐาน Map และ Set
- WeakMap และ WeakSet — ความเป็นส่วนตัวและแคชอย่างง่าย
- รูปแบบการวนซ้ำ