前端基础系列之JS-JSON序列化

249 阅读1分钟

内容: JSON.stringify(),JSON.parse()

目标: 实用,易懂,非原理

一、JSON.stringify()

简单使用 JSON.stringify(value)

数据类型 string,number,boolean,null,object,array

使用示例

JSON.stringify("I am string"); // '"I am string"'
JSON.stringify(1); // "1"
JSON.stringify(true); // "true"
JSON.stringify(null); // "null"
JSON.stringify({ name: "小鱼儿", age: 18, marry: false }); // '{ "name": "小鱼儿", "age": 18 , "marry": false }'
JSON.stringify([new Number(18), new String("false"), false]); // '[18, "false", false]'

特殊处理

JSON.stringify([NaN, Infinity]); // '[null,null]');
JSON.stringify(undefined); // undefined
JSON.stringify({ x: [undefined, function () {}, Symbol("")] }); // '{"x":[null,null,null]}'
JSON.stringify([new Set([10]), new Map([[10, 20]])]); // '[{},{}]' 如使用可做处理,此处就不介绍了
JSON.stringify(new Date(1906, 0, 2, 15, 4, 5)); // '"1906-01-02T15:04:05.000Z"' 
JSON.stringify(/[1]/); // '{}'

更多示例请看MDN

指定函数使用 JSON.stringify(value,function(key,value){})

使用参数:(key,value)=>{} key,value分别代表对象的键和值

使用场景: 自定义返回数据

JSON.stringify({r: /abc/}, function(k, v){
    if(v instanceof RegExp){
        return v.toString(); // 特殊处理
    }
    return v; // 必须
});

指定数组使用 JSON.stringify(value,[])

使用场景: 取部分数据,筛选出被数组包含的属性名

const data = {
  sex: 1,
  age: "18",
  time: 7,
};
JSON.stringify(data, ["age"]); // '{ "age":18 }',

第三个参数space,基本不用,就不介绍了(偷懒🤔)

一、JSON.parse()

简单使用 JSON.parse(text)

text为有效的JSON字符串

使用示例

JSON.parse('{"age":18}'); // { age: 18 }
JSON.parse("true"); // true
JSON.parse('"foo"'); // "foo"
JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]
JSON.parse("null"); // null

指定函数使用 JSON.parse(text,function(key,value){})

使用参数:(key,value)=>{} key,value分别代表对象的键和值

使用场景: 自定义解析后的返回的数据

JSON.parse('{"p": 10}', function(k, v) {
  if (k === '') return v; 
  return v * 2;               
}); // { p: 20 }

文章很简单,总结是因为上次传正则丢失了,而网上的又讲原理讲用法,看着有点乱。

原理去理解一遍就可以了

更多的数据处理就没必要一一列举了,根据自己的情况再进行学习吧。