Javascript 在web上复制ingame资源清册

我试图复制网络上名为CABAL的mmorpg在线游戏的清单，该游戏的清单如下所示：

基本上，inventory有4个选项卡，每个选项卡上有8x8个单元格，因此每个选项卡上总共有64个单元格，总共有256个单元格。不过，每个选项卡上的索引从0到63，总索引从0到255

正如您所看到的，有些项目占1:1（rowspan:colspan）有些项目占2:2，有些项目甚至可以占2:6，例如一件盔甲，无论如何，问题是我尽可能地尝试复制，尽管我只制作了1个制表符

    function createCells(rows, cols) {
        var cells = {},
            x = 0,
            startRow = 0,
            endRow = 0;

        for (var i = 0; i < rows; i++) {
            cells[i] = {};
            for (var j = 0; j < cols; j++) {
                cells[i][j] = { id: "e" + x };

                if (angular.isDefined(items[x])) {
                    cells[i][j] = items[x];
                    if (items[x].colspan > 1 && items[x].rowspan > 1) {
                        startRow = x % rows;
                        endRow = parseInt(x / cols, 10) + items[x].rowspan;
                        console.log(j);
                        console.log("Start column " + startRow + " end rowspan " + endRow + " x = " + x);
                    }
                    // console.log();
                    // if (j >= 5 && j <= 8) {
                    //     x += j;
                    // }
                }

                if (!angular.equals(cells[i][j], {})) {
                    console.log(cells[i][j]);
                }


                x++;
            }
        }

        return cells;
    }

函数createCells（行、列）{
变量单元格={}，
x=0，
startRow=0，
endRow=0；
对于（变量i=0；i1&&items[x].rowspan>1）{
startRow=x%行；
endRow=parseInt（x/cols，10）+items[x].rowspan；
控制台日志（j）；
console.log（“开始列”+startRow+“结束行span”+endRow+“x=“+x”）；
}
//console.log（）；
//如果（j>=5&&j如果您不介意一个小的方法更改，您可以尝试以下方法：


在制作单元格之前，循环浏览所有项目
对于每个项目，识别将被阻止的
行
和
列
组合

现在，您有了所有被阻止（即：非空）单元格的映射。在
createCells
循环中，您可以使用此映射确定是否需要占位符。现在每个单元格有三种情况：


这是一个项目进入的确切位置：添加一个项目
这是一个被项目阻塞的插槽：什么都不做
它与项目无关：插入占位符

我是这样做的：

函数createCells（行、列）{
变量单元格={}；
//创建一个对象，该对象包含项目阻止的所有单元格代码
var itemMap=Object.keys（items）.reduce（函数（map，key）{
变量项=项[键]，
cStart=item.slot%cols，
rStart=数学楼层（item.slot/cols）
对于（变量c=0；c

在工作中：
如果您不介意一个小的方法更改，您可以尝试以下方法：


在制作单元格之前，循环浏览所有项目
对于每个项目，识别将被阻止的
行
和
列
组合

现在，您有了所有被阻止（即：非空）单元格的映射。在
createCells
循环中，您可以使用此映射确定是否需要占位符。现在每个单元格有三种情况：


这是一个项目进入的确切位置：添加一个项目
这是一个被项目阻塞的插槽：什么都不做
它与项目无关：插入占位符

我是这样做的：

函数createCells（行、列）{
变量单元格={}；
//创建一个对象，该对象包含项目阻止的所有单元格代码
var itemMap=Object.keys（items）.reduce（函数（map，key）{
变量项=项[键]，
cStart=item.slot%cols，
rStart=数学楼层（item.slot/cols）
对于（变量c=0；c

在工作中：
Woah，这太好了，可以按预期工作，尽管它仍然需要在多选项卡部分完成，我想我可以自己完成，但是，我有点担心太多循环的性能，这是这段代码的最佳版本和更快的速度，或者可以改进得更好？我将基于相同的方法编写一个示例，但是“更高效”。我建议你不要只关注速度，因为循环1000个项目可能不会是一个问题。给我几分钟时间让你看看一个更高效的例子是什么样的，你可以决定可读性是否受到影响。让它更“高效”并不容易“就性能而言，代码看起来更干净了：另外一个注意事项：您可能希望在行和列中使用数组而不是对象，因为我认为对象不能保证被排序…（抱歉，等待了，还有其他一些事情发生了）嗯，你的代码不知道如何为每个存货制作4个标签，你能帮我吗，如果你愿意的话？也许可以使用角材料md标签组件？哇，这太好了，就像