JavaScript如何更简洁地实现两个数组元素的组合拼接需求？

现有代码问题 #

你当前的实现存在一个隐性bug：const example = template.example.simple属于引用赋值，后续对example执行push操作会直接修改原template对象内的simple数组，产生不可控的副作用，容易引发其他关联逻辑异常。且嵌套forEach需要手动维护中间变量重置，逻辑冗余可读性差。

优化实现 #

可以用ES6的flatMap+数组展开语法一行实现需求，无副作用且语义更清晰：

const template = {
  example: {
    simple: ['Hey', 'Origami'],
    extra: ['Its me', 'Dotcom']
  }
}
const { simple, extra } = template.example
// 直接生成最终结果，不会修改原template数据
const result = [
  ...simple,
  ...simple.flatMap(s => extra.map(e => `${s} ${e}`))
]
console.log(result)
// 输出：['Hey', 'Origami', 'Hey Its me', 'Hey Dotcom', 'Origami Its me', 'Origami Dotcom']

逻辑说明：

1. 先通过解构赋值拿到两个源数组，避免重复嵌套取值
2. 先展开原simple数组的元素作为结果的第一部分
3. 用flatMap遍历simple每一项，内部用map拼接extra的每一项生成组合字符串，flatMap会自动把内层生成的数组合并为一维数组，无需手动遍历push

如果需要兼容不支持flatMap的老旧环境，可以替换为concat+flat的写法：

const result = simple.concat(simple.map(s => extra.map(e => `${s} ${e}`)).flat())

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