JavaScript如何拆分数组元素内空格并合并为同一数组

直接可用的实现代码 #

针对这个需求，最简洁的实现是用JS内置的flatMap方法，直接完成拆分+展平的操作：

const originalArr = ["Foo", "Bar", "Baz Foo"];
const result = originalArr.flatMap(item => item.split(" "));
// 运行后 result 为 ["Foo", "Bar", "Baz", "Foo"]

代码原理说明 #

• flatMap会先遍历原数组的每一项，执行传入的回调逻辑：这里的回调是把每个字符串元素按空格拆分，得到拆分后的子数组
• 之后会自动把所有子数组展平1层，合并成最终的一维数组，完全匹配需求。

兼容特殊场景的优化版本 #

如果数组元素存在以下情况，可以用优化后的写法避免生成空值：

• 元素首尾带多余空格
• 元素内部有连续多个空格
  优化代码：

const result = originalArr
  .flatMap(item => item.trim().split(/\s+/))
  .filter(Boolean);

优化点说明：

• trim()先移除每个元素首尾的空白字符
• split(/\s+/)按任意长度的连续空白（空格、制表符、换行符均可匹配）拆分，避免单个split(" ")在多空格时生成空字符串
• filter(Boolean)兜底过滤所有可能的空值，保证最终数组干净。

低版本环境兼容写法 #

如果需要兼容不支持flatMap的老旧JS环境，可以用map+flat的组合实现完全等价的逻辑：

const result = originalArr.map(item => item.split(" ")).flat(1);

如果连flat也不支持（比如极老的IE环境），可以用扩展运算符手动展平：

const result = [].concat(...originalArr.map(item => item.split(" ")));

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