수정 후 `console.log`에 예기치 않은 개체 값이 표시되는 이유는 무엇입니까?

객체 및 Console.log: 밝혀진 기이함

객체 및 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
    0: Object
    1: Object
    2: Object
    3: Object
    length: 4
    __proto__: Array[0]
     5 (index):23
foo2 
[Object, Object, Object, Object]  4
    0: Object
    1: Object
    2: Object
    3: Object
    length: 4
    __proto__: Array[0]

The Asynchronous Examination

이 동작을 이해하는 열쇠는 console.log를 통한 객체 검사의 비동기적 특성에 있습니다. 콘솔이 객체에 대한 참조를 동기적으로 수신하는 동안 수동으로 확장할 때까지 해당 속성을 표시하지 않습니다.

인스턴스 변수 놀라움

객체를 확장할 때 수정된 후에는 원래 상태 대신 업데이트된 값이 표시됩니다. 이는 비동기적으로 발생하여 비논리적으로 보이는 출력으로 이어집니다.

디버깅 기술

이러한 불일치를 피하려면 다음 디버깅 기술을 고려하십시오.

• 개별 값 기록: 개체 속성을 별도로 기록합니다. (예: console.log(obj.foo, obj.bar, obj.baz);)
• JSON 인코딩: JSON.stringify(obj)를 사용하여 객체를 문자열로 변환
• 지능형 딥 카피: 맞춤형 딥 카피 기능을 사용하여 직렬화 불가능한 데이터를 보존합니다. JSON 인코딩 시 속성 및 순환 참조(예: console.log(JSON.parse(JSON.stringify(obj)));)

위 내용은 수정 후 `console.log`에 예기치 않은 개체 값이 표시되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!