JSON（JavaScript Object Notation）是表示值和对象的通用格式，是一种轻量级的数据交换格式。在 JavaScript 中，有个名为 JSON 的全局对象用来处理 JSON 数据，其中有两个方法：

• JSON.stringify()：将对象转换为 JSON 字符串
• JSON.parse()：将 JSON 字符串转换为对象

JSON 数据格式规范

• JSON 中没有单引号，反引号和注释。
• 对象的属性名必须带有双引号。

JSON.stringify

语法：let json = JSON.stringify(value[, replacer, space])

• value：要编码的值。
• replacer：要编码的属性数组或映射函数 function(key, value)。
• space：用于格式化的空格数量。

JSON.stringify 支持以下数据类型：

• Objects { ... }
• Arrays [ ... ]
• Primitives：
  • strings，
  • numbers，
  • boolean values true/false，
  • null

// 数字在 JSON 还是数字
alert(JSON.stringify(1)) // 1// 字符串在 JSON 中还是字符串，只是被双引号扩起来
alert(JSON.stringify('test')) // "test"alert(JSON.stringify(true)) // truealert(JSON.stringify([1, 2, 3])) // [1,2,3]

JSON 是语言无关的纯数据规范，因此一些特定于 JavaScript 的对象属性会被 JSON.stringify 跳过：

• 函数属性（方法）。
• Symbol 类型的键和值。
• 存储 undefined 的属性。

let user = {sayHi() {// 被忽略alert('Hello')},[Symbol('id')]: 123, // 被忽略abc: Symbol('abc'), // 被忽略something: undefined, // 被忽略
}alert(JSON.stringify(user)) // {}（空对象）

使用 replacer

如果对象循环引用或者我们不想编码某些属性怎么办？这时候可以用到第二个参数 replacer。

replacer 如果是数组，则仅有数组中的属性被编码。

const father = {name: 'father',
}const son = {name: 'son',father,
}father.son = son// JSON.stringify(father) // TypeError: Converting circular structure to JSON
JSON.stringify(father, ['name', 'son']) // '{"name":"father","son":{"name":"son"}}'

replacer 如果是函数，则会获取每个键/值对，包括嵌套对象和数组项，然后自行控制该替换的值。

const father = {name: 'father',
}const son = {name: 'son',father,
}father.son = sonJSON.stringify(father, (key, value) => {if (key === 'father') {return undefined}return value
}) // '{"name":"father","son":{"name":"son"}}'

replacer 普通函数（非箭头函数）中的 this 的值是包含当前属性的对象。

const obj = {a: 1,b: {c: 2,},
}JSON.stringify(obj, function (key, value) {console.log(this[key] === value) // truereturn value
})

格式化：space

JSON.stringify(value, replacer, spaces) 的第三个参数是用于优化格式的空格数量，一般用于调试时输出更美观的 JSON 字符串。

let user = {name: 'John',age: 25,roles: {isAdmin: false,isEditor: true,},
}alert(JSON.stringify(user, null, 2))
/* 两个空格的缩进：
{"name": "John","age": 25,"roles": {"isAdmin": false,"isEditor": true}
}
*/

自定义 toJSON

像 toString 进行字符串转换，对象也可以提供 toJSON 方法来进行 JSON 转换。如果可用，JSON.stringify 会自动调用它。

const obj = {a: 1,toJSON() {return 'Hello'},
}JSON.stringify(obj) // "Hello"

JSON.parse

语法：let value = JSON.parse(str, [reviver]);

• str：要解析的 JSON 字符串。
• reviver：可选的函数 function(key,value)，该函数将为每个 (key, value) 对调用，并可以对值进行转换。

// 字符串化数组
let numbers = '[0, 1, 2, 3]'numbers = JSON.parse(numbers)alert(numbers[1]) // 1

使用 reviver

当我们想要对解析出的值进行转换时，可以使用第二个参数 reviver。

const str = '{"title":"Conference","date":"2017-11-30T12:00:00.000Z"}'const meetup = JSON.parse(str, function (key, value) {if (key === 'date') return new Date(value)return value
})meetup.date.getDate() // 30

手写一个简易的 JSON.stringify

function myJsonStringify(obj) {const type = typeof objif (type === 'undefined' || type === 'symbol' || type === "function") returnif (type === 'bigint') {throw new TypeError('Do not know how to serialize a BigInt')}if (type !== 'object') return '' + objif (obj === null) return 'null'if (typeof obj.toJSON === 'function') return myJsonStringify(obj.toJSON())if (obj instanceof Array) {return `[${obj.map((val) => myJsonStringify(val) || null).join(',')}]`}return `{${Object.keys(obj).map((key) => {let val = obj[key]if (['function', 'symbol', 'undefined'].includes(typeof val)) returnreturn `"${key}":${myJsonStringify(val)}`}).filter(Boolean).join(',')}}`
}

eval 实现 JSON.parse

在不支持 JSON 的旧浏览器中，可以考虑使用 eval 来解析 JSON。

let numbers = '[0, 1, 2, 3]'function parseJson(str) {return eval(`(${str})`)
}numbers = parseJson(numbers) // [0, 1, 2, 3]

需要在 json 字符串前后加上括号，否则 {...} 会被当作代码块而不是对象。

总结

• JSON 是一种数据格式，具有自己的独立标准和大多数编程语言的库。
• JSON 支持 object，array，string，number，boolean 和 null。
• JavaScript 提供序列化（serialize）成 JSON 的方法 JSON.stringify 和解析 JSON 的方法 JSON.parse。
• 这两种方法都支持用于智能读/写的转换函数。
• 如果一个对象具有 toJSON，那么它会被 JSON.stringify 调用。

参考

• 现代 JavaScript 教程