console.ログ・オブジェクトの使用:

intro

学習開発の過程で、作成されたコードの1つはconsole.logである可能性がある.私の意図通りに入ってきたかどうかを確認するためによく彼のコンサートを使います.今日のブログでは、コンソールを使用してオブジェクトを記録する際に混同される可能性がある点について説明し、正式なドキュメントで推奨されているオブジェクトを記録する方法について引き続き説明します.

콘솔로그와 객체

まず空のオブジェクトを作成し、コンソールで撮影します.

let obj = {};
console.log(obj);  // {}

コンソールでは、次の図に示すようにobjが空のオブジェクトであることを示します.

ここまではとても基礎的な内容です.しかし、オブジェクトにPropertyを追加するとどうなりますか?コンソールの後、オブジェクトにPropertyを追加し、コンソールに戻ります.

混同点

次のコードは以下の通りです.

let obj = {};
console.log(obj);  // ?

obj.prop = 'hi';
console.log(obj);  // {prop: 'hi'}

どんな結果が予想されますか?予想通り、1番目のコンソールには空のオブジェクトが表示され、2番目のコンソールには{prop: 'hi'}というオブジェクトが表示されます.クロム開発者ツールでコードを撮ってみると、次のような結果が表示されます.

しかし

矢印をクリックして詳細を確認すると、いくつかの興味深い点が表示されます.空のオブジェクトなのに「hi」があることがわかります.

どうしたんですか。

これは、多くのブラウザでオブジェクトが記録されると、値の変化がリアルタイムで更新されるためです.MDN公式文書もこの点を指摘した.
Don't use console.log(obj), use console.log(JSON.parse(JSON.stringify(obj))).
This way you are sure you are seeing the value of obj at the moment you log it. Otherwise, many browsers provide a live view that constantly updates as values change.
ログ内のオブジェクトを正確に特定するには、console.log(obj)ではなくconsole.log(JSON.parse(JSON.stringify(obj)))を使用することをお勧めします.そうすれば、私が確認したい相手を正確な時間に記録することができます.

outro

ほとんどの場合、あまり気にならない部分ですが、勉強が面白かったので、こんな記録を残しました.
今日のヒントは、オブジェクトを正確に記録して検証するには、JSON.parseとJSON.stringifyをネストするだけです.