前面两节我给大家讲解了js数据类型的相关知识，想夯实自身 js 的编程基础，通过实践来实现一些 JS API 方法，是非常有必要的，所以本篇文章我就来帮你搞懂它：手工实现JSON.stringify()方法。

JSON.stringify基本介绍

要实现它，我们先来看看JSON.stringify()方法具体是干嘛的，以及对不同边界情况的处理方式。

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

具体语法为：JSON.stringify(value[, replacer [, space]])

下面通过代码我们来看看后面两个参数的妙用：

JSON.stringify({ a: 1, b: 2 });
// "{"a":1,"b":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 = {browser: "Chrome", model: "box", week: 1, transport: "car", month: 8};
var jsonString = JSON.stringify(foo, replacer);
console.log(jsonString);
// "{"week":1,"month":8}"
/* 第三个参数的例子 */
JSON.stringify({ a: 2 }, null, " ");
/* "{
 "a": 2
}"*/
JSON.stringify({ a: 2 }, null, "");
// "{"a":2}"

从上面的代码中可以看到，增加第二个参数 replacer 带来的变化：通过替换方法把对象中的属性为字符串的过滤掉，在 stringify 之后返回的仅为数字的属性变成字符串之后的结果；当第三个参数传入的是多个空格的时候，则会增加结果字符串里面的间距数量，从最后一段代码中可以看到结果。

下面我们再看下 JSON.stringify 的内部针对各种数据类型的转换方式。

我们来分析一下都有哪些数据类型传入，传入了之后会有什么返回，通过分析的结果我们之后才能更好地实现编码。大致的分析汇总如下表所示（可参考 MDN 文档）。

JSON.stringify	输入	输出
基础类型	undefined	undefined
	boolean	'false'/'true'
	number	字符串类型的数值
	symbol	undefined
	null	'null'
	string	string
	NaN 和 Infinity	'null'
引用类型	object	1. 如果对象有toJSON()方法，那么序列化toJSON()的返回值；2. 如果对象属性值中出现了undefined、函数和symbol值，则忽略；3. 所有以symbol为key的属性都会被忽略
	function	undefined
	Date	Date的toJSON()字符串值
	RegExp	'{}'
	array(包含了undefined，function，symbol)	返回字符串，其中undefined、function、symbol类型值均变为null

上面这个表中，基本整理出了各种数据类型通过 JSON.stringify 这个方法之后返回对应的值，但是还有一个特殊情况需要注意：对于包含循环引用的对象执行此方法，会抛出错误。

那么根据上面梳理的这个表格，我们来一起看下代码怎么编写吧。

手工实现`JSON.stringify()`方法

我们先利用 typeof 把基础数据类型和引用数据类型分开，分开之后再根据不同情况来分别处理不同的情况，按照这个逻辑代码实现如下：

function jsonStringify(data) {
    let type = typeof data;
    if(type !== 'object') { // 基础类型和function处理
        let result = data;
        if (Number.isNaN(data) || data === Infinity || 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"
        } 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, '"');
        }
    }
}

手工实现一个 JSON.stringify 方法的基本代码如上面所示，有几个问题你还是需要注意一下：

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

整体来说这段代码还是比较复杂的，如果在面试过程中让你当场手写，其实整体还是需要考虑很多东西的。当然上面的代码根据每个人的思路不同，你也可以写出自己认为更优的代码，这些可以根据自己情况而定。

上面的这个方法已经实现了，那么用起来会不会有问题呢？我们就用上面的代码，来进行一些用例的检测：

let foo = null;
console.log(jsonStringify(foo) === JSON.stringify(foo));
// true
let bar = undefined;
console.log(jsonStringify(bar) === JSON.stringify(bar));
// 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(),
    id: 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

通过上面这些测试的例子可以发现，我们自己实现的 jsonStringify 方法基本和 JSON.stringify 转换之后的结果是一样的，不难看出 jsonStringify 基本满足了预期结果。

重学JavaScript之实现JSON.stringify()方法

JSON.stringify基本介绍

手工实现JSON.stringify()方法

手工实现`JSON.stringify()`方法