前端开发中，特别有接触过树形结构组件的项目中，这些组件很多都需要对 JSON 对象进行扁平化，而获取属性数据又需要对数据进行反操作。本文以代码的形式来展示如何使用 JavaScript 扁平化/非扁平化嵌套的 JSON 对象。
概念
先来看下 JSON 扁平化和非扁平化是什么，请看下面的代码：
扁平化 JSON
{ "articles[0].comments[0]": "comment 1", "articles[0].comments[1]": "comment 2",}
复制代码
非扁平化 JSON
非扁平化，即常见的 JSON 对象，如下：
{ "articles": [ { "comments": [ "comment 1", "comment 2" ] } ]}
复制代码
扁平化
将非扁平化 JSON 数据转为扁平化的，这里定义了函数 flatten ，如下：
const flatten = (data) => { const result = {}; const isEmpty = (x) => Object.keys(x).length === 0; const recurse = (cur, prop) => { if (Object(cur) !== cur) { result[prop] = cur; } else if (Array.isArray(cur)) { const length = cur.length; for (let i = 0; i < length; i++) { recurse(cur[i], `${prop}[${i}]`); } if (length === 0) { result[prop] = []; } } else { if (!isEmpty(cur)) { Object.keys(cur).forEach((key) => recurse(cur[key], prop ? `${prop}.${key}` : key) ); } else { result[prop] = {}; } } }; recurse(data, ""); return result;};
const obj = { "articles": [ { "comments": [ "comment 1", "comment 2" ] } ]};console.log(flatten(obj));/*{ 'articles[0].comments[0]': 'comment 1', 'articles[0].comments[1]': 'comment 2'}*/
复制代码
上面的代码在函数中定义了一个递归函数 recurse 。
非扁平化
将扁平化的 JSON 数据转换为非扁平化的，为了解压一个扁平化的 JavaScript 对象，需要拆分每个属性路径并将嵌套的属性添加到解压对象中。
const unflatten = (data) => { if (Object(data) !== data || Array.isArray(data)) { return data; } const regex = /\.?([^.\[\]]+)$|\[(\d+)\]$/; const props = Object.keys(data); let result, p; while ((p = props.shift())) { const match = regex.exec(p); let target; if (match.index) { const rest = p.slice(0, match.index); if (!(rest in data)) { data[rest] = match[2] ? [] : {}; props.push(rest); } target = data[rest]; } else { if (!result) { result = match[2] ? [] : {}; } target = result; } target[match[2] || match[1]] = data[p]; } return result;};
const result = unflatten({ "articles[0].comments[0]": "comment 1", "articles[0].comments[1]": "comment 2",});console.log(JSON.stringify(result, null, "\t"));/*{ "articles": [ { "comments": [ "comment 1", "comment 2" ] } ]}*/
复制代码
上面代码创建 unflatten 函数来处理一个扁平的对象，函数参数为 data ，可以是任何值，包括 Object、Array、String、Number 等等。在函数中，先判断参数 data 是否为对象、数组，如果为对象、数组，则直接返回 data 。反之，使用正则表达式来解析属性的结构。props 为参数 data 的属性，然后遍历键并调用 regex.exec 以获取属性路径部分并将其赋值给变量 match 。接下来，获取提取的属性部分的索引 index 。
然后检查属性路径是否在 data 中，调用 props.push 和 rest 到 props 。然后将 data[rest] 赋值给变量 target 。否则，将 result 赋值给 target。如果没有剩余的属性部分，将 target 的属性添加到 data 中，然后返回 result 。
运行 unflatten 函数时，应该看到一个具有数组值的属性的对象。在其中，有 comments 属性，其值为包含 comment 1 和 comment 2 的数组值。
总结
可以通过解析属性路径，然后使用循环将它们添加到未展平的对象中来解平展平的 JSON 对象。
评论