console.log가 개체의 현재 상태를 표시하도록 하려면 어떻게 해야 합니까?

console.log가 개체의 현재 상태를 표시하도록 하려면 어떻게 해야 합니까?

추가 기능이 없는 사파리(그리고 실제로는 대부분의 다른 브라우저)에서,console.log다음과 같은 상태가 아닌 마지막 실행 상태에서 개체를 보여줄 것입니다.console.log부름을 받았습니다.

다음을 통해 출력하기 위해 개체를 복제해야 합니다.console.log그 선에 있는 물체의 상태를 파악할 수 있습니다.

예:

var test = {a: true}
console.log(test); // {a: false}
test.a = false; 
console.log(test); // {a: false}

제 생각엔 당신이에요console.dir().

console.log()개체에 대한 참조를 인쇄하기 때문에 원하는 작업을 수행하지 않습니다. 개체를 열 때에는 개체가 변경됩니다.console.dir호출할 때 개체의 속성 디렉토리를 인쇄합니다.

아래의 JSON 아이디어는 좋은 아이디어입니다. JSON 문자열을 구문 분석하여 .dir()가 제공하는 것과 같은 브라우징 가능한 객체를 얻을 수도 있습니다.

console.log(JSON.parse(JSON.stringify(obj)));

기록된 시점의 상태를 확인하고 싶을 때 주로 하는 일은 JSON 문자열로 변환하는 것입니다.

console.log(JSON.stringify(a));

바닐라 JS:

@evan의 대답은 여기서 가장 좋은 것 같습니다.JSON.parse/stringify를 사용하여 객체의 복사본을 효과적으로 만듭니다.

console.log(JSON.parse(JSON.stringify(test)));

JQuery 특정 솔루션:

특정 시점에 개체의 스냅샷을 생성할 수 있습니다.

console.log($.extend({}, test));

여기서 실제로 일어나고 있는 것은 jQuery가 새로운 객체를 만들고 있다는 것입니다.test개체의 내용 및 기록(변경되지 않도록).

AngularJS(1) 특정 솔루션:

각도는 다음을 제공합니다.copy동일한 효과로 사용할 수 있는 함수:

console.log(angular.copy(test));

바닐라 JS 포장지 기능:

여기에 랩하는 기능이 있습니다.console.log로그아웃하기 전에 모든 개체의 복사본을 만듭니다.

저는 답변의 몇 가지 유사하지만 덜 강력한 기능에 대한 답변으로 이 글을 썼습니다.여러 인수를 지원하며, 일반 개체가 아닌 경우에는 복사를 시도하지 않습니다.

function consoleLogWithObjectCopy () {
  var args = [].slice.call(arguments);
  var argsWithObjectCopies = args.map(copyIfRegularObject)
  return console.log.apply(console, argsWithObjectCopies)
}

function copyIfRegularObject (o) {
  const isRegularObject = typeof o === 'object' && !(o instanceof RegExp)
  return isRegularObject ? copyObject(o) : o
}

function copyObject (o) {
  return JSON.parse(JSON.stringify(o))
}

예제 용법:consoleLogWithObjectCopy('obj', {foo: 'bar'}, 1, /abc/, {a: 1})

그거> Object콘솔에서 현재 상태만 표시되는 것은 아닙니다.실제로는 개체를 읽는 것을 미루는 것이며 확장할 때까지 속성입니다.

예를들면,

var test = {a: true}
console.log(test);
setTimeout(function () {
    test.a = false; 
    console.log(test);
}, 4000);

그럼 첫 번째 통화를 확장해보세요. 두 번째 통화 전에 하면 정확합니다.console.log돌아온다

Xeon06의 힌트를 사용하여 객체에서 그의 JSON을 파싱할 수 있으며, 여기 내 객체를 덤프하기 위해 사용하는 로그 함수가 있습니다.

function odump(o){
   console.log($.parseJSON(JSON.stringify(o)));
}

디버거 라이브러리를 사용할 수 있는 옵션이 있습니다.

https://debugjs.net/

스크립트를 웹 페이지에 포함시키고 로그 문을 입력하기만 하면 됩니다.

<script src="debug.js"></script>

로깅

var test = {a: true}
log(test); // {a: true}
test.a = false; 
log(test); // {a: false}

유틸리티를 정의했습니다.

function MyLog(text) {
    console.log(JSON.stringify(text));
}

콘솔에 로그온하고 싶을 때는 다음과 같은 작업을 수행합니다.

MyLog("hello console!");

그것은 아주 잘 작동합니다!

사람이 읽을 수 있는 방법으로 개체를 기록할 수 있습니다.

console.log(JSON.stringify(myObject, null, 2));

각 레벨에 두 개의 공백이 있는 개체를 들여씁니다.

자바스크립트를 이용하여 JSON을 프리프린팅하려면 어떻게 해야 합니까?

2022년 말부터 새로운 옵션이 있습니다: 새로운 DOM으로 개체를 심층 복사합니다.structuredClone방법:

console.log(structuredClone(obj))

웹 작업자 간에 메시지를 전송하는 데 사용되는 복제 알고리즘을 사용합니다.

이것은 더 빠르고 더 많은 종류의 물체와 함께 작동해야 합니다.JSON.parse(JSON.stringify(obj))기술.

자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/API/structuredClone 을 참조하십시오.

이것을 제안해서 저는 총살당할 수도 있지만, 이것은 한 단계 더 나아갈 수 있습니다.콘솔 개체 자체를 직접 확장하여 보다 명확하게 할 수 있습니다.

console.logObject = function(o) {
  (JSON.stringify(o));
}

이것이 시공간 연속체에서 라이브러리 충돌/핵 용해/분리를 일으킬지는 모르겠습니다.하지만 제 qUnit 테스트에서는 멋지게 작동합니다.:)

콘솔을 연 후 페이지를 새로 고치거나 콘솔을 연 후 대상 페이지에 요청을 제출하면 됩니다.

콘솔에 전체 개체를 인쇄하기만 하면 됩니다.

console.log(object);

언급URL : https://stackoverflow.com/questions/7389069/how-can-i-make-console-log-show-the-current-state-of-an-object