JSON.Stringify

JSON.stringify 是日常开发中经常用到的 JSON 对象中的一个方法，JSON 对象包含两个方法：一是用于解析成 JSON 对象的 parse()；二是用于将对象转换为 JSON 字符串方法的 stringify()

JSON.parse
【参考链接： https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse】

JSON.parse() 方法用来解析JSON字符串，构造由字符串描述的JavaScript值或对象。提供可选的 reviver 函数用以在返回之前对所得到的对象执行变换(操作)。

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

JSON.stringify
【参考链接：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify】

JSON.stringify 方法是将一个 JavaScript 对象或值转换为 JSON 字符串，默认该方法其实有三个参数：第一个参数是必选，后面两个是可选参数非必选。第一个参数传入的是要转换的对象；第二个是一个 replacer 函数，比如指定的 replacer 是数组，则可选择性地仅处理包含数组指定的属性；第三个参数用来控制结果字符串里面的间距，后面两个参数整体用得比较少。

JSON.stringify({ x: 1, y: 2 });
// "{"x":1,"y":2}"
JSON.stringify({ x: [10, undefined, function(){}, Symbol('')] })
// "{"x":[10,null,null,null]}"
/* 第二个参数的例子 */
function replacer(key, value) {if (typeof value === "string") {return undefined;}return value;
}
var foo = {foundation: "Mozilla", model: "box", week: 4, transport: "car", month: 7};
var jsonString = JSON.stringify(foo, replacer);
console.log(jsonString);
// "{"week":4,"month":7}"
/* 第三个参数的例子 */
JSON.stringify({ a: 2 }, null, " ");
/* "{"a": 2
}"*/
JSON.stringify({ a: 2 }, null, "");
// "{"a":2}"

手动实现一个JSON.Stringify

