[解決済み] オブジェクトとconsole.logの奇妙な動作 [重複]。

質問

このコード

foo = [{id: 1},{id: 2},{id: 3},{id: 4}, {id: 5}, ];
console.log('foo1', foo, foo.length);
foo.splice(2, 1);
console.log('foo2', foo, foo.length);

Chromeでは以下のように出力されます。

foo1 
[Object, Object, Object, Object, Object]  5
    0: Object
    1: Object
    2: Object
    3: Object
    length: 4
    __proto__: Array[0]
     5 (index):23
foo2 
[Object, Object, Object, Object]  4
    0: Object
    1: Object
    2: Object
    3: Object
    length: 4
    __proto__: Array[0]

フィドル http://jsfiddle.net/2kpnV/

なぜでしょう？

どのように解決するのですか？

オブジェクトを調べるには console.log を介したオブジェクトの検査は非同期的に行われます。コンソールはオブジェクトへの参照を同期的に受け取りますが、展開されるまでオブジェクトのプロパティは表示されません (場合によっては、ブラウザやログが発生したときに開発ツールを開いているかどうかによって異なります)。コンソールで調べる前にオブジェクトが変更されていた場合、表示されるデータには更新された値が含まれます。

例えば、Chrome では、少し i を表示し、カーソルを当てるとこう表示します。

左のオブジェクトの値は、ログに記録されたときにスナップショットされたもので、下の値はたった今評価されたものです。

を使えば、何を見ているのかが分かります。

このような場合のログのコツは、個々の値をログに残すことです。

console.log(obj.foo, obj.bar, obj.baz);

または、オブジェクトの参照をJSONエンコードする。

console.log(JSON.stringify(obj));