`console.log`가 JavaScript의 동일한 요소에 대해 다른 하위 요소 수를 표시하는 이유는 무엇입니까?

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를 확장하면 예기치 않게 세 개의 하위 요소가 표시됩니다. :

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

원인: 라이브 객체 참고자료

이러한 불일치를 이해하는 열쇠는 console.log의 특성에 있습니다. 객체를 로깅할 때 콘솔은 스냅샷이 아닌 실시간 참조를 설정합니다. 따라서 객체가 확장되면 콘솔은 로깅 당시의 상태가 아닌 현재 상태를 표시합니다.

이 경우 element2의 컬렉션은 처음에는 비어 있다가 나중에 채워질 가능성이 높습니다.

문제 해결

이 문제를 해결하려면 코드에서 컬렉션을 로깅하거나 사용하기 전에 컬렉션이 채워졌는지 확인해야 합니다. 이는 다음을 통해 달성할 수 있습니다:

• 컬렉션이 채워질 때까지 코드 실행을 지연합니다(예: 문서 끝에 스크립트 배치)
• 디버거를 사용하여 스크립트 실행을 중단하고 알려진 지점에서 컬렉션 상태를 검사합니다. 시간

주의 사항

콘솔에서 기록된 개체 옆에 있는 미묘한 파란색(i) 아이콘을 확인하는 것이 중요합니다. 이 아이콘은 표시된 값이 스냅샷인지 또는 스냅샷인지 나타내는 도구 설명을 표시합니다. 최근 평가. 이렇게 하면 혼란을 방지하는 데 도움이 됩니다.

또한 디버거를 사용하면 스크립트 실행에 대한 보다 포괄적인 보기를 제공하고 이벤트 타이밍을 더 효과적으로 제어할 수 있습니다.

위 내용은 `console.log`가 JavaScript의 동일한 요소에 대해 다른 하위 요소 수를 표시하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!