如何递归修改导航数组中嵌套对象的指定键名

要处理嵌套对象的键名替换，我们需要用递归函数来遍历数组中的每一个对象（包括深层嵌套的子项），同时完成childNodes（含大小写变体）到child、relativeUri（含大小写变体）到href的替换，还能兼容childNodes为null的场景。

解决方案代码 #

// 定义递归转换函数，处理单个导航项
function transformNavigationItem(item) {
  // 处理childNodes为null的情况，直接返回null
  if (!item) return null;

  const transformedItem = {};

  // 遍历原对象的所有键
  Object.keys(item).forEach(key => {
    let newKey = key;

    // 替换childNodes（不区分大小写）为child
    if (key.toLowerCase() === 'childnodes') {
      newKey = 'child';
      // 如果子项是数组，递归处理每一个子元素；否则直接赋值（比如null）
      transformedItem[newKey] = Array.isArray(item[key]) 
        ? item[key].map(child => transformNavigationItem(child))
        : item[key];
    } 
    // 替换relativeUri（不区分大小写）为href
    else if (key.toLowerCase() === 'relativeuri') {
      newKey = 'href';
      transformedItem[newKey] = item[key];
    } 
    // 其他键名直接保留原内容
    else {
      transformedItem[newKey] = item[key];
    }
  });

  return transformedItem;
}

// 处理整个导航数组
this.navigationArray = this.navigationArray.map(item => transformNavigationItem(item));

代码说明 #

1. 递归遍历：函数会处理当前对象，同时如果遇到childNodes（已转为child）是数组的情况，会递归调用自身处理每一个子导航项，确保深层嵌套的对象也能被处理。
2. 大小写兼容：通过key.toLowerCase()匹配键名，不管原键名是relativeUri、RelativeUri还是RELATIVEURI，都会统一替换为href；childNodes同理。
3. 边界处理：专门判断了item为null的情况，避免递归时出现报错，完美兼容childNodes: null的场景。
4. 保留其他键：除了需要替换的键名，原对象的其他属性（比如title、type）都会被完整保留。

测试效果 #

用你提供的输入数组测试，会得到完全符合期望的输出：

[{ 
  child: [
    {title: "Mijn afdeling", type: "Department", href: "/mijnafdeling"},
    {title: "contact", type: "Department", href: "/contact"}
  ],
  href: '/',
  title: 'test'
}, {
  child: null,
  href: '/',
  title: 'test'
}]

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