如何将两组以numberOfInputs为偏移量的for循环重构为单个循环

重构实现方案 #

因elArray与dlArray元素数量完全一致，我们可以通过单次遍历同时拼接两类内容，省去重复的偏移量计算与循环开销，重构后代码如下：

// 初始输入数量为2
var numberOfInputs = 2;

// 分别初始化key输入、表格内容的缓存变量
let keyHtml = '';
let tableHtml = '<table id="tablestyle">';
// 取数组长度作为遍历上限
const total = elArray.length;

for (let i = 0; i < total; i++) {
  // 直接用索引计算id，无需重复处理偏移量
  const id = i + 1;
  // 拼接key输入区块内容
  keyHtml += `<div id="s${id}" class="draggyBox-small">${elArray[i]}</div>\n`;
  // 拼接表格行内容
  tableHtml += `<td id="row${id}">
        <div id="t${id}" class="ltarget"></div>
    </td>
    <td id="d2">${dlArray[i]}</td>
</tr>\n`;
}
// 闭合表格标签
tableHtml += '</table>';
// 合并得到最终html
const html = keyHtml + tableHtml;

优化说明 #

• 直接从数组原生索引开始遍历，省略了原写法中每次循环都需要减去numberOfInputs的冗余计算，逻辑更直观
• 采用ES6模板字符串拼接HTML，无需手动处理大量引号转义，代码可读性更高
• 如果你需要保留原有的偏移量遍历逻辑，只需把循环条件改回i = numberOfInputs; i < total + numberOfInputs; i++，再将索引取值改为i-numberOfInputs即可，运行效果完全一致

内容的提问来源于stack exchange，提问作者Evan Gertis