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

我想将以下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);
  });
}

现在我的咖啡脚本翻译如下：

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中编写的大多数循环都是对数组、对象和范围的理解

及

理解应该能够处理大多数需要使用循环、each/forEach、map或select/filter的地方

我对列表理解的概念还不熟悉，我想确保我以适当利用CoffeeScript优势的方式翻译这段代码

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

是的，这个函数看起来有点多余

我对列表理解的概念不太熟悉，希望确保我以适当的方式翻译了这段代码

的目的是建立新的列表，就像map和filter那样。对于经常使用循环或不适当的forEach，手动推送到数组

---

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

+1为了解释理解的正确用例，虽然你不“需要使用循环”，但惯例会说明这样做的原因。没有内置的构造可以阻止您在理解中改变状态，因为它们只是编译成循环。另一种选择：使用列表理解构建缓冲区，然后向DOM写入一次。也许我会这么做。这就是我所说的将它们用作循环的意思。我们只需要注意它们没有隐含的返回值。