开发中，有时候，一个对象嵌套得比较深，如果我们想看这个大对象中有没有这个属性，需要一层层地打开才能看到有没有这个属性，我们可以把一个对象扁平化，把大对象的所有属性抽取出来组成一个对象。这样查看起来会方便很多。

比如对象为：

const obj = {
      a: 'www.fly63.com',
      b: { c: 2, d: 3 },
      e: { f: { g: 4 } },
      h: { i: { j: 5, k: 6 } }
}

将一个多层嵌套的对象传入，将返回一个扁平化后的对象，转换后结果如下：

{
    "a": "www.fly63.com",
    "b.c": 2,
    "b.d": 3,
    "e.f.g": 4,
    "h.i.j": 5,
    "h.i.k": 6
}

代码实现：

我们从结果入手，可以知道我们需要对象进行遍历，把里面的属性值依次输出，所以我们可以知道核心方法体就是：传入对象的 key 值和 value，对 value 再进行递归遍历。

方案一：

function flatten (obj) {
      const ans = {}
      inner(obj, null)
      function inner (o, prev) {
        for (let key in o) {
          if (o[key] instanceof Object) {
            if (prev === null) {
              inner(o[key], key)
            } else {
              inner(o[key], prev + '.' + key)
            }
          } else {
            if (prev === null) {
              ans[key] = o[key]
            } else {
              ans[prev + '.' + key] = o[key]
            }
          }
        }
      }
     return ans
}

方案二：

let flatten = (obj) => {
    let result = {};
    let process = (key, value) => {
        if (Object(value) !== value) {// 首先判断是基础数据类型还是引用数据类型
            if (key) {// 基础数据类型
            	result[key] = value;
            }
        } else if(Array.isArray(value)){
       		for (let i = 0; i< value.length; i++) {
            	process(`${key}.${i}`, value[i])
            }
            if (value.length === 0) {
            	result[key] = [];
            }
        } else {
        	let objArr = Object.keys(value);
            objArr.forEach(item => {
            	process(key?`${key}.${item}`:`${item}`, value[item])
            });
            if (objArr.length === 0 && key) {
            	result[key] = {};
            }
        }
    }
    process('', obj)
    return result;
}

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/11023