development

JavaScript 객체의 내용을 인쇄 하시겠습니까?

big-blog 2020. 2. 21. 22:26
반응형

JavaScript 객체의 내용을 인쇄 하시겠습니까? [복제]


이 질문에는 이미 답변이 있습니다.

일반적으로 우리가 그것을 사용 alert(object);하면로 표시됩니다 [object Object]. JavaScript로 객체의 모든 내용 매개 변수를 인쇄하는 방법은 무엇입니까?


Firefox를 사용하는 경우 alert(object.toSource())간단한 디버깅 목적으로 충분합니다.


이것은 들여 쓰기 된 JSON 객체로 매우 멋진 결과를 제공합니다.

alert(JSON.stringify(YOUR_OBJECT_HERE, null, 4));

두 번째 인수는 문자열을 반환하기 전에 문자열의 내용을 변경합니다. 세 번째 인수는 가독성을 위해 공백으로 사용할 공간 수를 지정합니다.


디버거를 사용하는 것 외에도 foreach루프를 사용하여 객체의 모든 요소에 액세스 할 수도 있습니다 . 다음 printObject함수는 alert()객체가 모든 속성과 해당 값을 표시 해야 합니다.

function printObject(o) {
  var out = '';
  for (var p in o) {
    out += p + ': ' + o[p] + '\n';
  }
  alert(out);
}

// now test it:
var myObject = {'something': 1, 'other thing': 2};
printObject(myObject);

DOM 검사 도구를 사용하면 객체 자체의 속성을 파헤칠 수 있으므로 선호됩니다. Firefox에는 FireBug가 있지만 다른 모든 주요 브라우저 (IE, Chrome, Safari)에는 확인해야 할 디버깅 도구가 내장되어 있습니다.


객체의 문자열 표현을 원한다면 JSON 라이브러리JSON.stringify사용하여 함수를 사용할 수 있습니다 .


사용할 수있는 개체의 내용을 인쇄

console.log(obj_str);

아래와 같이 콘솔에서 결과를 볼 수 있습니다.

Object {description: "test"} 

크롬 브라우저에서 열린 콘솔 F12 키를 누르면 디버그 모드의 콘솔 탭이 있습니다.


Node의 util.inspect (object) 는 객체의 구조를 인쇄 할 수 있습니다.

객체에 순환 종속성이있을 때 특히 유용합니다. 예 :

$ node

var obj = {
   "name" : "John",
   "surname" : "Doe"
}
obj.self_ref = obj;

util = require("util");

var obj_str = util.inspect(obj);
console.log(obj_str);
// prints { name: 'John', surname: 'Doe', self_ref: [Circular] }

이 경우 JSON.stringify는 예외를 발생시킵니다. TypeError: Converting circular structure to JSON


JavaScript 디버깅에 FireBug 사용을 고려해야 합니다. 대화식으로 모든 변수를 검사하고 함수를 단계별로 실행할 수 있습니다.


dir (object)를 사용하십시오. 또는 Firefox 용 Firebug를 항상 다운로드 할 수 있습니다 (정말 도움이 됨).


모두를위한 자바 스크립트!

String.prototype.repeat = function(num) {
    if (num < 0) {
        return '';
    } else {
        return new Array(num + 1).join(this);
    }
};

function is_defined(x) {
    return typeof x !== 'undefined';
}

function is_object(x) {
    return Object.prototype.toString.call(x) === "[object Object]";
}

function is_array(x) {
    return Object.prototype.toString.call(x) === "[object Array]";
}

/**
 * Main.
 */
function xlog(v, label) {
    var tab = 0;

    var rt = function() {
        return '    '.repeat(tab);
    };

    // Log Fn
    var lg = function(x) {
        // Limit
        if (tab > 10) return '[...]';
        var r = '';
        if (!is_defined(x)) {
            r = '[VAR: UNDEFINED]';
        } else if (x === '') {
            r = '[VAR: EMPTY STRING]';
        } else if (is_array(x)) {
            r = '[\n';
            tab++;
            for (var k in x) {
                r += rt() + k + ' : ' + lg(x[k]) + ',\n';
            }
            tab--;
            r += rt() + ']';
        } else if (is_object(x)) {
            r = '{\n';
            tab++;
            for (var k in x) {
                r += rt() + k + ' : ' + lg(x[k]) + ',\n';
            }
            tab--;
            r += rt() + '}';
        } else {
            r = x;
        }
        return r;
    };

    // Space
    document.write('\n\n');

    // Log
    document.write('< ' + (is_defined(label) ? (label + ' ') : '') + Object.prototype.toString.call(v) + ' >\n' + lg(v));
};



// Demo //

var o = {
    'aaa' : 123,
    'bbb' : 'zzzz',
    'o' : {
        'obj1' : 'val1',
        'obj2' : 'val2',
        'obj3' : [1, 3, 5, 6],
        'obj4' : {
            'a' : 'aaaa',
            'b' : null
        }
    },
    'a' : [ 'asd', 123, false, true ],
    'func' : function() {
        alert('test');
    },
    'fff' : false,
    't' : true,
    'nnn' : null
};

xlog(o, 'Object'); // With label
xlog(o); // Without label

xlog(['asd', 'bbb', 123, true], 'ARRAY Title!');

var no_definido;
xlog(no_definido, 'Undefined!');

xlog(true);

xlog('', 'Empty String');

프로토 타입에서 객체에 고유 한 toString 메소드를 제공 할 수 있습니다.


http://www.json.org/js.html 에서 json.js를 사용 하여 json 데이터를 문자열 데이터로 변경할 수 있습니다 .


또한 프로토 타입의 Object.inspect () 메서드를 사용하여 "개체의 디버그 지향 문자열 표현을 반환합니다".

http://api.prototypejs.org/language/Object/inspect/


객체 나 배열의 내용을 경고하는 간단한 기능.
배열이나 문자열 또는 내용을 경고하는 객체로이 함수를 호출하십시오.

함수

function print_r(printthis, returnoutput) {
    var output = '';

    if($.isArray(printthis) || typeof(printthis) == 'object') {
        for(var i in printthis) {
            output += i + ' : ' + print_r(printthis[i], true) + '\n';
        }
    }else {
        output += printthis;
    }
    if(returnoutput && returnoutput == true) {
        return output;
    }else {
        alert(output);
    }
}

용법

var data = [1, 2, 3, 4];
print_r(data);

Internet Explorer 8에는 Firefox 용 Firebug 와 유사한 개발자 도구가 있습니다. Opera에는 Opera DragonFly가 있으며 Chrome에는 개발자 도구 (Shift + Ctrl + J)가 있습니다.

IE6-8에서 JavaScript를 디버깅하는 더 자세한 답변은 다음과 같습니다 . IE8 '개발자 도구'를 사용하여 이전 IE 버전을 디버깅


나는 비슷한 문제에 직면했다. 그 이유는 데이터를 가져 오기 위해 아약스를 사용했기 때문이다. 이 경우 두 개의 비동기 ajax 호출을했습니다. 하나에서는 문자열 msg를 반환하고 경고로 표시합니다. 두 번째 아약스 호출에서 json 형식으로 arraylist를 가져 와서 js로 디코딩합니다. 그래서 두 번째 요청을 먼저 처리하고 객체에 대한 경고를 받고있었습니다.

그냥 확인하십시오. 1. 경고는 문자열을 포함해야합니다. 2. 만약 당신이 arrayList 또는 다른 Object를 얻는다면 그것을 해독하십시오.

모두 제일 좋다!

참고 URL : https://stackoverflow.com/questions/1625208/print-content-of-javascript-object



반응형