0Pricing
JavaScript Academy · บทเรียน

พื้นฐาน Map และ Set

ใช้ Map สำหรับค้นหาคีย์→ค่า และ Set สำหรับค่าที่ไม่ซ้ำกัน วนซ้ำ แปลงค่า และประยุกต์ใช้รูปแบบเล็ก ๆ

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

เหตุใดจึงใช้แมปและเซต

เป้าหมาย: เลือกโครงสร้างจัดเก็บที่เหมาะสม

  • แมป: คีย์→ค่า (คีย์ชนิดใดก็ได้)
  • เซต: ค่าไม่ซ้ำกัน
  • วนซ้ำและแปลงข้อมูล
  • รูปแบบการใช้งานทั่วไปขนาดเล็ก
พื้นฐาน Map และ Set — ภาพประกอบ 1

แมป: 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);
พื้นฐาน Map และ Set — ภาพประกอบ 2

เซต: ค่าไม่ซ้ำกัน

เซต เก็บสำเนาของแต่ละค่าไว้เพียงหนึ่งชุด และไม่สนใจค่าซ้ำ

// 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 และ Set — ภาพประกอบ 3

เหตุใดจึงเลือกแมปแทนออบเจ็กต์

แมป รักษาเอกลักษณ์ของออบเจ็กต์เมื่อใช้เป็นคีย์ แต่ออบเจ็กต์ทั่วไปจะแปลงคีย์เป็นสตริง

// 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]"]);
พื้นฐาน Map และ Set — ภาพประกอบ 4

การแปลงข้อมูล

สร้างอาร์เรย์ที่มีค่าไม่ซ้ำจาก เซต สร้าง แมป จาก 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()));
พื้นฐาน Map และ Set — ภาพประกอบ 5

รูปแบบที่ควรจำ

รูปแบบขนาดเล็ก:

  • ใช้แมปสำหรับ counts (คีย์ → ตัวเลข)
  • ใช้เซตเพื่อตรวจสอบการเป็นสมาชิกอย่างรวดเร็ว
  • เลือกใช้แมปเมื่อคีย์ไม่ใช่สตริง หรือต้องการลำดับการแทรก
พื้นฐาน Map และ Set — ภาพประกอบ 6

แบบทดสอบค่าไม่ซ้ำในเซต

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

พื้นฐาน Map และ Set — ภาพประกอบ 7

ทบทวน

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

พื้นฐาน Map และ Set — ภาพประกอบ 8

คำถามที่พบบ่อย

บทเรียน “พื้นฐาน 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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. พื้นฐาน Map และ Set
  2. WeakMap และ WeakSet — ความเป็นส่วนตัวและแคชอย่างง่าย
  3. รูปแบบการวนซ้ำ
← กลับไปที่ JavaScript Academy