Question

使用以下代码，我遍历颜色数组（favorites），为jsPDF文档创建矩形。

经过5次迭代，我想将x变量重置为startX，然后在每次迭代中添加1.875。同样，在接下来的5次迭代中：将x重置为startX，将1.875增加到10，然后再次直到15。

在这些条件中，我只是没有运气来重置x。我敢肯定这很明显，但是我在这里想念的是什么？

还是应该以其他方式构造循环？

我要完成的任务是创建5矩形的3行。一旦打到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，并且在{em }}循环，从而覆盖它。这就是x不变的原因。

更好的方法可能是仅增加for，然后将x设置为取决于i的值，如下所示：

实际上，最好使用i代替1：

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

循环条件迭代和重置变量的Javascript

2 个答案: