用于循环条件迭代和重置变量的 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});
}