手写JSON.Stringify()
JSON 对象包含两个方法：一是用于解析成 JSON 对象的 parse()；二是用于将对象转换为 JSON 字符串方法的 stringify()
1. JSON.parse()
JSON.parse 方法用来解析 JSON 字符串，构造由字符串描述的 JavaScript 值或对象。该方法有两个参数：第一个参数是需要解析处理的 JSON 字符串，第二个参数是可选参数提供可选的 reviver 函数，用在返回之前对所得到的对象执行变换操作。
该方法的语法为：JSON.parse(text[, reviver])
下面通过一段代码来看看这个方法以及 reviver 参数的用法，如下所示。
const json = '{"result":true, "count":2}';
const obj = JSON.parse(json);
console.log(obj.count);
// 2
console.log(obj.result);
// true
/* 带第二个参数的情况 */
JSON.parse('{"p": 5}', function (k, v) {
if(k === '') return v; // 如果k不是空，
return v * 2; // 就将属性值变为原来的2倍返回
}); // { p: 10 }
上面的代码说明了，我们可以将一个符合 JSON 格式的字符串转化成对象返回；带第二个参数的情况，可以将待处理的字符串进行一定的操作处理，比如上面这个例子就是将属性值乘以 2 进行返回
2.JSON.Stringify()
ON.stringify 方法是将一个 JavaScript 对象或值转换为 JSON 字符串，默认该方法其实有三个参数：第一个参数是必选，后面两个是可选参数非必选。第一个参数传入的是要转换的对象；第二个是一个 replacer 函数，比如指定的 replacer 是数组，则可选择性地仅处理包含数组指定的属性；第三个参数用来控制结果字符串里面的间距，后面两个参数整体用得比较少。
该方法的语法为：JSON.stringify(value[, replacer [, space]])
下面我们通过一段代码来看看后面几个参数的妙用，如下所示
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}"
从上面的代码中可以看到，增加第二个参数 replacer 带来的变化：通过替换方法把对象中的属性为字符串的过滤掉，在 stringify 之后返回的仅为数字的属性变成字符串之后的结果；当第三个参数传入的是多个空格的时候，则会增加结果字符串里面的间距数量，从最后一段代码中可以看到结果
3. 如何自己手动实现
3.1 分析各种数据类型及边界情况
分析有哪些数据类型传入，传入了之后会有什么返回，通过分析的结果我们之后才能更好地实现编码。大致的分析汇总如下表所示（可参考 MDN 文档）。
JSON.stringify()将值转换为相应的 JSON 格式：
- 转换值如果有 toJSON() 方法，该方法定义什么值将被序列化。
- 非数组对象的属性不能保证以特定的顺序出现在序列化后的字符串中。
- 布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值。
undefined、任意的函数以及 symbol 值，在序列化过程中会被忽略（出现在非数组对象的属性值中时）或者被转换成null（出现在数组中时）。函数、undefined 被单独转换时，会返回 undefined，如JSON.stringify(function(){})orJSON.stringify(undefined).- 对包含循环引用的对象（对象之间相互引用，形成无限循环）执行此方法，会抛出错误。
- 所有以 symbol 为属性键的属性都会被完全忽略掉，即便
replacer参数中强制指定包含了它们。 - Date 日期调用了 toJSON() 将其转换为了 string 字符串（同 Date.toISOString()），因此会被当做字符串处理。
- NaN 和 Infinity 格式的数值及 null 都会被当做 null。
- 其他类型的对象，包括 Map/Set/WeakMap/WeakSet，仅会序列化可枚举的属性。
3.2 代码逻辑实现
3.2.1 循环引用判断
function hasLoop(obj) {
// 判断对象内部是否有和源相同的属性
function findLoop(target, src) {
// 源数组，并将自身传入 src.slice().concat([target])
const source = src.concat([target])
for (const key in target) {
// 如果是对象才需要判断
if (typeof target[key] === 'object') {
// 如果在源数组中找到 || 递归查找内部属性找到相同
if (source.indexOf(target[key]) > -1 || findLoop(target[key], source)) {
return true
}
}
}
return false
}
// 如果传入值是对象，则执行判断，否则返回false
return typeof obj === 'object' ? findLoop(obj, []) : false
}
//--------------------------验证--------------------------------------
var objA = {}; var objB = {}; objA.prop = objB; objB.prop = objA;
3.2.2 JSON.stringify()实现
function jsonStringify(data) {
let type = typeof data
switch (type) {
case 'undefined':
return undefined
case 'boolean':
return String(data)
case 'number':
return [NaN, Infinity].includes(data) ? 'null' : String(data)
case 'symbol':
return undefined
case 'string':
return `"${data}"`
case 'function':
return undefined
case 'object':
if (data === null) {
return String(data)
} else if (data.toJSON && typeof data.toJSON === 'function') {
return jsonStringify(data.toJSON())
} else if (data instanceof Array) {
let result = []
data.map((item, index) => {
if (['undefined', 'function', 'symbol'].includes(typeof data)) {
result[index] = 'null'
} else {
result[index] = jsonStringify(item)
}
})
result = `[${result}]`
return result.replace(/'/g, '"')
} else if (hasLoop(data)) {
throw new TypeError("Converting circular structure to JSON");
} else {
let result = []
for (const key in data) {
if (data[key] !== undefined && !['function', 'symbol'].includes(typeof data[key])) {
result.push('"' + key + '"' + ":" + jsonStringify(data[key]));
}
}
return ("{" + result + "}").replace(/'/g, '"')
}
}
}
3.3 实现效果测试
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
2. 手写JSON.parse()
function jsonParse(opt) {
return eval('(' + opt + ')');
}
jsonParse(jsonStringify({x : 5}))
// Object { x: 5}
jsonParse(jsonStringify([1, "false", false]))
// [1, "false", falsr]
jsonParse(jsonStringify({b: undefined}))
