了解 JSON.parse() 和 JSON.stringify()

JSON — JavaScript Object Notation — 是一种用于交换数据的轻量级、人类可读的格式。它最初源自 JavaScript，可用于多种编程语言，包括Java、Python、C#、PHP 和 Ruby。

对于 JavaScript 异步操作，作为数据格式使用是很自然的选择。该JSON对象有两个用于转换和存储 JSON 数据的重要方法：parse()和stringify(). 该JSON.parse()方法将字符串作为输入并将其转换为对象。同样，JSON.stringify()获取一个 JSON 对象并将其转换为字符串。

让我们举个例子：

const jsonObj = {
    id: 1,
    name: 'Hamburger',
    icon: '🍔',
    type: 'Food'
};

// convert JSON object to string
const jsonStr = JSON.stringify(jsonObj);

console.log(jsonStr);
// '{"id":1,"name":"Hamburger","icon":"🍔","type":"Food"}'

//convert string back to JSON object
console.log(JSON.parse(jsonStr));
// {id: 1, name: "Hamburger", icon: "🍔", type: "Food"}

这些方法不仅限于 JSON 对象。您还可以使用它们将 JSON 数组转换为字符串，反之亦然：

const jsonArr = ['🐶', '🦉', '💀', '🦆', '🍕'];

const jsonStr = JSON.stringify(jsonArr);

console.log(jsonStr);
// '["🐶","🦉","💀","🦆","🍕"]'

console.log(JSON.parse(jsonStr));
// ["🐶", "🦉", "💀", "🦆", "🍕"]

JSON.stringify()

顾名思义，该JSON.stringify()函数将 JavaScript 对象转换为 JSON 字符串。从客户端向服务器发送 JSON 数据时，必须将其转换为 JSON 字符串。JSON.stringify()还可以采用另外两个可选参数：

• replacer- 操作结果的函数或数组。
• space- 字符串或数字。

该replacer函数为对象中的每个属性调用，可用于从返回的 JSON 字符串中删除特定值：

const user = {
    id: 599,
    name: 'John Doe',
    email: 'john.doe@example.com',
    password: '123abc',
    age: 30,
    address: {
        city: 'New York',
        country: 'United States'
    },
    hobbies: ['Fishing', 'Golf', 'Table Tennis']
};

const str = JSON.stringify(user, (key, value) => {
    // filter-out password from final string
    if (key === 'password') {
        return undefined;
    }
    return value;
});

console.log(str);

以下是上述代码返回的 JSON 字符串，其中不包含密码属性：

'{"id":599,"name":"John Doe","email":"john.doe@example.com","age":30,"address":{"city":"New York","country":"United States"},"hobbies":["Fishing","Golf","Table Tennis"]}'

如果数组作为 a 传递replacer，则只有存在于数组中的对象的那些属性才会包含在结果 JSON 字符串中：

const str = JSON.stringify(user, ['name', 'email', 'age']);

console.log(str);
// '{"name":"John Doe","email":"john.doe@example.com","age":30}'

注意：该replacer函数不能用于从数组中删除值。如果您返回undefined或使用函数，则null使用 then 代替。

Aspace可以是最多 10 个字符的字符串，也可以是 0 到 10 之间的数字。如果指定了字符串，它将用作空格。另一方面，数字表示要用作空格的空格字符数。这是一个例子：

const dog = {
    name: 'Bablu',
    image: '🐶',
    age: '6 months'
};

const str = JSON.stringify(dog, null, '----');

console.log(str);

// "{
// ----"name": "Bablu",
// ----"image": "🐶",
// ----"age": "6 months"
// }"

JSON.parse()

该JSON.parse()功能相反。它将 JSON 字符串作为输入并将其转换为 JavaScript 对象：

const str = '{"name":"Bablu","image":"🐶","age":"6 months"}';

const dog = JSON.parse(str);

console.log(dog.name); // Bablu
console.log(dog.image); // 🐶
console.log(dog.age); // 6 months

reviver还可以传递一个可选函数以在返回对象属性之前对其进行转换：

const str = '{"id":99,"name":"Bablu","image":"🐶","age":"6 months"}';

const dog = JSON.parse(str, (key, value) => {
    if(typeof value === 'string') {
        return value.toUpperCase();
    }
    return value;
});

console.log(dog.id); // 99
console.log(dog.name); // BABLU
console.log(dog.image); // 🐶
console.log(dog.age); // 6 MONTHS

JSON 中不允许使用尾随逗号。因此JSON.parse()，如果作为参数传递的字符串结尾有逗号，则会引发异常：

JSON.parse('[1, 2, 3, 4, ]'); 
// Unexpected token ] in JSON at position 13
JSON.parse('{"name": "John Doe", "age": 29, }'); 
// Unexpected token } in JSON at position 32

概括

JSON 是一种用于在客户端和服务器之间共享数据的轻量级格式。它已成为用 JavaScript 和许多其他编程语言发出异步请求的自然选择。对于转换和存储数据，该JSON对象提供了两个有用的方法：

• JSON.stringify()将 JavaScript 对象作为输入并将其转换为 JSON 字符串。它可以采用两个可选参数：replacer和space。
  • replacer可以是用于从结果 JSON 字符串中过滤掉值的函数或数组。
  • 参数是space数字或字符串。它用于控制最终字符串中的间距。
• JSON.parse()相反。它接受 JSON 字符串并将其转换回 JavaScript 对象或值。reviver可以传递一个可选函数以在对象返回之前对其执行转换。