JavaScript 63 JavaScript 对象 63.4 JavaScript 显示对象

JavaScript

63 JavaScript 对象

63.4 JavaScript 显示对象

63.4.1 如何显示 JavaScript 对象？

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

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};

document.getElementById("demo").innerHTML = person;
1
2
3
4
5
6
7

显示 JavaScript 对象的一些常见解决方案是：

• 按名称显示对象属性
• 循环显示对象属性
• 使用 Object.values() 显示对象
• 使用 JSON.stringify() 显示对象

63.4.2 显示对象属性

对象的属性可显示为字符串：

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};

document.getElementById("demo").innerHTML =
person.name + "," + person.age + "," + person.city;
1
2
3
4
5
6
7
8

63.4.3 在循环中显示对象

可以在循环中收集对象的属性：

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};

let txt = "";
for (let x in person) {
txt += person[x] + " ";
};

document.getElementById("demo").innerHTML = txt;
1
2
3
4
5
6
7
8
9
10
11
12

必须在循环中使用 person[x]。【person.x 将不起作用（因为 x 是一个变量）。】

63.4.4 使用 Object.values()

通过使用 Object.values()，任何 JavaScript 对象都可以被转换为数组：

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};

const myArray = Object.values(person);
1
2
3
4
5
6
7

myArray 现在是 JavaScript 数组，可以显示了：

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};

const myArray = Object.values(person);
document.getElementById("demo").innerHTML = myArray;
1
2
3
4
5
6
7
8

自 2016 年以来，所有主要浏览器都支持 Object.values()。

63.4.5 使用 JSON.stringify()

任何 JavaScript 对象都可以使用 JavaScript 函数 JSON.stringify() 进行字符串化（转换为字符串）

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};

let myString = JSON.stringify(person);
1
2
3
4
5
6
7

myString 现在是 JavaScript 字符串，可以显示了

结果是一个遵循 JSON 标记法的字符串：

{"name":"Bill","age":19,"city":"Seattle"}
1

JSON.stringify() 包含在 JavaScript 中，所有主流浏览器都支持。

63.4.6 日期字符串化

JSON.stringify 将日期转换为字符串：

const person = {
  name: "Bill",
  today: new Date()
};

let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
1
2
3
4
5
6
7

63.4.7 函数字符串化

JSON.stringify 不会对函数进行字符串化：

const person = {
  name: "Bill",
  age: function () {return 19;}
};

let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
1
2
3
4
5
6
7

如果在字符串化之前将函数转换为字符串，这可以是“固定的”。

const person = {
  name: "Bill",
  age: function () {return 19;}
};
person.age = person.age.toString();

let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
1
2
3
4
5
6
7
8

63.4.8 数组字符串化

也可以对 JavaScript 数组进行字符串化：

const arr = ["Bill", "Steve", "Elon", "David"];

let myString = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myString;
1
2
3
4

结果将是一个遵循 JSON 标记法的字符串：

["Bill","Steve","Elon","David"]
1