JSON

JSON的key具有唯一性

JSON.stringify()

概念

MDN 文档对它的解释如下：

The JSON.stringify() method converts a JavaScript object or value to a JSON string, optionally replacing values if a replacer function is specified or optionally including only the specified properties if a replacer array is specified.

翻译过来大概是：

JSON.stringify() 方法将 JavaScript 对象或值转换为 JSON 字符串，如果指定了替换函数，则可选地替换值，或者如果指定了替换器数组，则可选地仅包括指定的属性。

基础语法

JSON.stringify(value[, replacer [, space]])

// 句法
JSON.stringify(value)
JSON.stringify(value, replacer)
JSON.stringify(value, replacer, space)

第一个参数 value (必需的)

要转换为 JSON 字符串的值。

特性一

value 可以是一个Object、Array、null、Number、String、Boolean，并将值转换为 JSON 字符串。

console.log(JSON.stringify({ x: 5, y: 6 }));
// expected output: "{"x":5,"y":6}"

console.log(JSON.stringify([new Number(3), new String('false'), new Boolean(false)]));
// expected output: "[3,"false",false]"

console.log(JSON.stringify({ x: [10, undefined, function(){}, Symbol('')] }));
// expected output: "{"x":[10,null,null,null]}"

console.log(JSON.stringify(new Date(2006, 0, 2, 15, 4, 5)));
// expected output: ""2006-01-02T15:04:05.000Z""




JSON.stringify({});                    // '{}'
JSON.stringify(true);                  // 'true'
JSON.stringify('foo');                 // '"foo"'
JSON.stringify([1, 'false', false]);   // '[1,"false",false]'
JSON.stringify([NaN, null, Infinity]); // '[null,null,null]'
JSON.stringify({ x: 5 });              // '{"x":5}'

JSON.stringify(new Date(2006, 0, 2, 15, 4, 5));
// '"2006-01-02T15:04:05.000Z"'

JSON.stringify({ x: 5, y: 6 });
// '{"x":5,"y":6}'
JSON.stringify([new Number(3), new String('false'), new Boolean(false)]);
// '[3,"false",false]'

// String-keyed array elements are not enumerable and make no sense in JSON
let a = ['foo', 'bar'];
a['baz'] = 'quux';      // a: [ 0: 'foo', 1: 'bar', baz: 'quux' ]
JSON.stringify(a);
// '["foo","bar"]'

JSON.stringify({ x: [10, undefined, function() {}, Symbol('')] });
// '{"x":[10,null,null,null]}'

// Standard data structures
JSON.stringify([new Set([1]), new Map([[1, 2]]), new WeakSet([{a: 1}]), new WeakMap([[{a: 1}, 2]])]);
// '[{},{},{},{}]'

// TypedArray
JSON.stringify([new Int8Array([1]), new Int16Array([1]), new Int32Array([1])]);
// '[{"0":1},{"0":1},{"0":1}]'
JSON.stringify([new Uint8Array([1]), new Uint8ClampedArray([1]), new Uint16Array([1]), new Uint32Array([1])]);
// '[{"0":1},{"0":1},{"0":1},{"0":1}]'
JSON.stringify([new Float32Array([1]), new Float64Array([1])]);
// '[{"0":1},{"0":1}]'

// toJSON()
JSON.stringify({ x: 5, y: 6, toJSON(){ return this.x + this.y; } });
// '11'

// Symbols:
JSON.stringify({ x: undefined, y: Object, z: Symbol('') });
// '{}'
JSON.stringify({ [Symbol('foo')]: 'foo' });
// '{}'
JSON.stringify({ [Symbol.for('foo')]: 'foo' }, [Symbol.for('foo')]);
// '{}'
JSON.stringify({ [Symbol.for('foo')]: 'foo' }, function(k, v) {
  if (typeof k === 'symbol') {
    return 'a symbol';
  }
});
// undefined

// Non-enumerable properties:
JSON.stringify( Object.create(null, { x: { value: 'x', enumerable: false }, y: { value: 'y', enumerable: true } }) );
// '{"y":"y"}'

