Javascript的JSON.stringify()知多少?

·  阅读 917
Javascript的JSON.stringify()知多少?

写在前面

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

JSON.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"
}
*/
复制代码

整理归纳:

JSON.stringify输入输出
基础数据类型stringstring
number字符串类型的字符串
boolean"true"/"false"
undefinedundefined
null"null"
NaN和Infinity"null"
symbolundefined
BigInt报错
引用数据类型functionundefined
Array数组中出现了function、undefined、symbolstring/"null"
regExp"{}"
DateDate的toJSON()字符串
普通object
  • 如果有toJSON()方法,那么序列化toJSON()的返回值
  • 如果属性值中出现了function、undefined、symbol则忽略
  • 所有以symbol为属性键的属性都会被完全忽略掉

|

手撕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, '"')
    }
  }
}
复制代码

参考文章

写在最后

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

分类:
前端
分类:
前端
收藏成功!
已添加到「」, 点击更改