时间戳

首页 > 解决方案 > 重构循环

javascript - 重构循环

问题描述

我有一组两个 for 循环。这些元素被一组初始元素偏移numberOfInputs。我想将这些重构为一个循环。每个数组都有相同数量的元素。它们都是由相同的numberOfInputs。

我已经弄清楚了如何通过在必要时减去偏移量并在必要时增加 1 来手动执行此操作。

    // number of inputs start out as 2.
    var numberOfInputs = 2;

        // initialize blank html
        html = '';

        //create key inputs
        for (let i = numberOfInputs; i < elArray.length+numberOfInputs; i++){
          html += '<div id="s';
          id   = (1+i-numberOfInputs);
          html += id;
          html +='\" class=\"draggyBox-small\">';
          html += elArray[i-numberOfInputs];
          html +='</div>\n';
        }
  
        //create description inputs
        html += '<table id=\"tablestyle\">'
        for (let i = numberOfInputs; i < dlArray.length+numberOfInputs; i++){
          html += '<td id="row';
          id   = (1+i-numberOfInputs);
          html += id;
          html +='">\n';
          html += '\t\t<div id=\"t';
          html += id;
          html +='" class=\"ltarget\"></div>\n \t</td >\n \t<td  id=\"d2\">'
          html +=dlArray[i-numberOfInputs];
          html +='</td >\n </tr>\n';
        }
        html += '</table>';

标签： javascript

解决方案

有两个for针对同一个索引运行的循环很好。它不会显着改变性能并且更容易理解。但是，可以进行其他重构以提高性能和可读性。

注意：您总是在减去numberOfInputs，因此没有理由一开始就添加它。

// assuming `html` and `elArray` had been set earlier
// and that `elArray` is an array of strings

let top = elArray.map((v,i) => 
  `<div id="s${i+1}" class="draggyBox-small">${v}</div>`
).join('\n');

let bottom = elArray.map((v,i) =>
`<tr>
  <td id="row${i+1}">
    <div id="t${i}" class="ltarget"></div>
  </td >
  <td id="d2">${v}</td >
</tr>`
).join('\n');

html = `${top}
<table id="tablestyle">
${bottom}
</table>
`;

参考：

推荐阅读