这个建表代码在 JavaScript 中是如何工作的

Question

这些函数来自http://eloquentjavascript.net/。这不是我的代码，但由于它在免费教科书中，我认为它应该可以用于教育目的，尤其是。当任何人都可以访问该网站并获取它时。

---

完整代码用于建表；这是第一部分。可能是函数里面有这么多的函数让我很困惑？

function rowHeights(rows) {
  return rows.map(function(row) {
    return row.reduce(function(max, cell) {
      return Math.max(max, cell.minHeight());
    }, 0);
  });
}

function colWidths(rows) {
  return rows[0].map(function(_, i) {
    return rows.reduce(function(max, row) {
      return Math.max(max, row[i].minWidth());
    }, 0);
  });
}

然后他们继续实际绘制一张桌子；如果我理解了第一部分，我可能会理解这一点：

function drawTable(rows) {
  var heights = rowHeights(rows);
  var widths = colWidths(rows);

  function drawLine(blocks, lineNo) {
    return blocks.map(function(block) {
      return block[lineNo];
    }).join(" ");
  }

  function drawRow(row, rowNum) {
    var blocks = row.map(function(cell, colNum) {
      return cell.draw(widths[colNum], heights[rowNum]);
    });
    return blocks[0].map(function(_, lineNo) {
      return drawLine(blocks, lineNo);
    }).join("\n");
  }

  return rows.map(drawRow).join("\n");
}

我认为我不需要第二部分的答案；如果我在理解第一部分后这样做，我会发布第二个问题。

他们甚至有更多的代码；如果它有帮助，我也可以将它复制到这里，如果在 cmets 中被要求。 谢谢！ :)

Answer 1

rowHeights 返回一个包含表格每一行高度的数组。对于每一行，它通过获取行中每个单元格的最大高度来获取其高度。

要理解它，从内到外：

function(max, cell) {
    return Math.max(max, cell.minHeight());
}

给定一个单元格和之前的最大高度，计算新高度作为该单元格的 minHeight() 和之前的最大值的最大值。

return row.reduce(ABOVE FUNCTION, 0);

这会减少一行（一个单元格数组），使用上述函数，以获得该行中所有单元格的最大高度。

然后：

return rows.map(PREVIOUS FUNCTION);

对每一行运行归约函数，返回一个包含所有最大高度的数组。

colWidths 按列做同样的事情，通过获取该列中每个单元格的最大值来获取每列的宽度。