javascript - 无法创建自动填充数组而不手动写入

Question

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

我想创建一个空数组，命名为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 值是(数组索引/列数)向下舍入为最接近的整数
• y 值是(数组索引/#列)

因此，您可以从长度为(行 * 列)的空数组开始，用圆大小填充每个条目，然后将每个元素映射到通过将数组值乘以 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);

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