JavaScript を変更すると、「console.log」に古いオブジェクト情報が表示されるのはなぜですか?

console.log とオブジェクト操作の秘密を明らかにする

JavaScript で配列とオブジェクトを操作する場合、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
foo2 [Object, Object, Object, Object]  4

foo2 は更新された配列の長さ (4) を表示しているのに、依然として表示されるのはなぜですか5 つのオブジェクト?

内のオブジェクトを調べていますConsole.log

その理由は、console.log がオブジェクトを処理する方法にあります。オブジェクトをログに記録すると、コンソールはそのオブジェクトへの参照を同期的に受信します。ただし、オブジェクトのプロパティの実際の表示は、多くの場合、オブジェクトが変更された後に非同期で行われます。

その結果、ログに記録されたオブジェクトをコンソールで展開すると、古い情報が表示される場合があります。この混乱を避けるために、コンソールでは、オブジェクトがそれ以降に変更されている場合でも、表示されている値がロギング時にスナップショットされたものであることを示すボックス内に小さな「i」が表示されます。

ロギング戦略

この問題を回避するには、次のいずれかの手法の使用を検討してください。

• 個々のオブジェクトをログに記録する値: console.log(obj.foo, obj.bar, obj.baz);
• オブジェクトを文字列として JSON エンコードします: console.log(JSON.stringify(obj));
• 検査可能性を維持するために、オブジェクトを JSON で再エンコードします。 console.log(JSON.parse(JSON.stringify(obj)));

JSON には、シリアル化できないプロパティが削除され、循環参照で失敗するため、制限があることに注意してください。より複雑なシナリオの場合は、カスタムのディープ コピー メカニズムの使用を検討してください。

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