{#each} แบบซ้อนและการอัปเดตตามคีย์
จัดการรายการแบบซ้อนและทำให้ DOM อัปเดตอย่างมีประสิทธิภาพด้วยบล็อก each ที่มีคีย์
{#each} แบบซ้อนและการอัปเดตตามคีย์ เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Sveltejs Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
สองมิติ
ซ้อนบล็อก {#each} เพื่อแสดงตาราง กริด หรือต้นไม้
{#each rows as row, i}
<tr>
{#each row as cell, j}
<td>{cell}</td>
{/each}
</tr>
{/each}คีย์ในทุกระดับ
เพิ่มคีย์ในทุกระดับเพื่อให้การอัปเดตมีประสิทธิภาพ
{#each rows as row (row.id)}
{#each row.cells as cell (cell.id)}
...
{/each}
{/each}โครงสร้างต้นไม้
ใช้คอมโพเนนต์ที่เหมาะกับการเรียกซ้ำหรือบล็อก each สำหรับข้อมูลรูปแบบต้นไม้
หลีกเลี่ยงคีย์ที่เป็นดัชนี
การใช้ดัชนีของอาร์เรย์เป็นคีย์จะใช้ไม่ได้เมื่อมีการแทรกหรือลบรายการตรงกลาง ควรใช้ id ที่คงที่แทน
กับดักของข้อมูลที่เปลี่ยนแปลงได้
การเปลี่ยนอาร์เรย์ซ้อนโดยไม่กำหนดการอ้างอิงภายนอกใหม่จะทำให้รีแอกทีฟทำงานผิดพลาด ให้กำหนดค่าใหม่ที่ระดับบนสุด
rows = rows.map(r => r.id === id ? {...r, name} : r);การกรองและการจัดเรียง
ส่งคืนอาร์เรย์ใหม่เสมอเมื่อกรองหรือจัดเรียง การเปลี่ยนแปลงอาร์เรย์เดิมโดยตรงจะไม่ทำให้เกิดการอัปเดต
sorted = [...items].sort();ประสิทธิภาพ
คีย์ทำให้การเพิ่ม ลบ หรือย้ายรายการมีความซับซ้อน O(n) แทนที่จะต้องเรนเดอร์ใหม่ทั้งหมด
การจัดลำดับรายการใหม่
เมื่อมีคีย์ การทำภาพเคลื่อนไหวขณะจัดลำดับใหม่ทำได้ง่าย โดยใช้ร่วมกับ animate:flip
การแสดงผลแบบมีเงื่อนไขภายใน
ผสมบล็อก {#if} ภายใน each เพื่อควบคุมอย่างละเอียดว่ารายการใดจะแสดง
คอมโพเนนต์ต่อรายการ
สำหรับรายการที่ซับซ้อน ให้แสดงผลคอมโพเนนต์ลูกเพื่อให้เนื้อหาในลูปสั้นและดูแลง่าย
{#each todos as todo (todo.id)}
<Todo {todo} />
{/each}รูปแบบการแบ่งหน้า
สำหรับรายการยาว ให้แบ่งหน้าหรือใช้การแสดงผลเสมือน แทนการสร้างโหนดหลายพันรายการ
ตรวจสอบอย่างรวดเร็ว
เหตุใดจึงควรใช้รหัสประจำตัวที่คงที่แทนดัชนีเป็นคีย์
สรุปทบทวน
ซ้อนบล็อก each สำหรับข้อมูลสองมิติ ใช้รหัสประจำตัวที่คงที่เป็นคีย์ในทุกระดับ และกำหนดคอลเลกชันใหม่เสมอเพื่อให้เกิดการอัปเดต
เรียนรู้ HTML ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 41
- บทเรียน
- 163
คำถามที่พบบ่อย
บทเรียน “{#each} แบบซ้อนและการอัปเดตตามคีย์” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “{#each} แบบซ้อนและการอัปเดตตามคีย์” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “{#each} แบบซ้อนและการอัปเดตตามคีย์”
จัดการรายการแบบซ้อนและทำให้ DOM อัปเดตอย่างมีประสิทธิภาพด้วยบล็อก each ที่มีคีย์ คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “{#each} แบบซ้อนและการอัปเดตตามคีย์” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม
ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- {#if} {#else if} {#else}
- {#each} พร้อมดัชนีและคีย์
- {#key} สำหรับบังคับให้แสดงผลใหม่
- {#each} แบบซ้อนและการอัปเดตตามคีย์