function jsonStringify(data) {let type = typeof data;if(type !== 'object') {let result = data;//data 可能是基础数据类型的情况在这里处理if (Number.isNaN(data) || data === Infinity) {//NaN 和 Infinity 序列化返回 "null"result = "null";} else if (type === 'function' || type === 'undefined' || type === 'symbol') {// 由于 function 序列化返回 undefined，因此和 undefined、symbol 一起处理return undefined;} else if (type === 'string') {result = '"' + data + '"';}return String(result);} else if (type === 'object') {if (data === null) {return "null"  // 第01讲有讲过 typeof null 为'object'的特殊情况} else if (data.toJSON && typeof data.toJSON === 'function') {return jsonStringify(data.toJSON());} else if (data instanceof Array) {let result = [];//如果是数组，那么数组里面的每一项类型又有可能是多样的data.forEach((item, index) => {if (typeof item === 'undefined' || typeof item === 'function' || typeof item === 'symbol') {result[index] = "null";} else {result[index] = jsonStringify(item);}});result = "[" + result + "]";return result.replace(/'/g, '"');} else {// 处理普通对象let result = [];Object.keys(data).forEach((item, index) => {if (typeof item !== 'symbol') {//key 如果是 symbol 对象，忽略if (data[item] !== undefined && typeof data[item] !== 'function' && typeof data[item] !== 'symbol') {//键值如果是 undefined、function、symbol 为属性值，忽略result.push('"' + item + '"' + ":" + jsonStringify(data[item]));}}});return ("{" + result + "}").replace(/'/g, '"');}}
}

测试：

let nl = null;
console.log(jsonStringify(nl) === JSON.stringify(nl));
// true
let und = undefined;
console.log(jsonStringify(undefined) === JSON.stringify(undefined));
// true
let boo = false;
console.log(jsonStringify(boo) === JSON.stringify(boo));
// true
let nan = NaN;
console.log(jsonStringify(nan) === JSON.stringify(nan));
// true
let inf = Infinity;
console.log(jsonStringify(Infinity) === JSON.stringify(Infinity));
// true
let str = "jack";
console.log(jsonStringify(str) === JSON.stringify(str));
// true
let reg = new RegExp("\w");
console.log(jsonStringify(reg) === JSON.stringify(reg));
// true
let date = new Date();
console.log(jsonStringify(date) === JSON.stringify(date));
// true
let sym = Symbol(1);
console.log(jsonStringify(sym) === JSON.stringify(sym));
// true
let array = [1,2,3];
console.log(jsonStringify(array) === JSON.stringify(array));
// true
let obj = {name: 'jack',age: 18,attr: ['coding', 123],date: new Date(),uni: Symbol(2),sayHi: function() {console.log("hi")},info: {sister: 'lily',age: 16,intro: {money: undefined,job: null}}
}
console.log(jsonStringify(obj) === JSON.stringify(obj));
// true

注：

由于 function 返回 ‘null’，并且 typeof function 能直接返回精确的判断，故在整体逻辑处理基础数据类型的时候，会随着 undefined，symbol 直接处理了；
由于 typeof null 的时候返回’object’，故 null 的判断逻辑整体在处理引用数据类型的逻辑里面；
关于引用数据类型中的数组，由于数组的每一项的数据类型又有很多的可能性，故在处理数组过程中又将 undefined，symbol，function 作为数组其中一项的情况做了特殊处理；
同样在最后处理普通对象的时候，key （键值）也存在和数组一样的问题，故又需要再针对上面这几种情况（undefined，symbol，function）做特殊处理；
最后在处理普通对象过程中，对于循环引用的问题暂未做检测，如果是有循环引用的情况，需要抛出 Error；
根据官方给出的 JSON.stringify 的第二个以及第三个参数的实现，本段模拟实现的代码并未实现

JSON.Stringify相关推荐

JSON.stringify()
写在前边不言而喻,JSON.stringify() 是用来将合法的JSON数据字符串化的!然而在正常的工作中我们用到的只是最基础的功能:今天我们就探索不一样的JSON.stringify(). 基础 ...
json.parse()和json.stringify()
json.parse() 用于从一个字符串解析出json对象 var str = '{"name":"huangzhong","age":& ...
JSON.stringify报cyclic object value错误
这是一个典型的循环引用的错误,一个对象里引用自己就会立刻得到这个错误: obj = { x:555, y: "hi" }; obj.myself = obj;try{json = ...
(转)JS之——解决IE6、7、8使用JSON.stringify报JSON未定义错误的问题
https://blog.csdn.net/l1028386804/article/details/53439755 在通过JavaScript将对象类型的参数通过JSON.stringify转换成字 ...
ajax 时间格式string,ajax 数据请求：json格式在浏览器变成了string ，使用JSON.stringify(params)方法...
var params = { md5str: "sf", datastr: "sf", } var ajaxRequest = $.ajax({ url: ur ...
理解JSON对象：JSON.parse、 JSON.stringify
何时是JSON,何时不是JSON? JSON就是一个有特殊规则的字符串,按照这个规则我们就可以把这个字符串解析成JS对象. JSON是设计成描述数据交换格式的,他也有自己的语法,这个语法是JavaSc ...
js中JSON.stringify用于自定义的类
参考:http://stackoverflow.com/questions/7356694/how-to-json-stringify-a-user-defined-class-in-javascri ...
理解JSON.stringify()高级用法
一:JSON.stringify() 该方法是把javascript对象转换成json字符串. 基本语法:JSON.stringify(value, [, replacer], [, space]) ...
JSON.stringify()和JSON.parse()分别是什么
JSON.stringify() 从一个对象中解析出字符串 JSON.stringify({"a":"1","b":"2" ...
javascript 数组和对象的浅复制和深度复制 assign/slice/concat/JSON.parse(JSON.stringify())...
javascript 数组和对象的浅度复制和深度复制在平常我们用 '='来用一个变量引用一个数组或对象,这里是'引用'而不是复制下面我们看一个例子引用和复制是什么概念 var arr=[1,2,3, ...

JSON.Stringify

JSON.Stringify相关推荐

最新文章

热门文章