JS数组转换为hierarchicalCategories层级分类输出格式的实现问题

你当前代码的问题是每次仅拼接了当前索引和前一个索引的元素，没有累积从数组起始位置到当前位置的所有层级元素，所以二级及以后分类只会展示相邻两级内容。

优化实现方案 #

直接用Array.prototype.slice()截取从索引0到当前位置的所有元素，再用join(' > ')拼接即可，完整代码如下：

let categories = ["Womens", "Accessories", "Bags", "Sport- & Travel Bags"];
let rootName = "hierarchicalCategories.lvl";

const reindexFunction = () => {
  const size = categories.length;
  for (let current_position = 0; current_position < size; current_position++) {
    const key = rootName + current_position;
    // 截取从0到当前位置的所有分类元素，拼接成全路径
    const fullCateg = categories.slice(0, current_position + 1).join(' > ');
    // 冒号前后加空格匹配期望的输出格式
    console.log(`${key} : ${fullCateg}`);
  }
};

reindexFunction();

上述代码输出结果：

hierarchicalCategories.lvl0 : Womens
hierarchicalCategories.lvl1 : Womens > Accessories
hierarchicalCategories.lvl2 : Womens > Accessories > Bags
hierarchicalCategories.lvl3 : Womens > Accessories > Bags > Sport- & Travel Bags

如果需要输出和示例一致的HTML实体转义格式（把>转成>、&转成&），可以新增转义处理逻辑：

let categories = ["Womens", "Accessories", "Bags", "Sport- & Travel Bags"];
let rootName = "hierarchicalCategories.lvl";

// 特殊字符转义方法
const escapeHtml = (str) => {
  return str.replace(/&/g, '&').replace(/>/g, '>');
};

const reindexFunction = () => {
  const size = categories.length;
  for (let current_position = 0; current_position < size; current_position++) {
    const key = rootName + current_position;
    const fullCateg = categories.slice(0, current_position + 1).join(' > ');
    console.log(`${key} : ${escapeHtml(fullCateg)}`);
  }
};

reindexFunction();

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