JavaScript 对象显示

如何显示 JavaScript 对象？

显示 JavaScript 对象将输出[对象对象]。

示例

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;

亲自试一试 »

你必须使用人[x]在循环。

人.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 对象都可以使用 JavaScript 函数进行字符串化（转换为字符串）JSON.stringify()：

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 表示法的字符串：

{"name":"John","age":50,"city":"New York"}

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;

亲自试一试 »

如果您在字符串化之前将函数转换为字符串，则这可能是 "fixed"。

示例

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 表示法的字符串：

["John","Peter","Sally","Jane"]