在Chrome中任意网页里打开控制台，输入以下代码回车：
var obj = {'a':'b',
'c':'b',
'd':'b',
'e':'b',
'f':'b',
'g':'b',
'h':'b',
'i':'b',
'j':'b',
'k':'b',};
console.log(obj);
obj.foo = 'bar';
你会发现打印出的结果是'{a: "b", c: "b", d: "b", e: "b", f: "b", …}'，这是因为obj对象里面的元素过多而省略了，于是你点击左边的三角形按钮展开结果，赫然发现结果如下：
a:"b"
c:"b"
d:"b"
e:"b"
f:"b"
foo:"bar"
g:"b"
h:"b"
i:"b"
j:"b"
k:"b"
是不是感觉很神奇，console.log打印的结果怎么会有'foo:"bar"'这个结果？明明obj.foo = 'bar'的赋值在后啊。难道是出了bug？
再看下面一段代码：
var a = {name: '1'};
console.log(a);
a.name = '2';
console.log(a);
在Chrome的控制台上执行上面的代码，会发现直观结果为：
{name: "1"}
{name: "2"}
但同时每一行左边都有三角形按钮，点这个按钮会发现展开的结果都是{name: "2"}.
这说明了打印结果中未点击三角形按钮的显示结果是真实的，而点击后所显示的对象数据是该对象的最新数据，这是因为Chrome控制台会记录对象的引用地址，点击三角形按钮实际就是查询该地址对应的对象数据。
而在第一个例子中，因为这个对象元素太多，直接输出的时候出现了省略，导致不能直接看到key为foo的值，只能点击三角形按钮展开看，这就产生了误导，以为是出了bug。
以上说的是console.log打印对象的情况，同样地，对于数组也会有这样的问题。
如何尽量避免这种问题呢？办法就是把要打印的对象在打印时记录一个快照，比如用字符串存储起来不就不用担心引用了吗？如下所示：
console.log(JSON.stringify(obj));
网友评论