// BigInt values throw
JSON.stringify({x: 2n});
// TypeError: BigInt value can't be serialized in JSON




JSON.stringify({"name":"kevin"});  // '{"name":"kevin"}'

JSON.stringify('{"name":"kevin"}'); // '"{\\\\"name\\\\":\\\\"kevin\\\\"}"'

JSON.stringify([{"name":"kevin"}]);  // '[{"name":"kevin"}]'

JSON.stringify('[{"name":"kevin"}]'); // '"[{\\\\"name\\\\":\\\\"kevin\\\\"}]"'

JSON.stringify('kevin'); // '"kevin"'

JSON.stringify('1');  // '"1"'

JSON.stringify(1); // '1'

JSON.stringify(0); // '0'

JSON.stringify('true'); // '"true"'

JSON.stringify(true); // 'true'

JSON.stringify('null'); // '"null"'

JSON.stringify("null"); // '"null"'

JSON.stringify(null); // 'null'

JSON.stringify(NaN); // 'null'

JSON.stringify(Infinity); // 'null'

JSON.stringify(undefined); // undefined

特性二

undefined 、任意的函数以及 symbol 分别作为对象属性的值时，JSON.stringify() 将跳过（忽略）对它们进行序列化。

const data = {a: 'aa', b: undefined, c: Symbol('dd'), fn: function(){return true;}};
console.log(JSON.stringify(data)); // {"a":"aa"}

undefined 、任意的函数以及 symbol 分别作为数组元素的值时，JSON.stringify() 会将它们序列化为 null。

const data = ['aa', undefined, Symbol('dd'), function(){return true;}];
console.log(JSON.stringify(data)); // ["aa",null,null,null]

undefined 、任意的函数以及 symbol 分别作为单独的值时，JSON.stringify() 会将它们序列化为 undefined。

JSON.stringify(function a (){console.log('a')})
// undefined
JSON.stringify(undefined)
// undefined
JSON.stringify(Symbol('dd'))
// undefined

特性三

因为 JSON.stringify() 序列化是会忽略一些特殊的值，所以非数组对象的属性不能保证序列化后的字符串还是以特定的顺序出现（数组除外）。

const data = {a: 'aa', b: undefined, c: Symbol('dd'), fn: function(){return true;}};
console.log(JSON.stringify(data)); // {"a":"aa"}

const data = ['aa', undefined, Symbol('dd'), function(){return true;}];
console.log(JSON.stringify(data)); // ["aa",null,null,null]

特性四

如果转换的值中有 toJSON() 函数，该函数返回什么值，序列化结果就是什么值，并且忽略其它属性的值。

const data = JSON.stringify({
  say: "hello JSON.stringify",
  toJSON: function() {
    return 'today i learn';
  }
})
console.log(data); // "\\"today i learn\\""

特性五

NaN、null、以及 Infinity 都会被当做 null。

console.log(JSON.stringify(null));       // 'null'
console.log(JSON.stringify(NaN));        // 'null'
console.log(JSON.stringify(Infinity));   // 'null'

console.log(JSON.stringify([null]));     // '[null]'
console.log(JSON.stringify([NaN]));      // '[null]'
console.log(JSON.stringify([Infinity])); // '[null]'

console.log(JSON.stringify({
  name: null,
  age: Infinity,
  walk: NaN
}));
// {"name":null,"age":null,"walk":null}

特性六

布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值。

const data = JSON.stringify([new Number(1), new String("false"), new Boolean(false)]);
console.log(data); // '[1,"false",false]'

特性七

其他类型的对象，包括 Map/Set/WeakMap/WeakSet，仅会序列化可枚举的属性。

// 不可枚举的属性默认会被忽略：
const data = JSON.stringify(
  Object.create(
    null,
    {
      x: { value: 'json', enumerable: false },
      y: { value: 'stringify', enumerable: true }
    }
  )
);
console.log(data); // "{"y":"stringify"}"

特性八

JSON.parse(JSON.stringify()) 可实现简单的深拷贝。

const a = {name: 'kevin', age: 20};
const b = a;
console.log(a === b); // true

