前端开发中，特别有接触过树形结构组件的项目中，这些组件很多都需要对JSON对象进行扁平化，而获取属性数据又需要对数据进行反操作。本文以代码的形式来展示如何使用 JavaScript 扁平化/非扁平化嵌套的 JSON 对象。
概念
先来看下 JSON 扁平化和非扁平化是什么，请看下面的代码：
扁平化 JSON
{"articles[0].comments[0]":"comment1","articles[0].comments[1]":"comment2",}非扁平化 JSON
非扁平化，即常见的 JSON 对象，如下：
{"articles":[{"comments":["comment1","comment2"]}]}扁平化
将非扁平化 JSON 数据转为扁平化的，这里定义了函数 flatten ，如下：
constflatten=(data)=>{constresult={};constisEmpty=(x)=>Object.keys(x).length===0;constrecurse=(cur,prop)=>{if(Object(cur)!==cur){result[prop]=cur;}elseif(Array.isArray(cur)){constlength=cur.length;for(leti=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,"");returnresult;};constobj={"articles":[{"comments":["comment1","comment2"]}]};console.log(flatten(obj));/*{'articles[0].comments[0]':'comment1','articles[0].comments[1]':'comment2'}*/上面的代码在函数中定义了一个递归函数 recurse 。
非扁平化
将扁平化的JSON 数据转换为非扁平化的，为了解压一个扁平化的 JavaScript 对象，需要拆分每个属性路径并将嵌套的属性添加到解压对象中。
constunflatten=(data)=>{if(Object(data)!==data||Array.isArray(data)){returndata;}constregex=/\.?([^.\[\]]+)$|\[(\d+)\]$/;constprops=Object.keys(data);letresult,p;while((p=props.shift())){constmatch=regex.exec(p);lettarget;if(match.index){constrest=p.slice(0,match.index);if(!(restindata)){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];}returnresult;};constresult=unflatten({"articles[0].comments[0]":"comment1","articles[0].comments[1]":"comment2",});console.log(JSON.stringify(result,null,"\t"));/*{"articles":[{"comments":["comment1","comment2"]}]}*/上面代码创建 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 对象。