如何根据数组元素repeat属性值复制对应次数元素生成新数组

实现方案 #

1. 最简实现（基于flatMap）

flatMap天然适配映射后一对多的场景，无需额外拼接数组：

const result = rawArray.flatMap(item => {
  // repeat为null时仅保留原元素1次
  if (item.repeat === null) return [item]
  // repeat不为null时，生成 repeat + 1 个元素（原元素 + repeat次复制）
  // 若你需要repeat值直接等于总出现次数，把下方repeat + 1改为repeat即可
  return Array.from({ length: item.repeat + 1 }, () => ({ ...item }))
})

2. 兼容旧环境的循环实现

如果运行环境不支持ES6的flatMap，可以用普通遍历实现：

const result = []
for (let i = 0; i < rawArray.length; i++) {
  const current = rawArray[i]
  const copyCount = current.repeat === null ? 1 : current.repeat + 1
  for (let j = 0; j < copyCount; j++) {
    // 这里用对象展开做浅拷贝，如需深拷贝可以替换为structuredClone(current)
    result.push({ ...current })
  }
}

效果示例 #

输入：

const rawArray = [{ name: "Name", repeat: null }, { name: "Name1", repeat: 2 }]

运行后输出：

[
  { name: "Name", repeat: null },
  { name: "Name1", repeat: 2 },
  { name: "Name1", repeat: 2 },
  { name: "Name1", repeat: 2 }
]

注意事项 #

• 示例中用{...item}做浅拷贝，仅适用于元素只有一层基础属性的场景；如果元素有嵌套对象，且你需要修改生成后的元素时互不影响，可以替换为structuredClone(item)做深拷贝
• 如果你不需要拷贝，直接复用原对象引用，直接填入原元素即可，性能更好

内容的提问来源于stack exchange，提问作者Milos N.