先来了解一下几个概念：

JSON 格式

JSON 是一种轻量级的、基于文本的、与语言无关的语法，用于定义数据交换格式
它来源于 ECMAScript 编程语言，但是独立于编程语言

对象字面量

是创建对象的一种快捷方式，英文名：object literal
对应还有函数字面量、数组字面量等等
字面量的性能优于使用 new 创建

JSON 特征

JSON 就是一串字符串，使用特定的符号标注
{} 双括号表示对象
[] 中括号表示数组
“” 双引号内是属性键或值

JSON 键

只能是字符串
必须用双引号包裹

JSON 值

object
array
number
string
true
false
null

举几个合格 JSON 格式的例子:

`["大", "家", "好"]`
`{ "name": "Jae", "age": 23 }`
`{ "Arr": ["1", "2", "3"] }`
`{ "name": null }`
`{}`
`[]`

再看几个不合格 JSON 格式的例子：

`{"name": "Jae",[Symbol.for("sex")]: 23 // 错误，键只能是字符串，不能是 Symbol
}``{name: "Jae", // 键必须用双引号包裹，此处没有引号'age': 23 // 键必须用双引号包裹，此处用的是单引号
}``[-10, 0xDDFF]` // 只允许十进制，这里用了十六进制`{"name": "car","created": new Date(), // 不能有 Date"price": 100,"getPrice": function() { // 不能有 functionreturn this.price}
}``{"name": "Jae","age": 23, // 最后不能有逗号
}`

JSON.parse()

把 JSON 字符串转化为方便使用的对象，这个方法相信大家已经很熟悉了。

这里介绍一下大部分人会忽略的用法，JSON.parse() 的第二个参数：

JSON.parse() 第二个参数 reviver(k, v)

第二个参数为一个函数 reviver(k, v)，k 表示当前需要转换的属性键，v 表示当前需要转换的属性值；如果该函数返回 undefined，当前属性会从对象中删除；如果返回其他值，就会成为一个有效值。下面来看看具体的代码示例：

var jsonStr = `{"name": "Jae","age": 23,"sex": "boy","IdCard": "350204199903256985"
}`
// 隐藏身份证信息
var obj = JSON.parse(jsonStr, function(key, value) {if (key === 'IdCard') {return undefined;} else {return value;}
});
console.log(obj); // { name: 'Jae', age: 23, sex: 'boy' }

JSON.stringify()

把对象或者基础的值转化为 JSON 字符串的方法，它同样有几个大家容易忽略的参数：

语法：JSON.stringify(value[, replacer [, space]])
第二个参数 replacer：过滤属性或者处理值
第三个参数 space：美化输出格式

JSON.stringify() 第二个参数 replacer

如果该参数是一个函数：则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和出处理
如果该参数是一个数组：则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中
如果该参数为 null 或者未提供：则对象所有属性都会被序列化

看一个例子：

var person = {name: "Jae",age: 23,sex: "boy",IdCard: "350204199903256985"
};var jsonString = JSON.stringify(person, function(key, value) {if (typeof value === "string") {return undefined} else {return value}
});
console.log(jsonString); // '{"age":23}'
console.log(JSON.stringify(person, ['name', 'age'])); // '{"name":"Jae","age":23}'

JSON.stringify() 第三个参数 space

如果参数是数字：它代表有多少的空格；上限为10。该值若小于1，则意味着没有空格
如果该参数为字符串：当字符串长度超过10个字母，取其前10个字母，该字符串将被作为空格
如果该参数为 null 或者未提供：没有空格

看一个例子：

var person = {name: "Jae",age: 23,sex: "boy",IdCard: "350204199903256985"
};
console.log(person); // '{"name":"Jae","age":23,"sex":"boy","IdCard":"350204199903256985"}'
console.log(JSON.stringify(person, null, 4));
// 输出为：
// {//     "name":"Jae",
//     "age":23,
//     "sex":"boy",
//     "IdCard":"350204199903256985"
// }

JSON.stringify() 其他规则

若值为 undefined、函数、Symbol

作为对象属性值，自动忽略
作为数组，序列号返回 null
单独序列化时，返回 undefined

Date 返回 ISO 字符串
循环引用报错
NaN、Infinity、null 返回 null
BigInt 报错
Map/Set/WeakMap 等对象，仅序列化可枚举属性

具体看一下代码：

// 作为对象属性值
const data = {a: "test1",b: undefined,c: Symbol("test2"),fn: function() {return true;}
}
console.log(JSON.stringify(data)); // '{"a":"test1"}'// 作为数组
const data = ["test1", undefined, function aa() {return true}, Symbol("test2")];
console.log(JSON.stringify(data)); // '["test1", null, null, null]'// 单独序列化时
const a1 = JSON.stringify(function fun() {return true})
const a2 = JSON.stringify(undefined)
const a3 = JSON.stringify(Symbol('test'))
console.log(a1, a2, a3); // undefined undefined undefined// Date
console.log(JSON.stringify({now: new Date()})); // '{"now":"2022-03-30T06:02:17.348Z"}'// NaN、Infinity、null
console.log(JSON.stringify(NaN)); // null
console.log(JSON.stringify(Infinity)); // null
console.log(JSON.stringify(null)); // null// 转换为对应的原始值
console.log(JSON.stringify([new Number(2), new String("test"), new Boolean(false)])); // [2,"test",false]// 仅序列化可枚举属性
const a = JSON.stringify(Object.create(null, {test1: { value: 'test1', enumerable: false },test2: { value: 'test2', enumerable: true }})
); // '{"test2":"test2"}'// 循环引用报错
const obj = {name: "Jae"
};
const obj2 = {obj
};
// 对象之间形成循环引用，形成闭环
obj.obj2 = obj2
// 封装一个深拷贝函数
function deepClone(obj) {return JSON.parse(JSON.stringify(obj));
}
// 执行深拷贝，抛出错误
deepClone(obj); // Uncaught TypeError: Converting circular structure to JSON// BigInt 报错
console.log(JSON.stringify(10n)); // Uncaught TypeError: Do not know how to serialize a BigInt

toJSON

总的来说 JSON.stringify() 还是偏复杂的。如果对象拥有 toJSON 方法，toJSON 会覆盖对象默认的序列化行为。看一下代码：

let obj = {"name": "Jae","age": 23,"school": {"address": "xxxxxx","phone": 13306006259},toJSON() {return {name: "Jae"}}
}
console.log(JSON.stringify(obj)); // {"name":"Jae"}

JavaScript 中的 JSON相关推荐

在JavaScript中解析JSON？ [重复]
本文翻译自:Parse JSON in JavaScript? [duplicate] This question already has answers here : 这个问题已经在这里有了答案 : ...
Json学习总结（1）——Java和JavaScript中使用Json方法大全
2019独角兽企业重金招聘Python工程师标准>>> 摘要:JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript ...
在 JavaScript 中创建 JSON 对象
<html> <body> <h2>在 JavaScript 中创建 JSON 对象</h2><p> Name: <span id=& ...
jsonp请求html页面,JavaScript中的JSON和JSONP
简单地使用json并不能支持跨域资源请求,为了解决这个问题,需要采用jsonp数据交互协议.众所周知,js文件的调用不受跨域与否的限制,因此如果想通过纯web端跨域访问数据,只能在远程服务器上设法将j ...
javascript 中使用JSON
因为JSON 是 javascript 的一个子集,所以,在javascript 中使用JSON是非常简单的. js 代码 var myJSONObject = {"bindings&quo ...
JSON—JavaScript中的JSON
JSON的数据格式 JavaScript中的JSON 1.JavaScript与JSON JSON是一种语法,用来序列化对象.数组.数值.字符串.布尔值 null.他基于JavaScript语法,但与 ...
JS/JavaScript中解析JSON --- JSON.parse()、JSON.stringify()以及$.parseJSON()使用详解
JS/JavaScript中解析JSON --- JSON.parse().JSON.stringify()以及$.parseJSON()使用详解现在JSON格式在web开发中非常重要,特别是在使用 ...
JavaScript中的JSON
JSON是什么? JSON格式(JavaScript Object Notation 的缩写)是一种用于数据交换的文本格式.就是符合某种规范的文本格式,经常用于与服务器做数据交换,比传统的XML更简洁 ...
服务器json文件怎么创建对象,JavaScript中对JSON对象的基本操作示例
JSON对象 1.对象的属性:对象的属性是有键值对组成的,其中key为一个字符串,value可以为任何的Javascript对象. //使用[]设置和获取对象的属性 var obj = new Obj ...
在JavaScript中使用json.js：访问JSON编码的某个值
演示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...

JavaScript 中的 JSON