{#each ...}

{#each expression as name}...{/each}

{#each expression as name, index}...{/each}

Итерацию по значениям можно выполнять с помощью блока each. Значения могут быть массивами, объектами, похожими на массивы (т. е. любыми объектами со свойством length), или итерируемыми объектами, такими как Map и Set — другими словами, всем, что можно использовать с Array.from:

<h1>Список покупок</h1>
<ul>
  {#each items as item}
    <li>{item.name} x {item.qty}</li>
  {/each}
</ul>

Блок each также может указывать индекс, аналогичный второму аргументу в функции обратного вызова array.map(...):

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

Блоки each с привязкой по ключам

{#each expression as name (key)}...{/each}

{#each expression as name, index (key)}...{/each}

Если предоставлено выражение key, которое должно уникально идентифицировать каждый элемент списка, Svelte использует его для выполнения сравнения списка при изменении данных, а не добавления или удаления элементов в конце. Ключ может быть любым объектом, но рекомендуется использовать строки и числа, так как они позволяют сохранять идентичность, когда сами объекты изменяются:

{#each items as item (item.id)}
  <li>{item.name} x {item.qty}</li>
{/each}

<!-- или с дополнительным значением индекса -->
{#each items as item, i (item.id)}
  <li>{i + 1}: {item.name} x {item.qty}</li>
{/each}

Вы можете свободно использовать деструктуризацию и паттерны rest в блоках each:

{#each items as { id, name, qty }, i (id)}
  <li>{i + 1}: {name} x {qty}</li>
{/each}

{#each objects as { id, ...rest }}
  <li><span>{id}</span><MyComponent {...rest} /></li>
{/each}

{#each items as [id, ...rest]}
  <li><span>{id}</span><MyComponent values={rest} /></li>
{/each}

Блоки each без элемента

{#each expression}...{/each}

{#each expression, index}...{/each}

Если вы хотите просто отрендерить что-то n раз, вы можете опустить часть as (демонстрация):

<div class="chess-board">
  {#each { length: 8 }, rank}
    {#each { length: 8 }, file}
      <div class:black={(rank + file) % 2 === 1}></div>
    {/each}
  {/each}
</div>

Блоки else

{#each expression as name}...{:else}...{/each}

Блок each также может иметь часть {:else}, которая рендерится, если список пуст:

{#each todos as todo}
  <p>{todo.text}</p>
{:else}
  <p>Сегодня задач нет!</p>
{/each}