0Pricing
Sveltejs Academy · Урок

{#each} с индексом и ключом

Перебирайте массивы и объекты, обращаясь к значениям индекса и ключа

«{#each} с индексом и ключом» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 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} с индексом и ключом» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.

Чему я научусь в уроке «{#each} с индексом и ключом»?

Перебирайте массивы и объекты, обращаясь к значениям индекса и ключа Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 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