JavaScript для условных итераций цикла и сброса переменной

Question

С помощью следующего кода я перебираю массив цветов (favorites), создавая прямоугольники для jsPDF документа.

После 5 итераций я хочу сбросить xПеременная обратно startX, а затем добавить 1,875 с каждой итерации.Аналогично для следующих 5 итераций: сбросьте x на startX, добавив 1,875 до 10, затем снова до 15.

Мне просто не повезло, сбрасывая x в этих условных выражениях.Я уверен, что это что-то очевидное, но что я здесь упускаю?

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

Что я пытаюсь сделать, это создать до 3 строкиз 5 прямоугольников.Как только я нажму 5, начнем новую строку, отсюда и сброс x, который является координатой местоположения страницы.

let startX = 1
let startY = 1

let secondY = 4
let thirdY = 6.5

let n = favorites.length

for (let i = 0, x = startX, y = startY; i < n; x += 1.875, i++) {
    if (i < 5) {
        doc.setFillColor(favorites[i].h)
        doc.rect(x, y, 1.5, 1, 'F')
        doc.text(favorites[i].h.toString(), x, y + 1.5)
    } else if (i >= 5 && i < 10) {
        x = 1 // resets but then doesn't increment
        y = secondY
        doc.setFillColor(favorites[i].h)
        doc.rect(x, y, 1.5, 1, 'F')
        doc.text(favorites[i].h.toString(), x, y + 1.5)
    } else if (i >= 10 && i < 15) {
        x = 1 // resets but then doesn't increment
        y = thirdY
        doc.setFillColor(favorites[i].h)
        doc.rect(x, y, 1.5, 1, 'F')
        doc.text(favorites[i].h.toString(), x, y + 1.5)
    }
}

Answer 1

Вы можете использовать оператор по модулю (%) и установить x и y вне объявления цикла:

const yValues = [1, 4, 6.5];

for (let i = 0 ; i < 15; i++) {
  const x = 1 + ((i%5) * 1.875);
  const y = yValues[Math.floor(i/5)];
  // commented lines to make this example run
  // doc.setFillColor(favorites[i].h)
  // doc.rect(x, y, 1.5, 1, 'F')
  // doc.text(favorites[i].h.toString(), x, y + 1.5)  
  console.log({x,y});
}

Answer 2

Увеличение в цикле for происходит перед любыми командами в цикле.Прямо сейчас каждая итерация во втором и третьем if блоках сбрасывает x в 1 и всегда делает это после увеличения x в цикле for, перезаписывая его.Вот почему x не меняется.

Лучшим подходом может быть увеличение значения i и установка x в зависимости от значения i, что-то вроде этого:

x = 1 + ((i - 5) * 1.875)
x = 1 + ((i - 10) * 1.875)

И на самом деле, было бы еще лучше использовать startX вместо 1:

x = startX + ((i - 5) * 1.875)
x = startX + ((i - 10) * 1.875)