你真的会用JSON.stringify()吗？

JSON（JavaScript Object Notation）是轻量级、方便阅读、用于交换数据的一种通用数据格式。最初它是为 JavaScript 而创建的，但许多其他编程语言也有用于处理它的库。因此，当客户端使用 JavaScript 而服务器端是使用 Ruby/PHP/Java 等语言编写的时，使用 JSON 可以很容易地进行数据交换。

JSON对象有两个转换和存储JSON数据的重要方法:JSON.parse()和JSON.stringify()。 JSON.parse()方法接受一个JSON字符串并将其转换为JavaScript对象。 类似的，JSON.stringify()接受JavaScript对象并将其转换为JSON字符串 。

const obj = {
    id: 1,
    name: 'Hamburger',
    icon: '🍔',
    type: 'Food'
};
​
// 将对象转换成 JSON 字符串
const jsonStr = JSON.stringify(obj);
console.log(jsonStr);  // '{"id":1,"name":"Hamburger","icon":"🍔","type":"Food"}'

// 将 JSON 字符串转换成对象
console.log(JSON.parse(jsonStr));  // {id: 1, name: 'Hamburger', icon: '🍔', type: 'Food'}

JSON 编码的对象与对象字面量有几个重要的区别：

• 字符串使用双引号。JSON 中没有单引号或反引号。所以 'Hamburger' 被转换为 "Hamburger"
• 对象属性名称也是双引号的。这是强制性的。所以 id:1 被转换成 "id":1

此外，JSON.parse()和JSON.stringify()不仅可以用于JSON对象，还可以用于JSON数组和字符串的互相转换：

const jsonArr = ['🙂', '😀', '😉', '😆', '😊'];
​
const jsonStr = JSON.stringify(jsonArr);
typeof(jsonStr) // string
console.log(jsonStr); // '["🙂","😀","😉","😆","😊"]'
​
console.log(JSON.parse(jsonStr)); // ['🙂', '😀', '😉', '😆', '😊']

JSON.stringify()

顾名思义，JSON.stringify()方法可以将JavaScript对象转换为JSON字符串。 当从客户端向服务器发送JSON数据时，必须将其转换为JSON字符串。 JSON.stringify 的完整语法是：

let json = JSON.stringify(value, replacer, space)

• value— 要转换的值
• replacer — 用于调整转换结果，参数是array或function
• space — 用于美化输出的格式，参数是string或number

replacer

replacer 是函数时，它接收两个参数：key和value。该函数会为每对 (key,value) 进行调用并返回一个值，该值将替换原有的值。如果打算跳过这个值，就返回undefined，我们来看下面的例子：

const user = {
    name: 'Yiler',
    email: 'Yiler@example.com',
    password: '123abc',
    address: {
        city: 'Shenzhen',
        country: 'China'
    },
    hobbies: ['Singing', 'Jumping', 'Rapping', '🏀']
};
​
const str = JSON.stringify(user, (key, value) => {
    // 修改name
    if (key === 'name') {
        return 'Kun';
    }
    // 过滤password
    if (key === 'password') {
        return undefined;
    }
    return value;
});
​
console.log(str);
/*
'{
  "name": "Kun",
  "email": "Yiler@example.com",
  "address": { "city": "Shenzhen", "country": "China" },
  "hobbies": ["Singing", "Jumping", "Rapping", "🏀"]
}'
*/

我们不想让password属性出现在转换后的字符串中，因此就在replacer 函数中遍历到password时返回undefined，当然也可以返回其它值来进行修改，比如案例中的name。

replacer 是数组时，那么只有数组中存在的属性才会出现在最终的字符串中。

const str = JSON.stringify(user, ['name', 'email']);
​
console.log(str);
// '{ "name": "Yiler", "email": "Yiler@example.com" }'

spacer

space 参数专门用于调整出更美观的输出，它可以是长度不超过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.stringify()相反，JSON.parse()用于将JSON字符串格式的数据转换为JavsScript对象：

const str = '{"name":"Bablu","image":"🐶","age":"6 months"}';
​
const dog = JSON.parse(str);
​
console.log(dog.image); // 🐶

JSON.parse() 的完整语法是：let value = JSON.parse(str, reviver);

reviver

reviver函数为每个 (key, value) 对调用，并可以对值进行转换。

const str = '{"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.name); // BABLU
console.log(dog.image); // 🐶
console.log(dog.age); // 6 MONTHS

总结

• JSON.stringify()接受一个JavaScript对象作为输入，并将其转换为JSON字符串。 它可以接受两个可选参数：replacer和space

  • replacer可以是一个函数或一个数组，用于从最终的JSON字符串中过滤或修改值。
  • space可以是数字，也可以是字符串。 用于控制JSON字符串的间距

• JSON.parse()则相反。 它接受一个JSON字符串，并将其转换回JavaScript对象或值。 可以传递一个可选的reviver函数，以便在对象返回之前对其进行转操作