JavaScript 개체를 표시하려면 어떻게 해야 합니까?
?alert변??
개체를 표시하는 것과 동일한 형식입니다.
JSON.stringify방법.중첩된 개체와 함께 작동하며 모든 주요 브라우저가 이 방법을 지원합니다.
str = JSON.stringify(obj);
str = JSON.stringify(obj, null, 4); // (Optional) beautiful indented output.
console.log(str); // Logs output to dev tools console.
alert(str); // Displays output using window.alert()
Mozilla API 참조 및 기타 예에 대한 링크.
obj = JSON.parse(str); // Reverses above operation (Just in case if needed.)
이 Javascript 오류가 발생할 경우 커스텀 JSON.stringify 리페이서를 사용합니다.
"Uncaught TypeError: Converting circular structure to JSON"
디버깅을 위해 개체를 인쇄하려면 다음 코드를 사용합니다.
var obj = {
prop1: 'prop1Value',
prop2: 'prop2Value',
child: {
childProp1: 'childProp1Value',
},
}
console.log(obj)
다음과 같이 표시됩니다.
참고: 개체만 기록해야 합니다.예를 들어, 다음과 같이 동작하지 않습니다.
console.log('My object : ' + obj)
주의: 콤마를 사용할 수도 있습니다.log의 첫 번째 행이 그 후 .
console.log('My object: ', obj);
var output = '';
for (var property in object) {
output += property + ': ' + object[property]+'; ';
}
alert(output);
console.dir(object):
지정된 JavaScript 개체의 속성을 대화식으로 나열합니다.이 목록을 통해 노출 삼각형을 사용하여 하위 개체의 내용을 검사할 수 있습니다.
에 주의:console.dir()기능이 비표준입니다."MDN Web 문서" 문서
다음을 수행합니다.
console.log(JSON.stringify(obj))
끈으로 묶다 ★★★★★★★★★★★★★★★★★★★[object]출력으로 오브젝트의 내용을 얻을 수 있습니다.
Firefox(자세한 정보는 @Bojangles 덕분에)는 객체를 JSON으로 인쇄하는 방법을 가지고 있습니다.function(){}.
대부분의 디버깅 용도로는 이 정도면 충분합니다.
경고를 사용하여 개체를 인쇄하려면 다음을 수행할 수 있습니다.
alert("myObject is " + myObject.toSource());
각 속성 및 해당 값을 문자열 형식으로 인쇄해야 합니다.
데이터를 표 형식으로 보려면 다음을 사용할 수 있습니다.
console.table(obj);
테이블 열을 클릭하면 테이블을 정렬할 수 있습니다.
표시할 열을 선택할 수도 있습니다.
console.table(obj, ['firstName', 'lastName']);
console.table에 대한 자세한 내용은 여기를 참조하십시오.
기능:
var print = function(o){
var str='';
for(var p in o){
if(typeof o[p] == 'string'){
str+= p + ': ' + o[p]+'; </br>';
}else{
str+= p + ': { </br>' + print(o[p]) + '}';
}
}
return str;
}
사용방법:
var myObject = {
name: 'Wilson Page',
contact: {
email: 'wilson@hotmail.com',
tel: '123456789'
}
}
$('body').append( print(myObject) );
예를 들어:
http://jsfiddle.net/WilsonPage/6eqMn/
NodeJS 에서는, 를 사용해 오브젝트를 인쇄할 수 있습니다.깊이를 반드시 기입해 주세요.그렇지 않으면 오브젝트의 인쇄는 얕아집니다.
간단하게 사용
JSON.stringify(obj)
예
var args_string = JSON.stringify(obj);
console.log(args_string);
또는
alert(args_string);
또한 javascript 함수의 note는 객체로 간주됩니다.
추가 사항으로:
실제로 이와 같은 새 속성을 할당하고 console.log에 액세스하거나 경고로 표시할 수 있습니다.
foo.moo = "stackoverflow";
console.log(foo.moo);
alert(foo.moo);
NB: 이 예에서는 yourObj가 검사할 개체를 정의합니다.
우선 가장 마음에 들지 않지만 가장 많이 사용되는 오브젝트 표시 방법:
이것은 객체의 내용을 보여주는 정확한 방법입니다.
console.log(yourObj)
는 다음과 같은 것을 생성합니다.
가장 좋은 해결책은 Objects 키를 살펴보는 것입니다. 그리고 Objects Values를 살펴보는 것입니다. 만약 정말로 객체가 무엇을 가지고 있는지 보고 싶다면...
console.log(Object.keys(yourObj));
console.log(Object.values(yourObj));
출력은 다음과 같습니다(위 그림: 객체에 저장된 키/값).
ECMAScript 2016 이후를 사용하는 경우에도 다음과 같은 새로운 옵션이 있습니다.
Object.keys(yourObj).forEach(e => console.log(`key=${e} value=${yourObj[e]}`));
이렇게 하면 깔끔한 출력이 생성됩니다.앞의 답변에서 설명한 솔루션은 다음과 같습니다.console.log(yourObj)는 파라미터를 너무 많이 표시하기 때문에 원하는 데이터를 표시하기에 가장 사용하기 쉬운 방법은 아닙니다.따라서 로그 키와 값을 따로 기록하는 것이 좋습니다.
다음 위:.
console.table(yourObj)
아까 댓글에서 어떤 분이 이걸 추천하셨는데 저한테는 안 먹혔어요.다른 브라우저나 다른 곳에서 작동한다면, 쿠도스!난 여전히 여기에 참고용 코드를 넣을거야!콘솔에 다음과 같은 출력이 이루어집니다.
Node.js를 사용하여 전체 개체를 인쇄하려면 색상과 함께 추가로 인쇄해야 합니다.
console.dir(object, {depth: null, colors: true})
색상은 물론 옵션입니다.'depth: null'은 객체 전체를 인쇄합니다.
브라우저에서는 옵션이 지원되지 않는 것 같습니다.
참고 자료:
https://developer.mozilla.org/en-US/docs/Web/API/Console/dir
https://nodejs.org/api/console.html#console_console_dir_obj_options
사용방법:
console.log('print object: ' + JSON.stringify(session));
전에도 말했지만 가장 간단하게 찾은 건
var getPrintObject=function(object)
{
return JSON.stringify(object);
}
방법은 다음과 같습니다.
console.log("%o", obj);
(이것은 GitHub의 라이브러리에 추가되었습니다.)
바퀴를 다시 만들고 있어!이 솔루션들 중 어느 것도 내 상황에 맞지 않았다.그래서 나는 재빨리 윌슨 페이지의 대답을 조작했다.이것은 (콘솔이나 텍스트 필드 등을 통해) 화면 인쇄를 위한 것이 아닙니다.이러한 상황에서는 정상적으로 동작하며 OP가 요청한 대로 정상적으로 동작합니다.alert에서는 많은 이 다 같이 다 같이 쓰다, 쓰다, 쓰다, 쓰다.alertOP ★★★★★★★★★★」어쨌든 데이터 전송용으로 포맷되어 있습니다.이 버전은 다음과 같은 결과를 반환하는 것 같습니다.toSource()는 아직 본 JSON.stringify하지만 이건 거의 비슷할 것 같아요.이 버전은 폴리필에 가깝기 때문에 어떤 환경에서도 사용할 수 있습니다.자바스크립트
이런 게 어디선가 이미 방송되고 있다면 의심의 여지가 없겠지만, 과거의 답을 찾는 데 시간을 보내는 것보다 만드는 게 더 짧았을 뿐이죠.이 질문을 검색하기 시작했을 때 구글에서 가장 큰 인기를 끌었기 때문에다른 사람에게 도움이 될 것 같아서
어쨌든 이 함수의 결과는 객체에 내장된 객체와 배열이 있는 경우에도 객체의 문자열이 표현됩니다.또한 이러한 객체나 배열에 포함된 객체와 배열이 있는 경우에도 마찬가지입니다.(술을 좋아하신다면서요?네 차에 냉각기를 달아놨어그리고 쿨러로 네 쿨러에 꽂아놨어쿨러도 마실 수 있고 쿨러도 마실 수 있습니다.)
은 음음음음음음음음음 arrays arrays arrays arrays with with with with with with 로 저장됩니다.[]{}따라서 키/값 쌍이 없고 값만 있습니다.일반 어레이와 같습니다.따라서 어레이와 마찬가지로 생성됩니다.
또한 모든 문자열(키 이름 포함)이 따옴표로 묶입니다.이 문자열에 특수 문자(스페이스나 슬래시 등)가 없는 한 이 문자열은 필요하지 않습니다.다만, 아직 정상적으로 동작하고 있는 견적을 삭제하는 것만으로, 이것을 검출하고 싶지 않았습니다.
이 은 can과음음음음음음음음음음음음음음음 can can this this this this this 와 함께 사용할 수 .eval아니면 끈 조작에 버리기만 하면 됩니다.따라서 오브젝트를 텍스트에서 다시 만듭니다.
function ObjToSource(o){
if (!o) return 'null';
var k="",na=typeof(o.length)=="undefined"?1:0,str="";
for(var p in o){
if (na) k = "'"+p+ "':";
if (typeof o[p] == "string") str += k + "'" + o[p]+"',";
else if (typeof o[p] == "object") str += k + ObjToSource(o[p])+",";
else str += k + o[p] + ",";
}
if (na) return "{"+str.slice(0,-1)+"}";
else return "["+str.slice(0,-1)+"]";
}
내가 모든 걸 망쳤다면, 내 테스트에서 잘 됐는지 알려줘.제가 생각할 수은 타입을 입니다.array'부터'가 였습니다.length Javascript 타입을 할 수 array(이렇게 하다!)다른 사람이 더 좋은 방법을 알고 있다면 듣고 싶어요.왜냐하면,에도 냐냐 named named named named named named named named라는 이름의 속성이 length그러면 이 함수는 그것을 배열로 잘못 취급합니다.
EDIT: null 값 개체에 대한 검사가 추가되었습니다.감사합니다 브록 아담스
편집: 무한 재귀 객체를 인쇄할 수 있는 고정 함수는 다음과 같습니다.은 인쇄하다와 .toSourceFF가 FF를 하기 때문에 toSource무한 재귀가 한 번 인쇄됩니다. 여기서 이 함수는 무한 재귀를 즉시 중지합니다.이 함수는 위의 함수보다 실행 속도가 느리기 때문에 위의 함수를 편집하는 대신 여기에 추가합니다. 링크된 오브젝트를 자신에게 전달할 경우에만 필요하기 때문입니다.
const ObjToSource=(o)=> {
if (!o) return null;
let str="",na=0,k,p;
if (typeof(o) == "object") {
if (!ObjToSource.check) ObjToSource.check = new Array();
for (k=ObjToSource.check.length;na<k;na++) if (ObjToSource.check[na]==o) return '{}';
ObjToSource.check.push(o);
}
k="",na=typeof(o.length)=="undefined"?1:0;
for(p in o){
if (na) k = "'"+p+"':";
if (typeof o[p] == "string") str += k+"'"+o[p]+"',";
else if (typeof o[p] == "object") str += k+ObjToSource(o[p])+",";
else str += k+o[p]+",";
}
if (typeof(o) == "object") ObjToSource.check.pop();
if (na) return "{"+str.slice(0,-1)+"}";
else return "["+str.slice(0,-1)+"]";
}
테스트:
var test1 = new Object();
test1.foo = 1;
test1.bar = 2;
var testobject = new Object();
testobject.run = 1;
testobject.fast = null;
testobject.loop = testobject;
testobject.dup = test1;
console.log(ObjToSource(testobject));
console.log(testobject.toSource());
결과:
{'run':1,'fast':null,'loop':{},'dup':{'foo':1,'bar':2}}
({run:1, fast:null, loop:{run:1, fast:null, loop:{}, dup:{foo:1, bar:2}}, dup:{foo:1, bar:2}})
인쇄하려고 .document.body찍한예예 예예예다다를 들어,는 빈 할 뿐이며, FF는 빈 오브젝트 문자열을 사용합니다.toSource는 FF에서 SecurityError: The operation is insecure. on on on on on on on on on on on on에서 크래시 됩니다.Uncaught RangeError: Maximum call stack size exceeded . . . . . . . . . .document.body문자열로 변환되는 것이 아닙니다.크기가 너무 크거나 보안 정책에 위반되어 특정 속성에 액세스할 수 없기 때문입니다.내가 여기서 뭔가를 망치지 않는 이상, 말해!
전체 길이의 개체를 인쇄하려면 , 를 사용할 수 있습니다.
console.log(로그)'를 참조해 주세요.inspect(obj, {showHidden: false, depth: null})
개체를 문자열로 변환하여 인쇄하려면
console.log(JSON.stringify(obj));
오브젝트를 재귀적으로 인쇄할 방법이 필요했고, 페이지윌의 답변이 제공되었습니다(감사합니다).어느 레벨까지 인쇄할 수 있는 방법과 현재 레벨에 따라 적절히 들여쓰기되어 읽기 쉽도록 간격을 추가하도록 조금 업데이트했습니다.
// Recursive print of object
var print = function( o, maxLevel, level ) {
if ( typeof level == "undefined" ) {
level = 0;
}
if ( typeof level == "undefined" ) {
maxLevel = 0;
}
var str = '';
// Remove this if you don't want the pre tag, but make sure to remove
// the close pre tag on the bottom as well
if ( level == 0 ) {
str = '<pre>';
}
var levelStr = '';
for ( var x = 0; x < level; x++ ) {
levelStr += ' ';
}
if ( maxLevel != 0 && level >= maxLevel ) {
str += levelStr + '...</br>';
return str;
}
for ( var p in o ) {
if ( typeof o[p] == 'string' ) {
str += levelStr +
p + ': ' + o[p] + ' </br>';
} else {
str += levelStr +
p + ': { </br>' + print( o[p], maxLevel, level + 1 ) + levelStr + '}</br>';
}
}
// Remove this if you don't want the pre tag, but make sure to remove
// the open pre tag on the top as well
if ( level == 0 ) {
str += '</pre>';
}
return str;
};
사용방법:
var pagewilsObject = {
name: 'Wilson Page',
contact: {
email: 'wilson@hotmail.com',
tel: '123456789'
}
}
// Recursive of whole object
$('body').append( print(pagewilsObject) );
// Recursive of myObject up to 1 level, will only show name
// and that there is a contact object
$('body').append( print(pagewilsObject, 1) );
ES6 템플릿리터럴 개념을 사용하여 JavaScript 객체의 내용을 문자열 형식으로 표시할 수도 있습니다.
alert(`${JSON.stringify(obj)}`);
const obj = {
"name" : "John Doe",
"habbits": "Nothing",
};
alert(`${JSON.stringify(obj)}`);는 항상 는는항 i i i i i i i i i를 쓴다.console.log("object will be: ", obj, obj1)이렇게 하면 JSON에서 stringify를 사용하여 회피책을 실행할 필요가 없습니다.개체의 모든 속성이 적절하게 확장됩니다.
하는 또 다른 은 ""를 사용하는 입니다.JSON.stringify예시를 해 주세요. 음음 츠키
var gandalf = {
"real name": "Gandalf",
"age (est)": 11000,
"race": "Maia",
"haveRetirementPlan": true,
"aliases": [
"Greyhame",
"Stormcrow",
"Mithrandir",
"Gandalf the Grey",
"Gandalf the White"
]
};
//to console log object, we cannot use console.log("Object gandalf: " + gandalf);
console.log("Object gandalf: ");
//this will show object gandalf ONLY in Google Chrome NOT in IE
console.log(gandalf);
//this will show object gandalf IN ALL BROWSERS!
console.log(JSON.stringify(gandalf));
//this will show object gandalf IN ALL BROWSERS! with beautiful indent
console.log(JSON.stringify(gandalf, null, 4));
Javascript 함수
<script type="text/javascript">
function print_r(theObj){
if(theObj.constructor == Array || theObj.constructor == Object){
document.write("<ul>")
for(var p in theObj){
if(theObj[p].constructor == Array || theObj[p].constructor == Object){
document.write("<li>["+p+"] => "+typeof(theObj)+"</li>");
document.write("<ul>")
print_r(theObj[p]);
document.write("</ul>")
} else {
document.write("<li>["+p+"] => "+theObj[p]+"</li>");
}
}
document.write("</ul>")
}
}
</script>
인쇄 개체
<script type="text/javascript">
print_r(JAVACRIPT_ARRAY_OR_OBJECT);
</script>
var list = function(object) {
for(var key in object) {
console.log(key);
}
}
서 ''는object의 입니다.
또는 Chrome 개발 도구에서 "cryme" 탭을 사용할 수 있습니다.
console.log(object);
★★★★★★★★★★★★★★★★★★★★★★★★★obj = {0:'John', 1:'Foo', 2:'Bar'}
개체 내용 인쇄
for (var i in obj){
console.log(obj[i], i);
}
콘솔 출력(Crome DevTools):
John 0
Foo 1
Bar 2
도움이 됐으면 좋겠네요!
사용하는 것을 선호합니다.console.table오브젝트 포맷을 클리어하기 위해 다음 오브젝트가 있다고 가정합니다.
const obj = {name: 'Alireza', family: 'Dezfoolian', gender: 'male', netWorth: "$0"};
그리고 다음과 같이 깔끔하고 읽기 쉬운 표를 볼 수 있습니다.
Node.js의 인라이너를 찾고 있다면...
console.log("%o", object);
콘솔에서 간단하고 빠른 디버깅을 위해 프로젝트에서 항상 사용하는 작은 도우미 기능입니다.라라벨에서 얻은 영감입니다.
/**
* @param variable mixed The var to log to the console
* @param varName string Optional, will appear as a label before the var
*/
function dd(variable, varName) {
var varNameOutput;
varName = varName || '';
varNameOutput = varName ? varName + ':' : '';
console.warn(varNameOutput, variable, ' (' + (typeof variable) + ')');
}
사용.
dd(123.55);★★★★
var obj = {field1: 'xyz', field2: 2016};
dd(obj, 'My Cool Obj');
console.log()는 오브젝트의 디버깅을 훌륭하게 수행합니다만, 페이지 컨텐츠에 오브젝트를 인쇄하는 경우는, PHP 의 print_r() 의 기능을 모방하는 가장 간단한 방법이 있습니다.다른 많은 답변은 휠을 재창조하고 싶지만 JavaScript의 JSON.stringify()와 HTML의 <pre> 태그 사이에서 원하는 것을 얻을 수 있습니다.
var obj = { name: 'The Name', contact: { email: 'thename@gmail.com', tel: '123456789' }};
$('body').append('<pre>'+JSON.stringify(obj, null, 4)+'</pre>');<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>pagewil의 인쇄 방법을 사용했는데, 아주 잘 작동했어요.
다음은 (인덱트)와 구별되는 prop/ob 구분자를 사용한 약간 확장된 버전입니다.
var print = function(obj, delp, delo, ind){
delp = delp!=null ? delp : "\t"; // property delimeter
delo = delo!=null ? delo : "\n"; // object delimeter
ind = ind!=null ? ind : " "; // indent; ind+ind geometric addition not great for deep objects
var str='';
for(var prop in obj){
if(typeof obj[prop] == 'string' || typeof obj[prop] == 'number'){
var q = typeof obj[prop] == 'string' ? "" : ""; // make this "'" to quote strings
str += ind + prop + ': ' + q + obj[prop] + q + '; ' + delp;
}else{
str += ind + prop + ': {'+ delp + print(obj[prop],delp,delo,ind+ind) + ind + '}' + delo;
}
}
return str;
};
언급URL : https://stackoverflow.com/questions/957537/how-can-i-display-a-javascript-object
'source' 카테고리의 다른 글
| create-react-app 4.0.3을 실행하고 있으며 최신 릴리스(5.0.0)보다 뒤처져 있습니다. (0) | 2022.11.05 |
|---|---|
| Python을 사용하여 Gmail을 프로바이더로 이메일을 보내는 방법은 무엇입니까? (0) | 2022.11.05 |
| unzip : "unzip"이라는 용어는 명령어 이름으로 인식되지 않습니다. (0) | 2022.11.05 |
| Python에서 문자열을 소문자로 만들려면 어떻게 해야 하나요? (0) | 2022.11.05 |
| MySQL의 CONCAT에서 GROUP_CONCAT를 사용하는 방법 (0) | 2022.11.05 |