将数组迭代到自定义网格中

Posted 2023-02-22

【中文标题】将数组迭代到自定义网格中

【英文标题】：Iterate an array into a custom grid

【发布时间】：2016-12-29 23:41:35

【问题描述】：

我有一个与带有列和行的表格类似的网格，但使用 div 和 span 自定义创建，我想用来自许多数组的值填充每个单元格，但实际上并没有工作：| 所以这是我生成这些数组的函数：

function generate(count, values) 
    return Array.apply(null,  length: count ).map(function () 
        var r = [],
            array = values.slice();
        while (array.length) 
            r.push(array.splice(Math.floor(Math.random() * array.length), 1)[0]);
        
        return r;
    );
;

var myStringArray = generate(7, [1, 2, 3, 4, 5, 6, 7]);
var arrayLength = myStringArray.length;
for (var i = 0; i < arrayLength; i++) 
  console.log(myStringArray[i]);

我尝试在每一行上添加每个数组，但不幸的是不起作用。

    Array.from(document.getElementsByClassName('cell')).forEach(function(e, j) 
  e.textContent = myStringArray[i];

);

fiddle:

【参考方案1】：

我不确定我是否理解正确，但我会试试这个 JS 代码。

首先，我们必须获取您的 2D 数组并计算 x 和 y 坐标。它是你细胞的索引。如果一行中有 7 个单元格和 4 行，则有 7*4=28 个输出元素（称为Cell）。所有Cell 在一个长的一维数组中。在第 7 个元素之后开始新的行（以及在第 14 个等之后）。列号是索引（一维数组中Cell 的数量）mod 7（一行的元素数）。

索引 0 --> x = 索引 % 7 = 0 % 7 = 0

索引 6 --> x = 索引 % 7 = 6 % 7 = 6

索引 7 --> x = 索引 % 7 = 7 % 7 = 0

现在我们需要行号。这也是 Index 但除以 7（一行的元素数）

索引 0 --> y = 索引 / 7 = 0 / 7 = 0

索引 6 --> y = 索引 / 7 = 6 / 7 = 0.85...

索引 7 --> y = 索引 / 7 = 7 / 7 = 1

索引 8 --> y = 索引 / 7 = 8 / 7 = 1.14...

1.14 不是一个好的行号。所以我们必须用Math.floor 删掉点之后的数字。

现在我们有了坐标 x 和 y。我们可以在 2D 数组中使用它们，仅此而已:)

Array.from(document.getElementsByClassName('cell')).forEach(function(e, j)
  //
  var y = Math.floor(j/myStringArray.length);
  var x = j%myStringArray.length;
  e.textContent = myStringArray[y][x] /*+"("+x+","+y+")"*/;
);

编辑过的小提琴：https://jsfiddle.net/truvh94a/6/

如果不是您想要的，请发布示例结果。

【讨论】：

是的，但我收到一个错误：TypeError: myStringArray[y] is undefined

我认为你也应该使用 Math.Round() 和 Math.floor 来插入四舍五入的数字。

Math.floor 在这种情况下更好，因为我需要下一个“较小”的数字（截去小数点后的数字）

JS-Fiddle 对你有用吗？我使用 Chromium 作为浏览器。这可能取决于浏览器...我不知道 :)

部分工作，正在插入十进制数字，Math.floor 似乎不被考虑：|而不是加 1, 5 是加 1(0,0), 5(1,0) 等等。

【参考方案2】：

与generate 相比，使用两个不太具体的实用程序函数来解决您的问题。

//retuns an Array of nodes that match the css-selector
function $$(selector, ctx)
    if(!ctx || !ctx.querySelectorAll) ctx = document;
    return Array.from(ctx.querySelectorAll(selector));


//shuffles an Array in place and returns it
function shuffle(arr)
    for(var i=arr.length, j, tmp; i-->1;)
        tmp = arr[ j = 0|(Math.random() * i) ];
        arr[j] = arr[i];
        arr[i] = tmp;
    
    return arr;


//forEach `.row` ...
$$('.row').forEach(function(row)
    // ... generate a shuffled sequence ...
    var values = shuffle([1,2,3,4,5,6,7]);
    //... and apply the values to the `.cell`s textContent
    $$('.cell', row).forEach(function(cell, i)
        cell.textContent = values[i];
    );
);