两类JSON对象结构差异及代码读取异常问题咨询

先给你把最直观的结构差异摆出来，再唠唠你遇到的序列化和$$hashKey问题的根源：

一、结构层级的本质区别 #

结构A：嵌套的二维数组 #

[ 
  [ 
    { department: 'A', name: 'santos' }, 
    { department: 'B', name: 'suarez' }, 
    { department: 'C', name: 'domingo' }, 
    { department: 'A', name: 'james' }, 
    { department: 'B', name: 'black' } 
  ] 
];

说白了，这是个数组套数组的结构——外层数组里只装了一个元素，这个元素又是另一个包含员工对象的数组。你要访问第一个员工的名字，得写A[0][0].name，得先钻到内层数组里才行。

结构B：直接的一维数组 #

[ 
  { department: 'A', name: 'santos' }, 
  { department: 'B', name: 'suarez' }, 
  { department: 'C', name: 'domingo' }, 
  { department: 'A', name: 'james' }, 
  { department: 'B', name: 'black' } 
];

这个就简单了，是单层数组，所有员工对象直接放在最外层数组里。访问第一个员工名字直接写B[0].name就行，层级少了一层。

二、你遇到的JSON.stringify和$$hashKey问题 #

你说必须用JSON.stringify(value)才能读取A，还冒出了"$$hashKey":"object:23"，这事儿十有八九和前端框架（比如老版本的AngularJS）有关：

• 很多框架做数据绑定（比如Angular的ng-repeat）时，会给每个绑定的对象自动加一个$$hashKey属性，用来标记对象的唯一性，避免重复渲染或者追踪数据变化。
• 结构A是嵌套数组，可能你的代码在处理它的时候，框架直接把内层数组里的对象当成了绑定目标，给它们都打上了$$hashKey；而结构B可能是你直接创建的纯JS对象数组，没经过框架的绑定处理，所以没这个额外属性。
• 至于“必须用序列化才能读取”，其实是你直接打印A的时候，控制台显示的是嵌套数组的结构，看起来不够直观；序列化后会把整个嵌套结构展开，同时把框架偷偷加的$$hashKey也暴露出来了——其实不用序列化也能读取，就是得多写一层索引（比如A[0][0].department）。

三、代码里的实际操作差异 #

举个遍历员工名字的例子，你一看就懂：

• 处理结构A，得先取出内层数组再遍历：

// 处理结构A
const employeeList = A[0];
employeeList.forEach(emp => {
  console.log(emp.name);
});

• 处理结构B，直接遍历外层数组就行：

// 处理结构B
B.forEach(emp => {
  console.log(emp.name);
});

内容的提问来源于stack exchange，提问作者Elbert John Felipe