JavaScript如何遍历含任意层级combinedPorts键的嵌套数组

核心思路用深度优先递归遍历即可，不需要提前预知嵌套深度，每次处理节点时只要检测到存在合法的combinedPorts子数组，就对子数组重复执行相同的处理逻辑，天然适配N层嵌套场景。

1. 扁平遍历（适合收集所有节点、逐节点渲染场景） #

这个实现会按深度优先的顺序遍历到每一个节点，支持传入自定义回调处理单个节点的逻辑，同时返回当前节点的层级数，方便做缩进、层级样式区分：

/**
 * 递归遍历所有端口节点
 * @param {Array} portList 待遍历的端口数组
 * @param {Function} callback 单个节点的处理回调，入参为(当前节点, 当前层级)
 * @param {number} level 起始层级，默认从0开始
 */
function traversePorts(portList, callback, level = 0) {
  if (!Array.isArray(portList)) return;
  portList.forEach(node => {
    // 执行自定义节点处理逻辑
    callback(node, level);
    // 检测到存在合法子节点时，递归进入下一层遍历，层级+1
    if (Array.isArray(node.combinedPorts)?.length) {
      traversePorts(node.combinedPorts, callback, level + 1);
    }
  })
}

调用示例 #

const originData = [/* 你的原始嵌套数组 */];
const allNodes = [];

traversePorts(originData, (node, level) => {
  // 示例：收集所有节点到扁平数组，附带层级信息
  allNodes.push({
    name: node.name,
    type: node.type,
    level
  });
  // 如果是直接渲染列表，也可以在这里根据level做缩进拼接、组件渲染等操作
});

2. 树形结构生成（适合树形组件、嵌套展示场景） #

如果你需要保留原有的嵌套结构，格式化后给树形组件、级联选择器这类需要层级关系的组件用，可以用递归map的实现：

/**
 * 递归生成树形结构数据
 * @param {Array} portList 待处理的端口数组
 * @param {number} level 起始层级
 * @returns {Array} 格式化后的树形数组
 */
function generatePortTree(portList, level = 0) {
  if (!Array.isArray(portList)) return [];
  return portList.map(node => {
    const formattedNode = {
      label: node.name,
      value: node.name,
      type: node.type,
      level
    };
    // 存在子节点时递归处理，挂载到children字段
    if (Array.isArray(node.combinedPorts)?.length) {
      formattedNode.children = generatePortTree(node.combinedPorts, level + 1);
    }
    return formattedNode;
  })
}

调用示例 #

// 得到的treeData是完整保留嵌套关系的格式化数组，可直接传入绝大多数树形组件使用
const treeData = generatePortTree(originData);

实现说明 #

• 所有逻辑都加了数组类型校验，不会因为某一层缺失combinedPorts字段、字段值为空/非数组抛出报错
• 没有硬编码嵌套层级，只要数据结构符合combinedPorts存储子节点的规则，任意深度都能正常处理
• 内置的层级参数可根据业务需求自由扩展，比如做折叠展开控制、层级权限校验、缩进样式配置等

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