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 중국어 웹사이트의 기타 관련 기사를 참조하세요!