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

者： 一川 来源：前端万有引力

1写在前面

前几天看到前端胖头鱼的一篇文章《就因为JSON.stringify，我的年终奖差点打水漂了》，讲的就是JSON.stringify在工程开发中的应用，线上用户不能提交表单。因为字段中经过JSON.stringify后的字符串对象缺少value key，导致后端parse之后无法正确读取value值，进而报接口系统异常，用户无法进行下一步动作。本篇文章就将详细谈谈JSON.stringify，并将带着你进行自己手写一个JSON.stringify，站在全局考察自己对于各种数据类型理解的深度，和各种极端的边界情况的处理能力。

2JSON.stringify()

JSON.stringify是日常开发中经常用到的JSON对象中的一个方法，用于将一个 JavaScript 对象或值转换为 JSON 字符串，如果指定了一个 replacer 函数，则可以选择性地替换值，或者指定的 replacer 是数组，则可选择性地仅包含数组指定的属性。

简而言之，就是用于将对象转换成JSON字符串。

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

• value：必填参数，需要序列化的JSON对象。
• replacer：可选参数。
• 函数类型：则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理;
• 数组类型：则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中;
• null或未提供：则对象所有的属性都会被序列化。
• space：可选参数，用来控制字符串之间的间距。
• 指定缩进用的空白字符串，用于美化输出(pretty-print);
• 数字类型，它代表有多少的空格;上限为10。小于1，意味着没有空格;
• 字符串类型，当字符串长度超过10个字母，取其前10个字母，该字符串将被作为空格;
• null或未提供，将没有空格。

注意：

• 循环引用的对象(对象之间相互引用，形成无限循环)执行此方法，会抛出错误。
• 布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值。
• undefined、任意的函数以及symbol值，在序列化过程中会被忽略(出现在非数组对象的属性值中时)或者被转换成 null(出现在数组中时)。函数、undefined被单独转换时，会返回 undefined，如JSON.stringify(function(){}) or JSON.stringify(undefined)。这就是为什么对象中有这些类型的属性，不能使用JSON.parse(JSON.stringify())来进行深拷贝。
• Date 日期调用了 toJSON() 将其转换为了 string 字符串(同Date.toISOString())，因此会被当做字符串处理。
• NaN 和 Infinity 格式的数值及 null 都会被当做 null。
• 其他类型的对象，包括 Map/Set/WeakMap/WeakSet，仅会序列化可枚举的属性。

const user={name:"yichuan",age:18,university:"SCU"}; 
//1.序列化对象 
console.log(JSON.stringify(user));//'{"name":"yichuan","age":18,"university":"SCU"}' 
 
//2.序列化基础数据类型 
console.log(JSON.stringify("平"));//"平" 
console.log(JSON.stringify(18));//"18" 
console.log(JSON.stringify(true));//"true" 
console.log(JSON.stringify(null));//"null" 
console.log(JSON.stringify(undefined));//undefined 
 
//3.使用replacer函数 
console.log(JSON.stringify(user,function(key,value){ 
   return typeof value==="number" ? 666 : "sixsixsix"; 
}));//'{name:"sixsixsix",age:666,university:"sixsixsix"}' 
 
//4.指定数组 
console.log(JSON.stringify(user,["name"]));//'{"name":"yichuan"}' 
 
//5.指定字符串间的间距 
console.log(JSON.stringify(user,null,2)); 
/* 
{ 
  "name": "yichuan", 
  "age": 18, 
  "university": "SCU" 
} 
*/ 
 
//6.指定字符串的间距”*“ 
console.log(JSON.stringify(user,null,"*****")); 
/* 
{ 
*****"name": "yichuan", 
*****"age": 18, 
*****"university": "SCU" 
} 
*/ 

整理归纳：

| | | regExp | "{}" | | | Date | Date的toJSON()字符串 | | | 普通object |

• 如果有toJSON()方法，那么序列化toJSON()的返回值
• 如果属性值中出现了function、undefined、symbol则忽略
• 所有以symbol为属性键的属性都会被完全忽略掉 |

3手撕JSON.stringify()

其实现场手撕代码还是有点麻烦的，需要考虑到对各种类型的数据进行处理，考虑各种边界情况。

function stringify(data){ 
 const type=typeof data; 
  //可能为基础数据类型的处理 
  if(type !=="object"){ 
   //判断是否为NaN或Infinity或者null 
    if(Number.isNaN(data)||data===Infinity){ 
     return "null"; 
    } 
    //判断可能为function、undefined、symbol类型 
    if(type==="function" || type==="undefined" || type==="symbol" ){ 
     return undefined 
    } 
    //判断字符串或数值的处理 
    if(type==="string" || type==="number"){ 
     return `"${data}"` 
    } 
    if (typeof data==='bigint') { 
      throw new TypeError('Do not know how to serialize a BigInt') 
    } 
    if (isCyclic(data)) { 
      throw new TypeError('Converting circular structure to JSON') 
    } 
    return String(data); 
  }else{ 
   //null 
    if(type==="null"){ 
     return "null" 
    }else if(data.toJSON && typeof data.toJSON==="function"){ 
      //递归 
     return stringify(data.toJSON); 
    }else if(Array.isArray(data)){ 
     const arr=[]; 
      //对于数组类型有很多种情况 
      data.forEach((item,index)=>{ 
       //判断可能为function、undefined、symbol类型 
        if(type==="function" || type==="undefined" || type==="symbol" ){ 
          arr[index]="null" 
        }else{ 
          arr[index]=stringify(item); 
        } 
      }); 
      result=`"${arr}"`; 
      return arr.result.replace(/'/g,""); 
    }else{ 
     //普通对象 
      const arr=[]; 
      //遍历对象 
      Object.keys(data).forEach((key)=>{ 
       //key如果是symbol类型，忽略 
        if(data[key]!=="symbol"){ 
          if(typeof data[key]!=="undefined" && typeof data[key]!=="function" && typeof data[key]!=="symbol"){ 
            arr.push(`"${key}":stringify(data[key])`); 
          } 
        } 
         
      }) 
      return `{${arr}}`.replace(/'/g, '"') 
    } 
  } 
} 

4参考文章

《MDN：JSON.stringify()》

《就因为JSON.stringify，我的年终奖差点打水漂了》

5写在最后

我们平时开发中将JSON.stringify应用最多的可能就是浅层的对象进行深拷贝，也就是进行序列化处理。但是当我们进行手撕代码的时候，需要考虑各种边界情况，这对于我们来说就比较麻烦，作为面试也是对数据类型的全面考察。

SON

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 字符串。