JSON.stringify()
JSON.stringify()
JSON.stringify()九大特性
第一个特性
对于undefined、任意的函数以及symbol三个特殊的值分别作为对象属性的值、数组元素、单独的值时JSON.stringify()将返回不同的结果。
const data = {
a: "aaa",
b: undefined,
c: Symbol("dd"),
fn: function() {
return true;
}
};
JSON.stringify(data); // 输出：？
// "{"a":"aaa"}"知识点：
undefined、任意的函数以及symbol作为对象属性值时JSON.stringify()将跳过（忽略）对它们进行序列化。
追问：假如undefined、任意的函数以及symbol作为数组元素会怎么样？
JSON.stringify(["aaa", undefined, function aa() {
return true
}, Symbol('dd')]) // 输出：？
// "["aaa",null,null,null]"知识点：
undefined、任意的函数以及symbol作为数组元素时，JSON.stringify()会将它们序列化返回null。
追问：单独序列化这些值是什么结果？
JSON.stringify(function a (){console.log('a')})
// undefined
JSON.stringify(undefined)
// undefined
JSON.stringify(Symbol('dd'))
// undefined知识点：
undefined、任意的函数以及symbol被JSON.stringify()作为单独的值进行序列化时都会返回undefined。
总结：
undefined、任意的函数以及symbol作为对象属性值时JSON.stringify()将跳过（忽略）对它们进行序列化。undefined、任意的函数以及symbol作为数组元素时，JSON.stringify()会将它们序列化返回null。undefined、任意的函数以及symbol被JSON.stringify()作为单独的值进行序列化时都会返回undefined。
第二大特性
注意： 非数组对象的属性不能保证以特定的顺序出现在序列化后的字符串中。
const data = {
a: "aaa",
b: undefined,
c: Symbol("dd"),
fn: function() {
return true;
},
d: "ddd"
};
JSON.stringify(data); // 输出：？
// "{"a":"aaa","d":"ddd"}"
JSON.stringify(["aaa", undefined, function aa() {
return true
}, Symbol('dd'),"eee"]) // 输出：？
// "["aaa",null,null,null,"eee"]"正如我们在第一特性所说，JSON.stringify()序列化时会忽略一些特殊的值，所以不能保证序列化后的字符串还是以特定的顺序出现（数组除外）。
第三大特性
- 转换值如果有
toJSON()函数，该函数返回什么值，序列化结果就是什么值，并且忽略其他属性的值。
JSON.stringify({
say: "hello JSON.stringify",
toJSON: function() {
return "today i learn";
}
})
// "today i learn"第四大特性
- JSON.stringify() 将会正常序列化 Date 的值。
JSON.stringify({ now: new Date() });
// "{"now":"2019-12-08T07:42:11.973Z"}"实际上Date对象自己部署了toJSON()方法（同Date.toISOString()），因此Date对象会被当做字符串处理。
第五大特性
NaN 和 Infinity 格式的数值及 null 都会被当做 null。
JSON.stringify(NaN)
// "null"
JSON.stringify(null)
// "null"
JSON.stringify(Infinity)
// "null"第六大特性
- 布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值，跟Date一样。
JSON.stringify([new Number(1), new String("false"), new Boolean(false)]);
// "[1,"false",false]"第七大特性
- 其他类型的对象，包括
Map/Set/WeakMap/WeakSet，仅会序列化可枚举的属性。
// 不可枚举的属性默认会被忽略：
JSON.stringify(
Object.create(
null,
{
x: { value: 'json', enumerable: false },
y: { value: 'stringify', enumerable: true }
}
)
);
// "{"y":"stringify"}"第八大特性
我们都知道实现深拷贝最简单粗暴的方式就是序列化：JSON.parse(JSON.stringify())，这个方式实现深拷贝会因为序列化的诸多特性从而导致诸多的坑点：比如现在我们要说的循环引用问题。
// 对包含循环引用的对象（对象之间相互引用，形成无限循环）执行此方法，会抛出错误。
const obj = {
name: "loopObj"
};
const loopObj = {
obj
};
// 对象之间形成循环引用，形成闭环
obj.loopObj = loopObj;
// 封装一个深拷贝的函数
function deepClone(obj) {
return JSON.parse(JSON.stringify(obj));
}
// 执行深拷贝，抛出错误
deepClone(obj)
/**
VM44:9 Uncaught TypeError: Converting circular structure to JSON
--> starting at object with constructor 'Object'
| property 'loopObj' -> object with constructor 'Object'
--- property 'obj' closes the circle
at JSON.stringify (<anonymous>)
at deepClone (<anonymous>:9:26)
at <anonymous>:11:13
*/- 对包含循环引用的对象（对象之间相互引用，形成无限循环）执行此方法，会抛出错误。
这也就是为什么用序列化去实现深拷贝时，遇到循环引用的对象会抛出错误的原因。
第九大特性
- 所有以 symbol 为属性键的属性都会被完全忽略掉，即便 replacer 参数中强制指定包含了它们。
JSON.stringify({ [Symbol.for("json")]: "stringify" }, function(k, v) {
if (typeof k === "symbol") {
return v;
}
})
// undefined第二个参数和第三个参数
replacer
replacer参数有两种形式，可以是一个函数或者一个数组。作为函数时，它有两个参数，键（key）和值（value），函数类似就是数组方法map、filter等方法的回调函数，对每一个属性值都会执行一次该函数。如果replacer是一个数组，数组的值代表将被序列化成JSON字符串的属性名。
- 函数：
const data = {
a: "aaa",
b: undefined,
c: Symbol("dd"),
fn: function() {
return true;
}
};
// 不用 replacer 参数时
JSON.stringify(data);
// "{"a":"aaa"}"
// 使用 replacer 参数作为函数时
JSON.stringify(data, (key, value) => {
switch (true) {
case typeof value === "undefined":
return "undefined";
case typeof value === "symbol":
return value.toString();
case typeof value === "function":
return value.toString();
default:
break;
}
return value;
})
// "{"a":"aaa","b":"undefined","c":"Symbol(dd)","fn":"function() {\n return true;\n }"}"- 数组：
const jsonObj = {
name: "JSON.stringify",
params: "obj,replacer,space"
};
// 只保留 params 属性的值
JSON.stringify(jsonObj, ["params"]);
// "{"params":"obj,replacer,space"}"space
space参数用来控制结果字符串里面的间距。首先看一个例子就是到这东西到底是干啥用的：
const tiedan = {
name: "弹铁蛋同学",
describe: "今天在学 JSON.stringify()",
emotion: "like shit"
};
JSON.stringify(tiedan, null, "?");
// 接下来是输出结果
// "{
// ?"name": "弹铁蛋同学",
// ?"describe": "今天在学 JSON.stringify()",
// ?"emotion": "like shit"
// }"
JSON.stringify(tiedan, null, 2);
// "{
// "name": "弹铁蛋同学",
// "describe": "今天在学 JSON.stringify()",
// "emotion": "like shit"
// }"上面代码一眼就能看出第三个参数的作用了，花里胡哨的，其实这个参数还是比较鸡肋的，除了好看没啥特别的用处。我们用\t、\n等缩进能让输出更加格式化，更适于观看。
- 如果是一个数字, 则在字符串化时每一级别会比上一级别缩进多这个数字值的空格（最多10个空格）；
- 如果是一个字符串，则每一级别会比上一级别多缩进该字符串（或该字符串的前10个字符）。