自定义flatten方法实现对象扁平化

最新推荐文章于 2025-11-12 09:48:26 发布

原创最新推荐文章于 2025-11-12 09:48:26 发布 · 873 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #前端

本文探讨如何在JavaScript中实现一个自定义的flatten方法，将多层次的对象结构转换为单层扁平结构，方便数据处理。通过递归遍历对象属性，将嵌套的属性合并到一个平铺的对象中。

function 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;
    }


 console.log(flatten({
        a: {
            b: 1,
            c: 2,
            d: { e: 5 }
        },
        b: [1, 3, { a: 2, b: 3 }],
        c: 3
    }));



// 最终效果是执行
flatten({
  a: {
    b: 1,
    c: 2,
    d: {e: 5}
  },
  b: [1, 3, {a: 2, b: 3}],
  c: 3
}) 

// 得到
{
  'a.b': 1,
  'a.c': 2,
  'a.d.e': 5,
  'b[0]': 1,
  'b[1]': 3,
  'b[2].a': 2,
  'b[2].b': 3，
  'c': 3
}