JavaScript对象扁平化实现详解

前言

数组扁平化是前端开发中常见的面试题，掌握它通常能带来不错的面试体验。然而，在部分知名大厂的面试中，面试官可能会进一步考察对象扁平化的实现能力。本文旨在探讨这一进阶话题，展示具体的实现思路与代码。

例题详情

// 实现一个 flatten 函数，实现如下的转换功能
const obj = {
  a: 1,
  b: [1, 2, { c: true }],
  c: { e: 2, f: 3 },
  g: null,
};

// 转化为扁平化之后的对象
let objRes = {
  a: 1,
  "b[0]": 1,
  "b[1]": 2,
  "b[2].c": true,
  "c.e": 2,
  "c.f": 3,
  g: null,
};

扁平化

扁平化的核心理念在于简化结构，去除冗余、厚重及繁杂的装饰性元素。在视觉设计中，这表现为移除多余的透视、纹理、渐变及3D效果，使信息本身成为视觉焦点，并强调抽象、极简与符号化表达。

在JavaScript中实现对象扁平化，核心目标是对输入对象进行全量遍历。无论对象内部嵌套的是普通对象还是数组，都需要将其内层属性提取并输出。最终结果是将嵌套结构的属性值，以特定路径格式挂载到顶层对象中。

解决此问题的关键在于获取对象的键（key）和值（value）。通过对值进行递归遍历，可以深入所有嵌套层级，从而提取出所有深层属性的值，并将其转换为扁平化的键值对。

代码实现

function flattenObj(obj) {
  let res = {}
  for (let key in obj) {
    if (typeof obj[key] === 'object' && obj[key] !== null) {  
      flatten(res,obj[key],`${key}`)
    } else {
      res[key] = obj[key]
    }
  }
      

  function flatten (res, obj ,keyname) {
    for(let key in obj) {
      if (typeof obj[key] === 'object' && obj[key] !== null) {  
        flatten(res,obj[key],`${keyname}.${key}`)
      }else {
        res[`${keyname}.${key}`] = obj[key]
      }
    }
  }
  return res
}

实现逻辑如下：首先初始化一个结果对象。接着遍历待处理对象的每一个键值对，利用null判断当前值的类型。需要注意的是，JavaScript中typeof null返回'object'，这是语言的历史遗留特性，需在判断时排除null的情况。当满足(typeof obj[key] === 'object' && obj[key] !== null)条件时，表明当前值为引用类型（对象或数组），此时需调用递归函数flatten，将其内部属性提取并合并到结果对象中。若为原始类型，则直接将键值对赋值给结果对象。flatten函数负责处理深层嵌套，通过递归不断拼接键名路径，直至所有层级被展平。

运行结果：

总结

至此，关于JavaScript对象扁平化的实现方案已介绍完毕。如需了解更多相关技术内容，可查阅本站往期文章或继续浏览后续章节。感谢支持！