现代JavaScript能否基于数字生成对应长度的自定义元素数组（类作用于数字的map）

通用原生实现方案 #

目前ECMAScript没有内置你示例中提到的Number.prototype.repeat语法，开发者圈子最通用的简洁原生实现是使用Array.from：

const numberOfDivs = 3
const arrayOfDivs = Array.from(
  { length: numberOfDivs },
  (_, idx) => html`<div id=${idx}></div>`
)

/* 输出结果：
[
  '<div id=0></div>',
  '<div id=1></div>',
  '<div id=2></div>'
]
*/

这个方案的优势：

• 完全原生实现，所有现代浏览器、Node.js 12+ 版本都兼容
• 自动传入索引参数，无需手动维护循环计数
• 第二个参数为映射函数，每次执行生成独立的新值，不会出现Array.fill引用相同对象的问题，支持生成字符串、对象、DOM节点等任意类型的元素

如果想要更贴近你期望的调用方式，可以选择两种封装方案：

1. 无副作用的工具函数封装（推荐所有场景使用）

const createArray = (length, generator) => {
  return Array.from({ length }, (_, idx) => generator(idx))
}

// 调用示例
const arrayOfDivs = createArray(numberOfDivs, idx => html`<div id=${idx}></div>`)

2. 扩展Number原型（仅个人项目可酌情使用，公共生产环境不推荐，避免和未来标准冲突）

Number.prototype.repeat = function(generator) {
  return Array.from({ length: this }, (_, idx) => generator(idx))
}

// 调用示例和你期望的语法完全一致，注意数字后需要加两个点避免被识别为小数点，也可以写成(3).repeat(...)
const arrayOfDivs = 3..repeat(idx => html`<div id=${idx}></div>`)

标准提案说明 #

目前TC39已有相关的Iterator.range提案，当前处于Stage 3阶段，未来正式纳入ECMAScript标准后，可直接使用原生语法实现同类需求：

// 未来原生语法示例
const arrayOfDivs = Iterator.range(0, numberOfDivs)
  .map(idx => html`<div id=${idx}></div>`)
  .toArray()

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