如何使用ES6实现无需数组、按指定次数执行的简洁循环？

ES6 支持无需手动构造遍历数组、仅指定执行次数的简洁循环写法，以下是生产环境常用的几种实现：

1. 最推荐：Array.from() 实现 #

这是适配性最好、可读性最高的写法，可直接获取循环索引，非常适合生成指定数量的元素（例如表格行、列表项）场景：

// 执行n次，n可替换为你的prop参数
const runCount = 5;
Array.from({ length: runCount }, (_, index) => {
  // 此处写你的业务逻辑，index 为从0开始的循环次数计数
  console.log(`第${index + 1}次执行`)
})

生成表格行的示例（以React场景为例）：

// rowCount 为传入的指定行数的prop参数
function Table({ rowCount }) {
  return <table>
    {Array.from({ length: rowCount }, (_, i) => (
      <tr key={i}>
        <td>第{i + 1}行</td>
      </tr>
    ))}
  </table>
}

2. 轻量实现：Array.keys() 实现 #

如果不需要额外处理返回值，只是单纯执行指定次数逻辑，可以用更短的写法：

const runCount = 5;
[...Array(runCount).keys()].forEach(index => {
  // 业务逻辑
})

注意事项 #

• 上述写法本质还是基于数组迭代的语法糖，不需要开发者手动构造、填充遍历用数组，足够满足绝大多数业务场景的简洁性需求
• 若执行次数超过10万级的性能敏感场景，更推荐使用原生for循环，避免生成额外的数组实例带来的性能开销

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