，JSON（JavaScript Object Notation）：是一种轻量级的数据交互格式，基于 ECMAScript 的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。在JSON出现之前，常用XML来传递数据，XML是一种纯文本格式，适合在网络上交换数据。JSON 比 XML 更小、更快，更易解析，JavaScript原生支持JSON。

2，JSON语法结构：JSON数据由键值对组成，每个键值对之间用逗号分隔，整个数据以大括号 {} 包裹表示一个对象，或者以中括号 [] 包裹表示一个数组。基本语法结构为：

对象（Object）：{} 包裹，键对应的值之间使用冒号，健值对之间用逗号。如

{ "name": "张3", "age": 30 }

数组（Array）： [] 包裹，元素之间使用逗号分隔。如：

[ "apple", "banana", "orange" ]

[ {"name": "张3", "age": 30}, {"name": "李4", "age": 25} ]

3，规则：数据在名称/值对中，数据由逗号分隔，大括号保存对象，中括号保存数组。

4，JSON值：数字（整数/浮点数）、字符串（双引号）、布尔值（true/false）、数组（中括号）、对象（大括号）、null。

JavaScript中，你可以使用in运算符或hasOwnProperty()方法来检查一个JSON对象是否包含某个属性（字段）。如果对象包含该字段，你可以直接使用点符号（.）或方括号（[]）表示法来读取它的值。

以下是使用in运算符和hasOwnProperty()方法检查对象属性并读取其值的示例程序：

// 假设我们有一个JSON对象  
var jsonObject={  
    "name": "Alice",  
    "age": 30,  
    "city": "New York"  
};  
  
// 要检查的字段名  
var fieldName="age";  
  
// 使用 'in' 运算符检查字段是否存在  
if (fieldName in jsonObject) {  
    console.log("字段 '" + fieldName + "' 存在，其值为：" + jsonObject[fieldName]);  
} else {  
    console.log("字段 '" + fieldName + "' 不存在");  
}  
  
// 或者使用 'hasOwnProperty()' 方法检查字段是否存在  
if (jsonObject.hasOwnProperty(fieldName)) {  
    console.log("字段 '" + fieldName + "' 存在，其值为：" + jsonObject.age);  
    // 或者使用动态属性访问方式  
    console.log("字段 '" + fieldName + "' 存在，其值为：" + jsonObject[fieldName]);  
} else {  
    console.log("字段 '" + fieldName + "' 不存在");  
}  
  
// 如果要读取的字段名是动态的，则必须使用方括号表示法  
var dynamicFieldName="city";  
if (dynamicFieldName in jsonObject) {  
    console.log("动态字段 '" + dynamicFieldName + "' 存在，其值为：" + jsonObject[dynamicFieldName]);  
}

在这个示例中，我们首先定义了一个名为jsonObject的JSON对象，然后定义了一个要检查的字段名fieldName。我们使用in运算符和hasOwnProperty()方法来检查该字段是否存在于对象中。如果存在，我们就使用点符号（在字段名已知且不是动态的情况下）或方括号表示法（在字段名是动态的情况下）来读取它的值。

请注意，虽然在这个例子中我们使用了术语“JSON对象”，但实际上jsonObject是一个普通的JavaScript对象。在JavaScript中，JSON（JavaScript Object Notation）通常用于表示数据的序列化格式，即字符串形式的对象表示。但是，一旦JSON字符串被解析成JavaScript对象（例如，通过JSON.parse()方法），你就可以像处理任何其他JavaScript对象一样处理它。

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

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