JavaScript 객체 표시

JavaScript 객체를 어떻게 출력하나요?

JavaScript 객체를 출력하는 방법을 보여줍니다 [object Object]。

예제

const person = {
  name: "Bill",
  age: 19,,
  city: "Seattle"
};
document.getElementById("demo").innerHTML = person;

직접 시도해 보세요

JavaScript 객체를 표시하는 일반적인 해결책은 다음과 같습니다：

  • 이름에 따라 객체 속성 표시
  • 루프를 사용하여 객체 속성 표시
  • Object.values()를 사용하여 객체 표시
  • Object.stringify()를 사용하여 객체 표시

객체 속성 표시

객체 속성은 문자열로 표시될 수 있습니다：

예제

const person = {
  name: "Bill",
  age: 19,,
  city: "Seattle"
};
document.getElementById("demo").innerHTML =
person.name + "," + person.age + "," + person.city;

직접 시도해 보세요

루프에서 객체를 표시하십시오

루프에서 객체의 속성을 수집할 수 있습니다：

예제

const person = {
  name: "Bill",
  age: 19,,
  city: "Seattle"
};
let txt = "";
for (let x in person) {
txt += person[x] + " ";
};
document.getElementById("demo").innerHTML = txt;

직접 시도해 보세요

person[x]를 사용하여 루프에서 사용해야 합니다。

person.x는 동작하지 않습니다(변수인 x로 인해)

Object.values()를 사용하여

사용하여 Object.values()아니라면 모든 JavaScript 객체는 배열로 변환될 수 있습니다：

const person = {
  name: "Bill",
  age: 19,,
  city: "Seattle"
};
const myArray = Object.values(person);

myArray 이제 JavaScript 배열로 변환되었으므로 표시할 수 있습니다：

예제

const person = {
  name: "Bill",
  age: 19,,
  city: "Seattle"
};
const myArray = Object.values(person);
document.getElementById("demo").innerHTML = myArray;

직접 시도해 보세요

2016년 이후 모든 주요 브라우저가 지원합니다 Object.values()。

크롬 IE 파이어폭스 사파리 오페라
54 (2016) 14 (2016) 47 (2016) 10 (2016) 41 (2016)

JSON.stringify()를 사용하여

모든 JavaScript 객체는 JavaScript 함수를 사용하여 JSON.stringify() 문자열화(문자열로 변환)를 수행하십시오：

const person = {
  name: "Bill",
  age: 19,,
  city: "Seattle"
};
let myString = JSON.stringify(person);

myString 이제 JavaScript 문자열로 변환되었으므로 표시할 수 있습니다：

예제

const person = {
  name: "Bill",
  age: 19,,
  city: "Seattle"
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

직접 시도해 보세요

결과는 JSON 표기법을 따르는 문자열이 될 것입니다:

{"name":"Bill","age":19,"city":"Seattle"}

JSON.stringify() JavaScript에 포함되어 있으며 모든 주요 브라우저가 지원합니다。

날짜 문자열화

JSON.stringify 날짜를 문자열로 변환하십시오：

예제

const person = {
  name: "Bill",
  today: new Date()
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

직접 시도해 보세요

함수 문자열화

JSON.stringify 함수는 문자열화되지 않습니다:

예제

const person = {
  name: "Bill",
  age: function () {return 19;}
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

직접 시도해 보세요

문자열화 전에 함수를 문자열로 변환하면 "고정된" 될 수 있습니다.

예제

const person = {
  name: "Bill",
  age: function () {return 19;}
};
person.age = person.age.toString();
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

직접 시도해 보세요

배열 문자열화

JavaScript 배열도 문자열화할 수 있습니다:

예제

const arr = ["Bill", "Steve", "Elon", "David"];
let myString = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myString;

직접 시도해 보세요

결과는 JSON 표기법을 따르는 문자열이 될 것입니다:

["Bill","Steve","Elon","David"]