将 JavaScript 对象转换为 JSON

1. 使用 console.log(jsObject) 查看 JavaScript 对象
2. 使用 JSON.stringify() 将 JSON 对象转换为字符串
3. 使用自定义编写的代码将 JavaScript 对象转换为 JSON
4. 从 JSON 字符串取回 JavaScript 对象

JSON 是一种常用的数据传输格式，用于在 javascript 中表示对象。在大多数客户端-服务器通信中，我们使用 JSON 格式作为标准格式来传输数据。JSON 表示法易于使用和解释，因为它是 JavaScript 对象的人类可读格式。将 javascript 对象转换为 JSON 格式很容易。我们可以通过以下方式进行转换。

使用 console.log(jsObject) 查看 JavaScript 对象

console.log 函数用于将消息输出到 Web 控制台。我们可以使用 Web 浏览器的开发人员工具查看消息。conosle.log() 函数接受对象、消息甚至子字符串。因此，它最适合帮助我们理解 JavaScript 对象的外观。当我们 console.log 一个变量保存一个对象时，我们得到它的可视化 JSON 表示。以下代码使用 console.log 描述了 javascript 对象的表示形式。

var a = {};
a.id = 1;
a.name = "icy-cream";
a.flavor = "vanilla";   
console.log(a);

输出：

{id: 1, name: "icy-cream", flavor: "vanilla"}

在上面的代码中，console.log(a) 输出对象 a 的 JSON 格式。我们将在所有浏览器中为 javascript 对象收到相同的 JSON 表示，因为所有浏览器都支持 conosle.log()，包括不友好的 Internet Explorer。通过 console.log() 选项，我们只能查看对象的 JSON 表示，不能对其进行编辑或将其用于其他编程数据处理，而只能在 Web 控制台中查看。

使用 JSON.stringify() 将 JSON 对象转换为字符串

获取 javascript 对象的 JSON 表示的另一种方法是使用 JSON.stringify() 方法。我们可以使用 JavaScript 对象的 JSON 格式，并使用 JSON.stringify() 方法将其分配给变量。JSON.stringify() 转换 javascript 对象并将对象的 JSON 值作为字符串数据返回。

语法

JSON.stringify(<JSObject>)

参数

该函数将 JavaScript 对象作为参数，接受 replacer 函数和 space count 作为可选参数。

• 我们将目标 JavaScript 对象转换为 JSON 作为 JSON.stringify() 函数的第一个参数。
• 我们使用 replacer 函数来更改 JSON 对象。使用它，我们可以在将对象转换为 JSON 格式之前指定我们希望从对象中过滤掉的属性。
• space count 参数是一个数字或字符串值，指定要放入输出 JSON 字符串中的空格字符数，以使其成为人类可读的格式。

返回值

JSON.stringify() 返回 JavaScript 对象的字符串 JSON 格式。

用法

让我们使用上一节中使用的相同对象。但是这一次，我们将使用 JSON.stringify() 将其转换为 JSON 字符串。参考以下代码。

var a = {};
a.id = 1;
a.name = "icy-cream";
a.flavor = "vanilla";
console.log(JSON.stringify(a));
console.log(JSON.stringify(a, null, 0));
console.log(JSON.stringify(a, null, 5));

输出：

{"id":1,"name":"icy-cream","flavor":"vanilla"}
{"id":1,"name":"icy-cream","flavor":"vanilla"}
{
     "id": 1,
     "name": "icy-cream",
     "flavor": "vanilla"
}

在 JSON.stringify() 函数的第三个参数中使用一个数字，我们可以得到一个可读性更好的 JSON 字符串作为输出。该方法将通过在 JSON 的每个键值对之前添加指定数量的空格来格式化 JSON。例如，在 JSON.stringify(a, null, 5) 中，对象 a 的 id 参数放置在五个空格字符之后。

使用自定义编写的代码将 JavaScript 对象转换为 JSON

如果我们要编写用于将 JavaScript 对象转换为 JSON 格式的代码，我们将不得不使用 Object.keys() 函数。Object.keys() 是一种 javascript 方法，它提取对象的 keys 并返回一个包含 keys 的数组。因此，使用我们的自定义代码，我们将 javascript 对象的 keys 和 values 组合在一起，并将它们包含在 {} 大括号内，以获得 javascript 对象的 JSON 表示。让我们看看下面的代码。

var a = {};
a.id = 1;
a.name = "icy-cream";
a.flavor = "vanilla";
var keys = Object.keys(a);
var JSONOut = "{";
for (let i = 0; i < keys.length; i++) {
   JSONOut = JSONOut + `"${keys[i]}":"${a[keys[i]]}",`;
}
JSONOut = JSONOut + "}";
console.log(JSONOut);

输出：

{"id":"1","name":"icy-cream","flavor":"vanilla",}

从 JSON 字符串取回 JavaScript 对象

在大多数 Web 应用程序中，我们将 javascript 对象作为 JSON 字符串存储到数据库中，以便稍后使用它们来呈现相同的 UI。我们可以将 JSON 作为 JSON string 存储在数据库中。我们如何使用 REST API 取回 JSON 或与从数据库中提取的 JSON 字符串相对应的 JavaScript 对象？JavaScript 有 JSON.parse() 方法用于将 JSON 转换回 JavaScript 对象。参考以下代码。

var response = `{
     "id": 1,
     "name": "icy-cream",
     "flavor": "vanilla"
}`
console.log(JSON.parse(response));
var a = JSON.parse(response);
a.id = 20;
console.log(a);

输出：

{id: 1, name: "icy-cream", flavor: "vanilla"}
{id: 20, name: "icy-cream", flavor: "vanilla"}

使用上面的代码，我们通过 JSON.parse() 方法将 JSON 字符串转换回 JavaScript 对象，并将其分配给一个变量。更改同一 JavaScript 对象的 id 属性的值也会更改属性值。因此，我们可以将字符串 JSON 转换为有效的 javascript 对象，我们可以在代码中以编程方式处理该对象。请注意，我们可以使用波浪号字符来接受具有多个换行符的字符串。