รูปแบบการวนซ้ำ
วนซ้ำ 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
- แปลงเป็นอาร์เรย์
- ตัวนับความถี่และรายการที่ไม่ซ้ำกัน

แมป: 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);
}

เซต: ลูปแบบง่าย
เซต ให้ค่าไม่ซ้ำกันตามลำดับการแทรก และไม่สนใจค่าซ้ำ
// 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);

การแปลงด้วย 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);

ตัวนับความถี่
ตัวนับของแมป เป็นวิธีที่ชัดเจนในการนับจำนวนครั้งที่ข้อมูลปรากฏในรายการ
// 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);
}

ค่าไม่ซ้ำและการเป็นสมาชิก
ใช้ เซต เพื่อสร้างรายการที่ไม่ซ้ำกัน และตรวจสอบการเป็นสมาชิกอย่างรวดเร็วด้วย 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));

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

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

คำถามที่พบบ่อย
บทเรียน “รูปแบบการวนซ้ำ” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “รูปแบบการวนซ้ำ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ 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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