JavaScript按条件拼接分隔字符串 代码输出异常求修复方案

问题原因 #

你的原始代码没有先按人名聚合对应课程，而是边遍历边拼接字符串，逻辑漏洞导致同人名的课程拼接错位、末尾多余>符号。

修正后代码 #

let filterIds = ['1','2','3','4','5','6','7','8','9']
let filterDetails = [
    {
    id: 1,
    Name: 'David',
    Course: 'English'
    },
    {
    id: 2,
    Name: 'Peter',
    Course: 'German'
    },
    {
    id: 3,
    Name: 'Peter',
    Course: 'React'
    },
    {
    id: 4,
    Name: 'John',
    Course: 'English'
    },
    {
    id: 5,
    Name: 'John',
    Course: 'NodeJs'
    },
    {
    id: 6,
    Name: 'John',
    Course: 'Docker'
    },
    {
    id: 7,
    Name: 'Andrew',
    Course: 'Dutch'
    },
    {
    id: 8,
    Name: 'Andrew',
    Course: 'Angular'
    },
    {
    id: 9,
    Name: 'David',
    Course: 'SQL'
    }
]

// 先按顺序把id对应的条目捞出来
const sortedItems = filterIds.map(id => filterDetails.find(item => item.id == id))
// 按人名分组聚合课程
const nameGroup = {}
const nameOrder = [] // 保留人名出现的顺序
sortedItems.forEach(item => {
  if (!nameGroup[item.Name]) {
    nameGroup[item.Name] = []
    nameOrder.push(item.Name)
  }
  nameGroup[item.Name].push(item.Course)
})
// 拼接最终字符串
const result = nameOrder.map(name => nameGroup[name].join(',')).join(' > ')
console.log(result)

运行后输出的结果就是你期望的：

English > German,React > English,NodeJs,Docker > Dutch,Angular,SQL

如果一定要保留你原来的forEach遍历拼接的写法，也可以按下面调整：

let prevFilterName = ''
let filterCourse = ''
let filterIds = ['1','2','3','4','5','6','7','8','9']
let filterDetails = [/* 原有内容保持不变 */]

filterIds.forEach((id, index) => {
    let FindFilter = filterDetails.find((filterItem) => {return filterItem.id == id})
    if (prevFilterName === FindFilter.Name){
        // 同名人直接加逗号加课程
        filterCourse += ',' + FindFilter.Course
    } else {
        // 不同人名，除了第一个，前面要加 > 分隔
        if (index !== 0) {
            filterCourse += ' > '
        }
        filterCourse += FindFilter.Course
    }
    prevFilterName = FindFilter.Name
})
console.log(filterCourse)

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