如何拆分合并过滤后数组中含逗号元素，生成新独立元素数组？

要实现拆分含逗号的元素为独立项，同时保留原有的过滤逻辑，我们可以在流程中加入字符串拆分+扁平化数组的处理步骤，这里用flatMap会非常方便（ES2019及以上支持）：

// 合并数组 -> 过滤空字符串 -> 拆分逗号元素并处理空格 -> 最终得到纯净数组
var tags = [].concat.apply([], [typeArr, genderArr, conditionArr])
  .filter(entry => entry.trim() !== '')
  .flatMap(item => 
    item.split(',')
      .map(subItem => subItem.trim())
      .filter(subItem => subItem !== '')
  );

步骤拆解： #

1. 合并数组：还是用你原来的[].concat.apply([], [...])方式，把多个数组合并成一个一维数组。
2. 初始过滤：先过滤掉空字符串或全空格的元素，避免后续处理无效内容。
3. 拆分+扁平化：
   • 用flatMap遍历每个元素，它会自动把每个元素处理后的子数组展开成单个元素；
   • 对每个元素用split(',')按逗号拆分；
   • 拆分后对每个子项trim()去除前后空格（比如处理"green, yellow"这种带空格的情况）；
   • 最后再过滤一次拆分后可能出现的空字符串（比如原元素是",red,,blue,"的情况）。

兼容性替代方案（针对不支持flatMap的旧环境） #

如果你的运行环境不支持ES2019的flatMap，可以用map配合reduce+concat来实现扁平化：

var tags = [].concat.apply([], [typeArr, genderArr, conditionArr])
  .filter(entry => entry.trim() !== '')
  .map(item => 
    item.split(',')
      .map(subItem => subItem.trim())
      .filter(subItem => subItem !== '')
  )
  .reduce((resultArr, currentSubArr) => resultArr.concat(currentSubArr), []);

示例验证 #

针对你给出的示例数组["red","blue","green,yellow,orange","purple,black"]，经过上述代码处理后，会得到：
["red", "blue", "green", "yellow", "orange", "purple", "black"]

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