Chrome控制台输出JSON数组异常：长度正确但元素显示不全

我太懂这种郁闷了——明明数组长度和实际元素数对得上，但Chrome控制台就是没法完整显示修改前后的数组内容，甚至可能看起来前后两次log的结果一模一样。这其实是Chrome控制台的两个特性在搞鬼，咱们一步步解决：

问题1：引用类型的日志“延迟快照”坑 #

你现在的代码是直接打印同一个对象的引用：

//Before------------------
console.log(myjsonobject);
removeduplicates(myjsonobject);
//After-------------------
console.log(myjsonobject);

因为myjsonobject是引用类型（对象/数组），Chrome控制台并不会在你调用console.log的瞬间就把对象的所有内容拍下来存好，而是等你点击展开日志的时候，才去读取这个对象的当前状态。所以哪怕你先log了修改前的对象，等你去展开它的时候，removeduplicates已经把原对象改完了，看到的自然是修改后的内容。

解决办法：拍个“快照”再log #

在打印修改前的对象时，先做一次深拷贝，生成一个和原对象完全独立的快照，这样就能固定住修改前的状态：

//Before------------------
// 深拷贝生成快照，避免引用关联
const beforeState = JSON.parse(JSON.stringify(myjsonobject));
console.log("修改前：", beforeState);

removeduplicates(myjsonobject);

//After-------------------
console.log("修改后：", myjsonobject);

问题2：长数组被控制台自动折叠 #

如果你的数组元素比较多，Chrome控制台默认会把中间的元素折叠起来（比如只显示首尾几个，中间用...代替），导致你看不到全部元素。这时候有两个好用的办法：

• 用console.table()代替console.log()：它会把数组元素以表格形式完整展示，一目了然：

  console.table(beforeState); // 展示修改前的数组表格
  console.table(myjsonobject); // 展示修改后的数组表格
  

• 调整控制台显示限制：点击控制台右上角的齿轮图标打开设置，找到Console limits，把“Maximum logged items”的数值调大，就能显示更多元素了。

另外，如果你想直接看到完整的字符串形式，也可以用JSON.stringify格式化输出：

console.log("修改前：", JSON.stringify(myjsonobject, null, 2));

这样就能完美看到数组去重前后的完整变化啦！

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