对象扁平化

前言

后端返回给前端的数据，有时候会是一个多层级对象，但是我们前端使用的时候，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;
}