JavaScript JSON.stringify()

JavaScript JSON.stringify() 语法

JSON.stringify() 是 JavaScript 中 JSON 对象的一个静态方法，它用于将一个 “JavaScript 对象” 或一个 “JavaScript 数组” 转换为 “JSON 字符串” 。

语法：

JSON.stringify(value, replacer, space)

说明：

JSON.stringify() 方法接收以下 3 个参数。

• value（必选）：是一个 “JavaScript 数组”，或 “JavaScript 对象” 。
• replacer（可选）：是一个数组或函数。如果是数组，则只有在数组中列出的属性才会被包含在最终的 JSON 字符串中。如果是函数，则在转换过程中对每个属性值进行修改。
• space（可选）：是一个字符串或数字。用于控制输出 JSON 字符串的缩进和间距。如果是一个数字，则表示每级缩进的空格数（最大为 10）。

JSON.stringify() 不会改变原始值，然后它会返回一个符合 JSON 格式的字符串。

JavaScript JSON.stringify() 摘要

JavaScript JSON.stringify() 示例

接下来，我们通过几个简单的例子来讲解一下 JavaScript JSON.stringify() 方法是如何使用的。

示例 1：JSON.stringify() 基本用法

// 转换对象
const product = {
    "name": "Laptop",
    "price": 5000,
    "isPublished": true
};
const result1 = JSON.stringify(product);
console.log(result1);
console.log(typeof result1);

// 转换数组
const nums = [10, 20, 30, 40, 50];
const result2 = JSON.stringify(nums);
console.log(result2);
console.log(typeof result2);

运行结果如下。

{"name":"Laptop","price":5000,"isPublished":true}
string
[10,20,30,40,50]
string

分析：

JSON.stringify(product) 最终会将 product（这是一个对象）转换为下面这样一个字符串：

'{"name":"Laptop","price":5000,"isPublished":true}'

然后，JSON.stringify(nums) 最终会将 nums（这是一个数组）转换为下面这样一个字符串：

'[10,20,30,40,50]'

可能有小伙伴会问：“为什么要将一个 JavaScript 对象或数组转换为一个 JSON 格式的字符串呢？” 其实原因很简单，就拿前后端数据通信来说，如果前端有一个 JavaScript 对象，然后我想要将它发送给服务器。但是在网络传输数据的时候，只能是传输字符串类型的数据，而不能直接传输一个对象。

我们可以在前端先使用 JSON.stringify() 将该对象转换为字符串（这个过程叫 “序列化”），然后将该字符串发送给服务器。服务器那边收到这个字符串的时候，再将其转换为对象（这个过程叫 “反序列化”），这样就可以在服务器中使用了。

示例 2：JSON.stringify() 选择属性（replacer 参数）

const product = {
    "name": "Laptop",
    "price": 5000,
    "color": "red",
    "size": 18,
    "isPublished": true
};

const result = JSON.stringify(product, ["name", "price", "size"]);
console.log(result);

运行结果如下。

{"name":"Laptop","price":5000,"size":18}

分析：

当 JSON.stringify() 的第 2 个参数（即 replacer 参数）是一个数组时，表示只有该数组中包含的属性名对应的键值对，才会被序列化到 JSON 字符串中。

示例 3：JSON.stringify() 控制缩进（space 参数）

const product = {
    "name": "Laptop",
    "price": 5000,
    "isPublished": true
};

// 使用 4 个空格作为缩进
console.log(JSON.stringify(product, null, 4));

// 使用字符串 "----" 作为缩进
console.log(JSON.stringify(product, null, "----"));

运行结果如下。

{
    "name": "Laptop",
    "price": 5000,
    "isPublished": true
}
{
----"name": "Laptop",
----"price": 5000,
----"isPublished": true
}

分析：

我们可以使用 JSON.stringify() 的第 3 个参数（即 space 参数）来控制 JSON 字符串的缩进，使其更具有可读性。不过在实际开发中，一般很少会这样去做。

示例 4：JSON.stringify() 会忽略特定值

const product = {
    "name": "Laptop",
    "price": 5000,
    "isPublished": undefined,
    "getTax": function() {
         return this.price * 0.05;
    }
};

const result = JSON.stringify(product);
console.log(result);

运行结果如下。

{"name":"Laptop","price":5000}

分析：

在默认情况下，JSON.stringify() 会忽略 “值为 undefined 的属性” 和 “值为函数的属性”。

JavaScript JSON.stringify() 应用场景

在实际项目开发中，JSON.stringify() 和 JSON.parse() 这两个方法，一般都是搭配一起使用的，它们主要用于以下 4 种场景：

• 数据传输：比如将 JavaScript 对象转换为 JSON 字符串，然后通过 AJAX 发送给服务器。
• 本地存储：比如将 JavaScript 对象存储到浏览器的 localStorage 或 sessionStorage 中（因为它们只能存储字符串）。
• 深拷贝（有限制）：我们可以通过 JSON.parse(JSON.stringify(object)) 这种方式来实现对象的深拷贝。不过这种方式无法复制函数、undefined 值、Date 对象 等特殊类型。
• 比较对象：我们可以将两个对象转换为 JSON 字符串，然后比较对应的字符串是否相等，从而判断两个对象是否包含相同的属性和值（但属性顺序可能不同）。