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

รูปแบบการวนซ้ำ

วนซ้ำ Map และ Set ด้วย for...of ใช้ entries/keys/values แปลงเป็นอาร์เรย์ และสร้างตัวนับกับรายการค่าที่ไม่ซ้ำขนาดเล็ก

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

ภาพรวมการวนซ้ำ

เป้าหมาย: เรียนรู้การวนซ้ำที่ง่ายและชัดเจน

  • แมป: entries, keys, values
  • เซต: values
  • แปลงเป็นอาร์เรย์
  • ตัวนับความถี่และรายการที่ไม่ซ้ำกัน
รูปแบบการวนซ้ำ — ภาพประกอบ 1

แมป: entries/keys/values

ใช้ for...of กับแมปเพื่อรับ [คีย์, ค่า] และยังใช้ keys() กับ values() ได้

// Map iterates as [key, value] pairs
const prices = new Map();
prices.set("apple", 3);
prices.set("banana", 2);

for (const [item, cost] of prices) {
  console.log(item, cost);
}

// You can also use keys() or values()
for (const k of prices.keys()) {
  console.log("key:", k);
}
for (const v of prices.values()) {
  console.log("value:", v);
}
รูปแบบการวนซ้ำ — ภาพประกอบ 2

เซต: ลูปแบบง่าย

เซต ให้ค่าไม่ซ้ำกันตามลำดับการแทรก และไม่สนใจค่าซ้ำ

// Set iterates values in insertion order
const colors = new Set(["red", "green", "red", "blue"]);

for (const c of colors) {
  console.log("color:", c);
}

console.log("size:", colors.size);
รูปแบบการวนซ้ำ — ภาพประกอบ 3

การแปลงด้วย Array.from

ใช้ Array.from เพื่อเปลี่ยนแมปหรือเซตเป็นอาร์เรย์ (และเปลี่ยนคู่ข้อมูลเป็นแมป)

// Convert Map to array of pairs, and back
const map1 = new Map([["a", 1], ["b", 2]]);
const pairs = Array.from(map1); // [["a",1],["b",2]]
console.log("pairs:", pairs);

const map2 = new Map(pairs);
console.log("map2 has a?", map2.has("a"));

// Set to array of values
const set1 = new Set([1, 1, 2, 3]);
const arr = Array.from(set1); // [1,2,3]
console.log("arr:", arr);
รูปแบบการวนซ้ำ — ภาพประกอบ 4

ตัวนับความถี่

ตัวนับของแมป เป็นวิธีที่ชัดเจนในการนับจำนวนครั้งที่ข้อมูลปรากฏในรายการ

// Count items in an array using Map
function countItems(list) {
  const counts = new Map();
  for (const x of list) {
    const n = counts.get(x) || 0;
    counts.set(x, n + 1);
  }
  return counts;
}

const fruits = ["apple", "banana", "apple", "apple", "banana"];
const counts = countItems(fruits);

// Print counts as "item: n"
for (const [name, n] of counts) {
  console.log(name + ":", n);
}
รูปแบบการวนซ้ำ — ภาพประกอบ 5

ค่าไม่ซ้ำและการเป็นสมาชิก

ใช้ เซต เพื่อสร้างรายการที่ไม่ซ้ำกัน และตรวจสอบการเป็นสมาชิกอย่างรวดเร็วด้วย has

// Unique values with Set, quick membership test
const numbers = [2, 3, 2, 4, 3, 5];
const unique = Array.from(new Set(numbers));
console.log("unique:", unique);

// Quick membership with Set.has
const allowed = new Set([2, 5]);
console.log("allowed has 2?", allowed.has(2));
console.log("allowed has 4?", allowed.has(4));
รูปแบบการวนซ้ำ — ภาพประกอบ 6

แบบทดสอบการวนซ้ำแมป

ตรวจสอบอย่างรวดเร็ว: ลูปแมปที่ดีที่สุดสำหรับคีย์และค่า

รูปแบบการวนซ้ำ — ภาพประกอบ 7

ทบทวน

ทบทวน: วนซ้ำแมปด้วย for...of เพื่อรับ [คีย์, ค่า] วนซ้ำค่าของเซตโดยตรง และแปลงข้อมูลด้วย Array.from ใช้แมปสำหรับตัวนับ และใช้เซตสำหรับรายการที่ไม่ซ้ำกัน

รูปแบบการวนซ้ำ — ภาพประกอบ 8

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

บทเรียน “รูปแบบการวนซ้ำ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “รูปแบบการวนซ้ำ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 3 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “รูปแบบการวนซ้ำ”

วนซ้ำ Map และ Set ด้วย for...of ใช้ entries/keys/values แปลงเป็นอาร์เรย์ และสร้างตัวนับกับรายการค่าที่ไม่ซ้ำขนาดเล็ก คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 3 บทเรียน

บทเรียน “รูปแบบการวนซ้ำ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม

ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

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

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