木灵鱼儿

木灵鱼儿

阅读:184

最后更新:2021/08/11/ 10:49:53

对象扁平化

前言

后端返回给前端的数据,有时候会是一个多层级对象,但是我们前端使用的时候,for循环遍历渲染时,多层级对象往往需要进行单独处理,因为还需要判断这个key值是否存在,否则会报错。

强行让后端改变数据结构又好像不现实,无奈,只有自己处理了。

掘金看到一位大佬文章《【算法】JS 实现对象的扁平化》

感觉很合适,逻辑清晰。

要求

将对象中的层级扁平化,改成如下格式:

// 实现一个 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,
};

其实说白了就是将对象中的引用类型变成基本类型,遍历层级处理。

方法

//对象扁平化
function objectFlat(data) {
    let newObj = {};

    let process = (key, value) => {
        if (Object(value) !== value) {
            //普通类型、null、undefind
            newObj[key] = value;
        } else {
            //引用类型
            if (Array.isArray(value)) {
                value.forEach((childVal, childIndex) => {
                    process(`${key}[${childIndex}]`, childVal);
                });

                //空数组赋值空数组
                if (value.length === 0) newObj[key] = [];
            } else {
                const keyArr = Object.keys(value);
                keyArr.forEach((childKey) => {
                    process(`${key}.${childKey}`, value[childKey]);
                });

                //为空赋值空对象
                if (keyArr.length === 0) newObj[key] = {};
            }
        }
    };

    Object.keys(data).forEach((key) => process(key, data[key]));
    return newObj;
}

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 12
文章被阅读 184

相关文章

目录树