JavaScript如何将深层嵌套对象转为键拼接的扁平化对象

需求说明 #

编写函数遍历深层嵌套的对象，通过拼接父子级键生成格式为父键[子键][孙键]的浅层级扁平化对象。

示例原始对象 #

let original = {
  a: {
    b: "",
    c: { 
      d: "",
      e: ""
    },
    f: "",
  },
  g: ""
}

期望输出结果 #

let result = {
  "a[b]": "",
  "a[c][d]": "",
  "a[c][e]": "",
  "a[f]": "",
  "g": ""
}

原有代码问题分析 #

你的代码存在3个核心问题：

• 递归调用错误使用this.flattenData：普通函数全局调用时this指向全局对象，不存在flattenData方法会直接抛出错误
• 没有处理null边界情况：typeof null返回object，如果对象属性值为null会被误判为嵌套对象继续遍历，导致运行报错
• 键名拼接逻辑错误：没有维护统一的前缀变量，拼接时重复添加外层方括号，导致生成的键名格式和预期不符

修正后代码实现 #

let original = {
  a: {
    b: "",
    c: {
      d: "",
      e: ""
    },
    f: "",
  },
  g: ""
}

function flattenData(obj, prefix = '') {
  let result = {};
  for (let key in obj) {
    const currentValue = obj[key];
    // 判断是否为需要继续遍历的普通对象，排除null
    if (typeof currentValue === 'object' && currentValue !== null) {
      // 计算下一层级的键前缀，顶级前缀为空时直接用当前key作为前缀
      const nextPrefix = prefix ? `${prefix}[${key}]` : key;
      // 递归展开嵌套对象，合并结果
      const nestedResult = flattenData(currentValue, nextPrefix);
      Object.assign(result, nestedResult);
    } else {
      // 生成最终的扁平化键
      const finalKey = prefix ? `${prefix}[${key}]` : key;
      result[finalKey] = currentValue;
    }
  }
  return result;
}

console.log(flattenData(original));

运行上述代码，输出结果完全符合预期要求。

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