如何将嵌套数组转为扁平数组并生成层级序号？

你的代码主要存在三个问题：

• 顺序错误：先把子元素推入数组，再推入父元素，导致父项出现在子项之后
• 格式错误：子元素的num多了末尾的多余点（比如生成了1.1.而不是1.1）
• 扩展性差：仅支持两层嵌套，无法处理更深层级的子元素，且直接修改原对象属性可能污染原始数据

修正后的实现（支持任意深度嵌套） #

private productsWithNumber(products: any[]) {
  const result: any[] = [];

  // 递归遍历函数，传入当前项列表和父级序号前缀
  const traverse = (items: any[], parentNum: string | number = '') => {
    items.forEach((item, index) => {
      // 生成当前项的层级序号
      const currentNum = parentNum ? `${parentNum}.${index + 1}` : index + 1;
      // 创建新对象避免修改原数据，添加序号属性
      const formattedItem = { ...item, num: currentNum };
      // 先推入当前父项
      result.push(formattedItem);
      // 递归处理子项，传递当前序号作为父前缀
      if (item.children?.length) {
        traverse(item.children, currentNum);
      }
    });
  };

  traverse(products);
  return result;
}

关键优化点 #

1. 顺序修正：先推入当前父元素，再递归处理子元素，保证层级顺序正确
2. 多层支持：用递归处理任意深度的嵌套结构，不需要硬编码层级
3. 数据安全：通过扩展运算符{...item}创建新对象，不会修改原始输入的products数组
4. 格式正确：自动生成符合要求的层级序号，没有多余符号

测试验证 #

输入你的测试数据：

let arr = [{key: 1, value: "A", children: [{key: 2, value: "B"}]}];

调用方法后返回的结果与期望完全一致：

[
  {key: 1, value: "A", num: 1},
  {key: 2, value: "B", num: "1.1"}
]

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