JavaScript表示オブジェクト
JavaScriptオブジェクトを表示するには?
JavaScript オブジェクトを表示すると、[object Object]が出力されます。
例
const person = {
name: "John",
age: 30,
city: "New York"
};
document.getElementById("demo").innerHTML = person;
JavaScriptオブジェクトを表示するための一般的な解決策は次のとおりです。
- 名前によるオブジェクプロパティの表示
- ループ内のオブジェクトプロパティの表示
- Object.values()を使用してオブジェクトを表示
- JSON.stringify()を使用してオブジェクトを表示
オブジェクトプロパティの表示
オブジェクトのプロパティは、文字列として表示できます。
例
const person = {
name: "John",
age: 30,
city: "New York"
};
document.getElementById("demo").innerHTML =
person.name + "," + person.age + "," + person.city;
オブジェクトをループで表示する
オブジェクトのプロパティは、ループで収集できます。
例
const person = {
name: "John",
age: 30,
city: "New York"
};
let txt = "";
for (let x in person) {
txt += person[x] + " ";
};
document.getElementById("demo").innerHTML = txt;
ループ内ではperson[x]を使用する必要があります。
person.xは機能しません(xは変数であるため)。
Object.values()の使用
JavaScriptオブジェクトは、Object.values()を使用して配列に変換できます。
const person = {
name: "John",
age: 30,
city: "New York"
};
const myArray = Object.values(person);
myArrayはJavaScript配列になり、表示する準備が整いました:
例
const person = {
name: "John",
age: 30,
city: "New York"
};
const myArray = Object.values(person);
document.getElementById("demo").innerHTML = myArray;
Object.values()は2016年以降、すべての主要なブラウザーでサポートされています。
| 54(2016) | 14(2016) | 47(2016) | 10(2016) | 41(2016) |
JSON.stringify()の使用
JavaScript関数JSON.stringify()を使用すると、任意のJavaScriptオブジェクトを文字列化(文字列に変換)できます。
const person = {
name: "John",
age: 30,
city: "New York"
};
let myString = JSON.stringify(person);
myStringはJavaScript文字列になり、表示する準備ができました。
例
const person = {
name: "John",
age: 30,
city: "New York"
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
結果は、JSON表記に従った文字列になります。
{"名前":"ジョン","年齢":50歳,"都市":"ニューヨーク"}
JSON.stringify()JavaScriptに含まれており、すべての主要なブラウザーでサポートされています。
日付の文字列化
JSON.stringify日付を文字列に変換します。
例
const person = {
name: "John",
today: new Date()
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
文字列化関数
JSON.stringify関数を文字列化しません。
例
const person = {
name: "John",
age: function () {return 30;}
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
これは、文字列化する前に関数を文字列に変換すると「修正」できます。
例
const person = {
name: "John",
age: function () {return 30;}
};
person.age = person.age.toString();
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
配列の文字列化
JavaScript配列を文字列化することもできます。
例
const arr = ["John", "Peter", "Sally", "Jane"];
let myString = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myString;
結果は、JSON表記に従った文字列になります。
[「ジョン」、「ピーター」、「サリー」、「ジェーン」]
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。