时间戳

首页 > 解决方案 > 不手动写入就无法创建自动填充数组

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

问题描述

我想创建一个坐标数组，这样我就不必手动编写 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 位置将会很麻烦。实现它的最佳方法是什么？谢谢。

标签： javascriptd3.js

解决方案

我看到的模式是这样的：

  • 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);

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

推荐阅读