无需手动编写就无法创建自动填充数组

Question

我想创建一个坐标数组，这样我就不必手动编写100对x和y值。我想在另一个for循环中使用for循环，但我无法实现它。

我想制作一个空的array，名为CoordsArray，并利用最内部的push方法，创建一个混合数组，如下所示：

var coordsArray = [
{x:0,y:0},{x:0,y:20},{x:0,y:40},{x:20,y:0},{x:20,y:20},{x:20,y:40},{x:40,y:0},{x:40,y:20},{x:40,y:40}
]

上面代码的用法是用于创建三行三个圆（使用D3js）而不手动创建数组，因为稍后我将不得不创建一个10行的十个圆并创建每个圆的x和y位置将非常麻烦。实现它的最佳方法是什么？谢谢。

Answer 1

我看到的模式是这样的：

• x值是（数组索引/ cols＃）向下舍入到最接近的整数
• y值是（数组索引/ cols数）的模数

因此，您可以从一个空数组（行* cols）开始，用圆形大小填充每个条目，然后将每个元素映射到通过将数组值乘以x和y计算得到的对象...

let rows = 3,
    cols = 5,
    size = 20;

let data = new Array(rows*cols)
    .fill(size)
    .map((d, i) => ({
        x: d * Math.floor(i/cols),
        y: d * (i%cols)
    }));

console.log(data);

当然，它可能不像嵌套循环那样可读，但我喜欢它......

Answer 2

你应该总是发布你尝试过的代码。

这是一种方式：

var coordsArray = [];

const rows = 10,
  cols = 10,
  size = 20;

for (var row = 0; row < rows; row++) {
  for (var col = 0; col < cols; col++) {
    coordsArray[row * cols + col] = [row * size, col * size];
  }
}