将嵌套的 JavaScript 循环重构为 CoffeeScript 理解

Question

我想将以下 JavaScript 转换为 CoffeeScript：

function initPage() {
  var tr = document.getElementsByTagName('tr')[0];
  labs.forEach(function(lab) {
    var td = document.createElement('td');

    // Create a header for each lab.
    var h2 = document.createElement('h2');
    h2.innerHTML = lab.name;
    td.appendChild(h2);

    // Create a div for each machine in a given lab.
    for(i = lab.first; i <= lab.last; i++) {
      var machine = ((i < 10) ? "0" : "") + i;
      var div = document.createElement('div');
      div.setAttribute('id', lab.name + "-" + machine);
      div.setAttribute('class', 'Grey');
      div.innerHTML = machine;
      td.appendChild(div);
    }

    // Append the new table data element to the table row.
    tr.appendChild(td);
  });
}

现在我的 CoffeeScript 翻译看起来像这样：

initPage = () ->
  tr = document.getElementsByTagName('tr')[0]
  labs.forEach (lab) ->
    td = document.createElement 'td'

    # Create a header for each lab.
    h2 = document.createElement 'h2'
    h2.innerHTML = lab.name
    tr.appendChild h2

    # Create a div for a machine given the machine number
    createDiv = (i) ->
      machine = if i < 10 then "0#{i}" else "#{i}"
      div = document.createElement 'div'
      div.setAttribute 'id', "#{lab.name}-#{machine}"
      div.setAttribute 'class', 'Grey'
      div.innerHTML = machine
      td.appendChild div

    # Create a div for each machine in a given lab
    createDiv machine for machine in [lab.first..lab.last]

    # Append the new table data element to the table row.
    tr.appendChild td

是否有更好、更惯用的方法来为每个实验室创建 div？最好避免使用 createDiv 函数并执行以下操作：

for i in [lab.first..lab.last]
  machine = if i < 10 then "0#{i}" else "#{i}"
  div = document.createElement 'div'
  div.setAttribute 'id', "#{lab.name}-#{machine}"
  div.setAttribute 'class', 'Grey'
  div.innerHTML = machine
  td.appendChild div

CoffeeScript language reference 说

您将在 CoffeeScript 中编写的大多数循环都是对数组、对象和范围的理解。

和

理解应该能够处理大多数地方，否则您将使用循环、每个/forEach、映射或选择/过滤器

我是列表推导的新手，我想确保我以适当利用 CoffeeScript 优势的方式翻译此代码。

Answer 1

避免使用 createDiv 函数并内联它会更好吗？

是的，那个功能看起来有点多余。

我是列表推导的新手，我想确保我以适当的方式翻译这段代码

list comprehensions 的目标是构建新列表，就像 map 和 filter 会这样做。而对于哪些循环或（不恰当地）经常使用forEach，手动pushing 到一个数组。

但是，您的目标不是创建一个数组，而是一个 DOM 元素。理解在这里没有帮助，您需要将它们用作循环来执行副作用。