JavaScript で「console.log」に同じ要素の異なる子要素数が表示されるのはなぜですか?

console.log 難題: 異なる要素の長さのレポート

JavaScript 環境では、console.log を通じて要素の子にアクセスするときに、複雑な状況が発生します。次のシナリオを考えてみましょう。

要素 1:

console.log(element1.children); // Expected behaviour
/*
 Output: [<li>...</li>, <li>...</li>]
 Length: 2
*/

要素 2:

console.log(element2.children);
/*
 Output: []
 Length: 0
*/

ただし、コンソールで element2 を展開すると、予期せず 3 つの子要素が表示されます。 :

/*
 Output: [<li>...</li>, <li>...</li>, <li>...</li>]
 Length: 3
*/

原因: ライブオブジェクト参考

この矛盾を理解する鍵は、console.log の性質にあります。オブジェクトのログを記録するとき、コンソールはスナップショットではなくライブ参照を確立します。したがって、オブジェクトが展開されると、コンソールにはログ記録時の状態ではなく、現在の状態が表示されます。

この場合、element2 のコレクションは最初は空で、後で設定される可能性があります。

問題の解決

この問題を解決するには、コレクションをログに記録したりコードで使用したりする前に、コレクションが設定されていることを確認する必要があります。これは、次の方法で実現できます。

• コレクションがいっぱいになるまでコードの実行を遅らせる (ドキュメントの最後にスクリプトを配置するなど)
• デバッガーを使用してスクリプトの実行を停止し、既知の時点でのコレクションの状態を調べます。 time

注意事項

コンソールでログに記録されたオブジェクトの横にある微妙な青色 (i) アイコンに注意することが重要です。このアイコンには、表示された値がスナップショットであるか、それともスナップショットであるかを示すツールチップが表示されます。最近の評価。これは混乱を防ぐのに役立ちます。

さらに、デバッガーを使用すると、スクリプトの実行をより包括的に表示でき、イベントのタイミングをより細かく制御できるようになります。

以上がJavaScript で「console.log」に同じ要素の異なる子要素数が表示されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。