変更後に「console.log」に予期しないオブジェクト値が表示されるのはなぜですか?

オブジェクトと console.log: 謎を解明

オブジェクトと 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]

非同期検査

この動作を理解する鍵は、console.log によるオブジェクト検査の非同期の性質にあります。コンソールはオブジェクトへの参照を同期的に受信しますが、手動で展開するまでそのプロパティは表示されません。

インスタンス変数の驚き

オブジェクトを展開するとき変更後は、元の状態ではなく、更新された値が表示されます。これは非同期で発生し、一見非論理的な出力になります。

デバッグ手法

この不一致を回避するには、次のデバッグ手法を検討してください。

• 個々の値をログに記録します:オブジェクトのプロパティを個別に取得します (例: console.log(obj.foo, obj.bar, obj.baz);)
• JSON encode: JSON.stringify( を使用してオブジェクトを文字列に変換しますobj)
• インテリジェントなディープ コピー: カスタマイズされたディープ コピー機能を使用して保存しますJSON エンコード時のシリアル化不可能なプロパティと循環参照 (例: console.log(JSON.parse(JSON.stringify(obj)));)

以上が変更後に「console.log」に予期しないオブジェクト値が表示されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。