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()。

Chrome IE Firefox Safari Opera
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"]