Как остановить цикл map() по условию?

Question

[Айнур Ярулин]

Здравствуйте, как можно остановить цикл map()?
В моём случае я вывожу элементы на страницу и мне нужно, чтобы
цикл перестал работать после того, как он выведет нужный мне элемент
Пример кода: https://codepen.io/squadcoder/pen/KKNvBbv?editors=1010

Comments

[Айнур Ярулин]

Или в таком случае нужно использовать другой цикл?

Answer 1

[Дмитрий Беляев]

Остановить итерацию в методе map никак.
Можно найти индекс нужного элемента с помощью метода findIndex() и обрезать массив относительно него.
Только стоит учесть, что искомого элемента может не быть в массиве, и тогда findIndex() вернет -1

const arr = [
  {value: 1},
  {value: 2},
  {value: 3},
  {value: 4, active: true},
  {value: 0},
  {value: 0},
  {value: 0},
  {value: 0},
  {value: 0},
]

const activeIndex = arr.findIndex(item => item.active);
wrapper.innerHTML = (activeIndex === -1 ? arr : arr.slice(0, activeIndex + 3)).map(item => `
  <div class="block ${item.active ? "active" : ""}">
    ${item.value}
  </div>
`).join("")

Comments

[Айнур Ярулин]

Спасибо, в копилку знаний добавлен новый метод ❤

Answer 2

[WbICHA]

Нет. Никак. Если нужен выход из цикла до полного прохода, нужно использовать фор.
Впрочем, судя по всему ты хочешь сделать пагинатор, поэтому лучше загугли как их делают другие.

Comments

[Айнур Ярулин]

Не, не пагинатор)