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

{#each} พร้อมดัชนีและคีย์

วนซ้ำผ่านอาร์เรย์และออบเจ็กต์ พร้อมเข้าถึงค่าดัชนีและคีย์

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

บล็อก each

{#each list as item} จะวนซ้ำผ่านอาร์เรย์และแสดงมาร์กอัปหนึ่งครั้งต่อองค์ประกอบ

{#each colors as color}
  <li>{color}</li>
{/each}

การแยกโครงสร้าง

แยกโครงสร้างรูปร่างของรายการในบรรทัดเดียว เพื่อให้เทมเพลตอ่านง่ายขึ้น

{#each users as { id, name }}
  <li>{name}</li>
{/each}

ตัวแปรดัชนี

เพิ่มการผูกค่าตัวที่สองสำหรับดัชนีที่เริ่มนับจากศูนย์

{#each items as item, i}
  <li>{i + 1}. {item}</li>
{/each}

each แบบมีคีย์

ระบุคีย์หลังรายการด้วย (item.id) เพื่อให้ Svelte จับคู่รายการเดิมระหว่างการอัปเดตได้

{#each todos as todo (todo.id)}
  <Todo {todo} />
{/each}

เหตุผลที่คีย์มีความสำคัญ

หากไม่มีคีย์ การจัดลำดับใหม่หรือการกรองอาจทำให้ Svelte สับสนและรีเซ็ตสถานะของคอมโพเนนต์ลูก คีย์ช่วยให้โหนด DOM คงเดิม

บล็อก else

{:else} หลังเนื้อหาการวนซ้ำจะแสดงผลเมื่อรายการว่าง

{#each items as item}
  <li>{item}</li>
{:else}
  <li>No items yet.</li>
{/each}

วนซ้ำผ่านออบเจ็กต์

หากต้องการวนซ้ำผ่านออบเจ็กต์ ให้แปลงเป็น entries ก่อน

{#each Object.entries(map) as [key, value]}
  <li>{key}: {value}</li>
{/each}

เซตและแมป

ครอบด้วย [...set] หรือ [...map] เพื่อวนซ้ำ

each ซ้อนกัน

ซ้อนบล็อก {#each} สำหรับข้อมูลสองมิติ

{#each rows as row}
  {#each row as cell}<td>{cell}</td>{/each}
{/each}

แท็กปิด

ปิดด้วย {/each} เสมอ หากวางแท็กปิดผิดตำแหน่งจะเกิดข้อผิดพลาดระหว่างการคอมไพล์

เคล็ดลับด้านประสิทธิภาพ

ใช้คีย์กับรายการที่เปลี่ยนแปลงบ่อย จะทำให้การจัดลำดับใหม่มีความซับซ้อน O(n) แทน O(n^2)

ตรวจสอบอย่างรวดเร็ว

(item.id) มีบทบาทอย่างไรใน each

สรุปทบทวน

{#each} ใช้วนซ้ำอาร์เรย์ รองรับการผูกค่าดัชนีและคีย์ และแสดงสถานะว่างด้วย {:else}

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

บทเรียน “{#each} พร้อมดัชนีและคีย์” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “{#each} พร้อมดัชนีและคีย์”

วนซ้ำผ่านอาร์เรย์และออบเจ็กต์ พร้อมเข้าถึงค่าดัชนีและคีย์ คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

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

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

บทเรียน “{#each} พร้อมดัชนีและคีย์” ใช้เวลานานแค่ไหน

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

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

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

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

  1. {#if} {#else if} {#else}
  2. {#each} พร้อมดัชนีและคีย์
  3. {#key} สำหรับบังคับให้แสดงผลใหม่
  4. {#each} แบบซ้อนและการอัปเดตตามคีย์
← กลับไปที่ Sveltejs Academy