如何实现支持无限层级继承的CSS选择器生成JS函数

当然可以用arguments来实现无限层级的继承选择器生成！我来帮你改造原函数，让它支持任意多层级的嵌套需求，思路和实现步骤如下：

核心思路 #

原函数只支持固定的三层参数（语言前缀、父元素、子元素），要实现无限层级，我们需要：

1. 利用arguments获取所有传入的参数，不再限制参数个数
2. 提取第一个参数作为语言前缀数组，剩下的所有参数作为层级数组列表（父、子、孙、曾孙...）
3. 生成所有层级的组合路径，再给每个路径的元素加上语言前缀，拼接成选择器链
4. 去重后返回最终的选择器字符串

完整改造代码 #

// 简化去重函数，用Set实现更高效
function uniqueArray(a) {
  return [...new Set(a)];
}

function inheritance() {
  // 将arguments转换为数组，解构出语言前缀数组和后续的层级数组列表
  const [langs, ...levels] = Array.from(arguments);
  
  // 参数校验：确保语言前缀是数组，所有层级都是数组，且至少有一个层级
  if (!Array.isArray(langs) || levels.some(level => !Array.isArray(level)) || levels.length === 0) {
    return "";
  }
  
  const result = [];
  
  // 遍历每个语言前缀
  for (const lang of langs) {
    // 初始化层级路径：第一层的每个元素单独作为初始路径
    let levelPaths = levels[0].map(item => [item]);
    
    // 逐层扩展路径：将已有路径和下一层的每个元素组合成新的长路径
    for (let i = 1; i < levels.length; i++) {
      levelPaths = levelPaths.flatMap(path => levels[i].map(item => [...path, item]));
    }
    
    // 将每个路径转换为带语言前缀的选择器链，加入结果数组
    for (const path of levelPaths) {
      const selectorChain = path.map(item => `${lang}-${item}`).join(" > ");
      result.push(selectorChain);
    }
  }
  
  // 去重后用逗号拼接返回
  return uniqueArray(result).join(", ");
}

测试示例 #

调用你提到的测试用例：

const output = inheritance(["js"], ["comment", "string"], ["text"], ["semiText"], ["evenSemiText"]);
console.log(output);

输出结果：

js-comment > js-text > js-semiText > js-evenSemiText, js-string > js-text > js-semiText > js-evenSemiText

关键细节说明 #

• arguments的用法：arguments是函数内部的类数组对象，包含了所有调用时传入的参数。我们用Array.from(arguments)把它转成真正的数组，再通过解构提取出语言前缀和层级列表，这样就能支持任意数量的层级参数。
• 层级路径生成：通过嵌套循环+flatMap，我们把每一层的元素和之前的路径组合，生成所有可能的层级链（比如comment -> text -> semiText -> evenSemiText）。
• 去重逻辑：保留了原函数的去重需求，用ES6的Set实现比原对象标记的方式更简洁高效。

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