WEB基础之：JavaScript对象序列化

JavaScript对象序列化

• • 1. 序列化
  • 2. 反序列化
  • • 2.1 使用reviver函数
    • 2.2 `JSON.parse()` 不允许用逗号作为结尾

1. 序列化

JSON.stringify(value[, replacer [, space]]) 方法将一个 JavaScript 对象或值转换为 JSON 字符串。

• 可选replacer，
  • 如果是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理；
  • 如果是一个数组，则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中；
  • 如果该参数为 null 或者未提供，则对象所有的属性都会被序列化。
• 可选space，指定缩进用的空白字符串，用于美化输出（pretty-print）；
  • 如果参数是个数字，它代表有多少的空格；上限为10。该值若小于1，则意味着没有空格；
  • 如果该参数为字符串（当字符串长度超过10个字母，取其前10个字母），该字符串将被作为空格；
  • 如果该参数没有提供（或者为 null），将没有空格。

console.log(JSON.stringify({ x: 1, y: 2 }));
// "{"x":1,"y":2}"

console.log(JSON.stringify([new Number(3), new String('false'), new Boolean(false)]));
// "[3,"false",false]"

console.log(JSON.stringify({ x: [4, undefined, function(){}, Symbol('')] }));
// "{"x":[4,null,null,null]}"

a1 = [1,2,3,'a','b','c']
JSON.stringify(a1)
// "[1,2,3,\"a\",\"b\",\"c\"]"

2. 反序列化

JSON.parse(text[, reviver]) 方法用来解析JSON字符串，构造由字符串描述的JavaScript值或对象。

• 可选的 reviver 函数用以在返回之前对所得到的对象执行变换(操作)。

const json = '{"result":true, "count":1}';
const obj = JSON.parse(json);

console.log(obj.result);
// true

console.log(obj.count);
// 1

a1 = [1,2,3,'a','b','c']
s1 = JSON.stringify(l1);
// "[1,2,3,\"a\",\"b\",\"c\"]"
JSON.parse(s1)
// Array(6) [ 1, 2, 3, "a", "b", "c" ]

d1 = {'k1':'v1', 'k2':'v2'}
s1 = JSON.stringify(d1);
// "{\"k1\":\"v1\",\"k2\":\"v2\"}"
d2 = JSON.parse(s1)
// Object { k1: "v1", k2: "v2" }

2.1 使用reviver函数

如果指定了 reviver 函数，解析出的 JavaScript 值（解析值）本身以及它所包含的所有属性，会按照一定的顺序分别的去调用 reviver 函数;

• 在调用过程中，当前属性所属的对象会作为 this 值，当前属性名和属性值会分别作为第一个和第二个参数传入 reviver 中。如果 reviver 返回 undefined，则当前属性会从所属对象中删除，如果返回了其他值，则返回的值会成为当前属性新的属性值。
• 当遍历到最顶层的值（解析值）时，传入 reviver 函数的参数会是空字符串 ""（因为此时已经没有真正的属性）和当前的解析值（有可能已经被修改过了），当前的 this 值会是 {"": 修改过的解析值}。
• 注意函数的遍历顺序：从最内层开始，按照层级顺序，依次向外遍历，最终到达顶层，也就是解析值本身）

JSON.parse('{"p": 5}', function (k, v) {
    if(k === '') return v;     // 如果到了最顶层，则直接返回属性值，
    return v * 2;              // 否则将属性值变为原来的 2 倍。
});                            // { p: 10 }

JSON.parse('{"1": 1, "2": 2,"3": {"4": 4, "5": {"6": 6}}}', function (k, v) {
    console.log(k); // 输出当前的属性名，从而得知遍历顺序是从内向外的，
                    // 最后一个属性名会是个空字符串。
    return v;       // 返回原始属性值，相当于没有传递 reviver 参数。
});

// 1
// 2
// 4
// 6
// 5
// 3
// <empty string>

2.2 JSON.parse() 不允许用逗号作为结尾

JSON.parse("[1, 2, 3, ]");
// SyntaxError
JSON.parse('{"k1" : v1, }');
// SyntaxError