Angular中非数组对象经JSON.stringify输出对象列表的问题咨询

核心本质 #

这个现象的根源是：你传入的Pessoa对象虽不是数组实例，但被意外添加了数组特征的可枚举属性（数字索引+length属性），导致JSON.stringify将其序列化为数组格式，而浏览器控制台的console.log会优先展示对象的业务属性，掩盖了这些数组特征属性。

具体拆解 #

1. 判断逻辑的差异

   • Array.isArray()严格检查对象的原型链，只有继承自Array.prototype的对象才会被判定为数组，你的typeof + !Array.isArray判断已经证实这是个普通对象。
   • 但JSON.stringify的序列化逻辑不同：如果一个对象拥有length属性，且所有可枚举的键都是0到length-1的连续数字，它会被当作数组来序列化，输出数组格式的JSON字符串。

2. 控制台的视觉误导
   浏览器控制台在显示对象时，会默认折叠或隐藏非常规属性（比如大量数字索引），优先展示你定义的Pessoa业务属性（如fullName、email），所以你看到的是单个对象的正常结构，但JSON.stringify会遍历所有可枚举属性，包括那些数组式的索引，最终输出列表。

3. 数据处理的意外操作
   大概率是在生成editores数组的过程中，某个环节意外给单个Pessoa对象添加了数组属性：

   • 比如用Object.assign时不小心把数组的属性挂载到了对象上；
   • 后端返回的数据结构异常，单个对象里混入了数组的索引字段；
   • 自定义的转换逻辑错误，把数组的属性复制到了单个实例上。

验证排查方法 #

• 在模板中添加调试代码，直接查看对象的完整结构：

  <td>{{ c | json }}</td>
  

• 在editar方法中打印对象的所有键，确认是否存在数字索引：

  console.log(Object.keys(editor));
  

内容的提问来源于stack exchange，提问作者Leandro