如何显示 JavaScript 对象？
显示 JavaScript 对象将输出 [object Object]。
实例
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
const person = {
name: "Bill",
age: 19,
city: "Seattle"
};
document.getElementById("demo").innerHTML = person;
</script>
</body>
</html>
//[object Object]
显示 JavaScript 对象的一些常见解决方案是：
- 按名称显示对象属性
- 循环显示对象属性
- 使用 Object.values() 显示对象
- 使用 JSON.stringify() 显示对象
显示对象属性
对象的属性可显示为字符串：
实例
<!DOCTYPE html>
<html lang="en">
<body>
<p id="demo"></p>
<script>
const person={
nama:"DianDian",
age:20,
city:"ShenZhen"
}
document.getElementById("demo").innerHTML = person.nama+" ,"+person.age+" ,"+person.city;
</script>
</body>
</html>
//DianDian ,20 ,ShenZhen
在循环中显示对象
可以在循环中收集对象的属性：
实例
<!DOCTYPE html>
<html lang="en">
<body>
<p id="demo"></p>
<script>
const person={
nama:"DianDian",
age:20,
city:"ShenZhen"
};
let txt ="";
for(let x in person){
txt+=person[x]+" ";
};
document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html>
//DianDian 20 ShenZhen
必须在循环中使用 person[x]。person.x 将不起作用（因为 x 是一个变量）。
使用 Object.values()
通过使用 Object.values()，任何 JavaScript 对象都可以被转换为数组：
<!DOCTYPE html>
<html lang="en">
<body>
<p id="demo"></p>
<script>
const person = {
name: "Bill",
age: 19,
city: "Seattle"
};
const myArray = Object.values(person);
document.getElementById("demo").innerHTML = myArray;
</script>
</body>
</html>
//Bill,19,Seattle
使用 JSON.stringify()
任何 JavaScript 对象都可以使用 JavaScript 函数 JSON.stringify() 进行字符串化（转换为字符串）
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
const person = {
name: "Bill",
age: 19,
city: "Seattle"
};
document.getElementById("demo").innerHTML = JSON.stringify(person);
</script>
</body>
</html>
//{"name":"Bill","age":19,"city":"Seattle"}
日期字符串化
JSON.stringify 将日期转换为字符串：
实例
</html>
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var person = {
name: "Bill",
today: new Date()
};
document.getElementById("demo").innerHTML = JSON.stringify(person);
</script>
</body>
</html>
//{"name":"Bill","today":"2024-08-26T03:09:50.156Z"}
函数字符串化
JSON.stringify 不会对函数进行字符串化：
实例
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
const person = {
name: "Bill",
age: function () { return 19; }
};
document.getElementById("demo").innerHTML = JSON.stringify(person);
</script>
</body>
</html>
//{"name":"Bill"}
如果在字符串化之前将函数转换为字符串，这可以是"固定的"。
实例
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
const person = {
name: "Bill",
age: function () { return 19; }
};
person.age = person.age.toString();
document.getElementById("demo").innerHTML = JSON.stringify(person);
</script>
</body>
</html>
//{"name":"Bill","age":"function () {return 19;}"}
数组字符串化
也可以对 JavaScript 数组进行字符串化：
实例
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
const arr = ["Bill", "Steve", "Elon", "David"];
document.getElementById("demo").innerHTML = JSON.stringify(arr);
</script>
</body>
</html>
//["Bill","Steve","Elon","David"]