JS/Angular中如何动态拼接allFilters的数组全量value而非仅硬拼前两项

现存问题定位 #

当前过滤器集合的处理逻辑采用硬编码取值方式，存在缺陷的核心代码为：

filerVal.value = ${filerVal.value[0]?.value} : ${(filerVal.value[1]?.value ? filerVal.value[1]?.value : '')}``

该逻辑仅通过固定下标提取数组的前两位元素做拼接，存在两个明显的问题：

• 仅能适配长度≤2的数组值，当数组包含3个及以上元素时，会直接遗漏后续所有内容的展示
• 未针对单元素数组、空值项等边界场景做兼容，容易出现拼接后带多余分隔符、格式混乱的问题

通用动态拼接实现方案 #

核心改造思路是把硬编码取固定下标的逻辑，替换为全量数组遍历、值提取、空值过滤、统一拼接的通用逻辑，改造后的完整可运行代码如下：

this.allFilters.map(filterItem => {
  // 单独处理值为数组的场景
  if (Array.isArray(filterItem.value)) {
    // 遍历提取所有数组项的value字段，过滤掉空值类无效内容
    const validValues = filterItem.value
      .map(item => item?.value)
      .filter(val => val !== undefined && val !== null && val !== '');
    // 用统一的“ : ”分隔符拼接所有有效值，不管数组长度是多少都能适配
    filterItem.value = validValues.join(' : ');
    return filterItem;
  }
  // 非数组的单值场景无需额外处理，直接返回原对象即可
  return filterItem;
});

适配场景说明 #

改造后可以覆盖全部业务展示需求：

• 单元素数组场景：比如数组仅包含{value: 15}一项，最终输出为15，不会附带多余的分隔符
• 多元素数组场景：比如数组对应value依次为1、2、3、4，最终输出为1 : 2 : 3 : 4，完整展示所有内容不遗漏
• 带无效值的数组场景：比如数组中存在空值、undefined项，会自动跳过无效内容，拼接出格式正常的展示文本
• 非数组单值场景：比如值直接为15的单元素，直接输出15，不做额外格式处理

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