基于JS的动态树算法实现：按输入动态字段生成层级拼接路径

核心实现代码 #

// 初始数据源可根据需求自行扩展
const sourceData = {
  sport: ['s_1', 's_2', 's_3'],
  date: ['d_1', 'd_2'],
  category: ['c_1']
}

/**
 * 生成多级拼接路径数组
 * @param {Object} source 数据源对象
 * @param {Array} fields 按顺序传入的层级字段数组
 * @returns {Array} 最终生成的路径数组
 */
function generatePathList(source, fields) {
  const result = []
  // 存储上一层级生成的所有路径
  let prevLevelPaths = []

  for (const field of fields) {
    const currentFieldValues = source[field]
    const currentLevelPaths = []

    if (prevLevelPaths.length === 0) {
      // 第一层级直接存入值
      currentFieldValues.forEach(val => currentLevelPaths.push(val))
    } else {
      // 后续层级和上一层路径拼接生成新路径
      prevLevelPaths.forEach(path => {
        currentFieldValues.forEach(val => {
          currentLevelPaths.push(`${path}|${val}`)
        })
      })
    }

    // 将当前层级所有路径加入最终结果
    result.push(...currentLevelPaths)
    // 更新上一层路径为当前层级路径，供下一轮循环使用
    prevLevelPaths = currentLevelPaths
  }

  return result
}

使用示例 #

// 示例1：传入两级字段
console.log(generatePathList(sourceData, ['sport', 'date']))
// 输出：['s_1','s_1|d_1','s_1|d_2','s_2','s_2|d_1','s_2|d_2','s_3','s_3|d_1','s_3|d_2']

// 示例2：传入三级字段
console.log(generatePathList(sourceData, ['sport', 'date', 'category']))
// 输出和需求给出的三级路径结果完全一致

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