JavaScript 显示对象
如何显示 JavaScript 对象?显示 JavaScript 对象将输出 [object Object]。
实例
const person = {
name: "Bill",
age: 19,
city: "Seattle"
};
document.getElementById("demo").innerHTML = person;
亲自试一试
显示 JavaScript 对象的一些常见解决方案是:
按名称显示对象属性
循环显示对象属性
使用 Object.values() 显示对象
使用 JSON.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"]
页:
[1]