const a = {name: 'kevin', age: 20};
const b = JSON.parse(JSON.stringify(a));
console.log(a === b); // false
console.log(a == b);  // false

特性九

所有以 symbol 为属性键的属性都会被完全忽略掉，即便 replacer 参数中强制指定包含了它们。

const data = JSON.stringify({ [Symbol.for("json")]: "stringify" }, function(k, v) {
  if (typeof k === "symbol") {
    return v;
  }
})
console.log(data); // undefined

特性十

JSON.stringify() 将会正常序列化 Date 的值。

JSON.stringify({ now: new Date() });
// '{"now":"2022-03-16T14:54:26.459Z"}'

特性十一

JSON.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)
/*
VM782: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:15)
    at <anonymous>:11:1
*/


const circularReference = {};
circularReference.myself = circularReference;
// Serializing circular references throws "TypeError: cyclic object value"
JSON.stringify(circularReference);
/*
Uncaught TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Object'
    --- property 'myself' closes the circle
    at JSON.stringify (<anonymous>)
    at <anonymous>:3:6
*/

特性十二

JSON.stringify 序列化 BigInt 时 会报错。

console.log(JSON.stringify(BigInt(1234567890123456)))
// TypeError: Do not know how to serialize a BigInt

第二个参数 replacer (可选的)

一个改变字符串化过程行为的函数，或者一个字符串数组或数字命名属性的值，应该包含在输出中。 如果 replacer 为 null 或未提供，则对象的所有属性都包含在生成的 JSON 字符串中。

特性一

replacer 作为函数时，我们可以打破第一参数的很多特性的限制。

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  }"}"
*/

特性二

replacer 作为数组时，数组里的值如果是对象有的属性名，就会被序列化成 JSON 字符串的属性名。否则会被序列化成空的 JSON 字符串。

const jsonObj = {
  name: "Kevin",
  params: "obj,replacer,space"
};
// 只保留 params 属性的值
JSON.stringify(jsonObj, ["params"]);
// "{"params":"obj,replacer,space"}"

// 序列化成空的 JSON 字符串
JSON.stringify(jsonObj, ["stringify"]);
// "{}"

特性三

replacer 为 null 或未提供或非特性一和非特性二时，则对象的所有属性都包含在生成的 JSON 字符串中。

const jsonObj = {
  name: "Kevin",
  params: "obj,replacer,space"
};
// 只保留 params 属性的值
JSON.stringify(jsonObj, undefined);
// "{"name":"Kevin","params":"obj,replacer,space"}"

第三个参数 space (可选的)

一个字符串或数字对象，用于在输出 JSON 字符串中插入空格（包括缩进、换行符等）以提高可读性。如果未提供此参数（或为空），则不使用空格。

特性一

如果这是一个数字，它表示用于缩进的空格字符的数量； 此数字上限为 10（如果更大，则该值仅为 10）。 小于 1 的值表示不应使用空格。

const data = {
  name: "Kevin",
  describe: "今天在学 JSON.stringify()"
};
JSON.stringify(data, null, 10)
/* 这里为易看，使用-代替空格演示
"{
----------"name": "Kevin",
----------"describe": "今天在学 JSON.stringify()"
}"
*/

特性二

如果这是一个字符串，则该字符串（或字符串的前 10 个字符，如果它比那个长）用作空格。

const data = {
  name: "Kevin",
  describe: "今天在学 JSON.stringify()"
};
JSON.stringify(data, null, "");
/*
{
"name": "Kevin",
"describe": "今天在学 JSON.stringify()"
}
*/

特性三

我们用 \\t、 \\n 等缩进能让输出更加格式化，更适于观看。

const data = {
  name: "Kevin",
  describe: "今天在学 JSON.stringify()"
};
JSON.stringify(data, null, "\\t\\t");
/*
"{
		"name": "Kevin",
		"describe": "今天在学 JSON.stringify()"
}"
*/

JSON.stringify(data, null, "\\n\\n");
/*
"{


"name": "Kevin",


"describe": "今天在学 JSON.stringify()"
}"
*/

返回值

表示给定值或未定义的 JSON 字符串。