一、JSON对象简介
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。它基于JavaScript语法,但与之不同,它可以被解析为一种独立于语言的数据类型。
JSON由两种结构组成:键值对和数组。键值对由属性名称和属性值组成,用冒号分隔;数组由一组值组成,用逗号分隔。属性名必须是字符串,属性值可以是字符串、数字、对象、数组、布尔值或者null。
二、JSON对象转字符串的常用方法
1. JSON.stringify()
JSON.stringify()是将JSON对象转为字符串的主要方法,它可以接收三个参数:要转换的对象、转换函数以及每个属性对应的缩进。
let obj = {name: "Tom", age: 18}; let str1 = JSON.stringify(obj); // str1: {"name":"Tom","age":18} let str2 = JSON.stringify(obj, ["name"]); // str2: {"name":"Tom"} let str3 = JSON.stringify(obj, null, 2); // str3: { // "name": "Tom", // "age": 18 // }
第一个参数是要转换的对象;第二个参数是转换函数或数组;第三个参数表示对缩进进行定义,它可以设置为数字或字符串,代表缩进的空格数或其他字符。
2. JSON.parse()
JSON.parse()是将JSON字符串转为对象的主要方法,它只接收一个参数,即要转换的JSON字符串。
let str = '{"name":"Tom","age":18}'; let obj = JSON.parse(str); // obj: {name: "Tom", age: 18}
需要注意的是,JSON字符串必须符合语法规范,否则将会抛出语法错误。
3. 组合使用 JSON.stringify() 和 JSON.parse()
有时候,我们需要将一个对象先转成JSON字符串,然后再将JSON字符串转回对象,这个时候我们就可以使用JSON.stringify()和JSON.parse()组合使用。
let obj = {name: "Tom", age: 18}; let str = JSON.stringify(obj); // str: {"name":"Tom","age":18} let newObj = JSON.parse(str); // newObj: {name: "Tom", age: 18}
三、JSON字符串转义
在JSON字符串中,有一些字符需要进行转义,例如双引号、反斜杠等。JSON.stringify()方法可以自动进行转义,而JSON.parse()方法会自动将转义字符还原。
let obj = { name: "Tom", description: "He said, \"I'm happy.\"", path: "C:\\Program Files\\", date: new Date() }; let str = JSON.stringify(obj); // str: {"name":"Tom","description":"He said, \"I'm happy.\"","path":"C:\\\\Program Files\\\\"} let newObj = JSON.parse(str); // newObj: {name: "Tom", description: "He said, "I'm happy."", path: "C:\Program Files\", date: "2021-08-03T09:02:41.414Z"}
四、JSON字符串格式化
当JSON字符串比较长或者嵌套层数比较深时,阅读起来会比较困难。这个时候,我们可以对JSON字符串进行格式化,使其更加易读。
let obj = { name: "Tom", age: 18, friend: { name: "Jerry", age: 20 }, skills: ["JavaScript", "HTML", "CSS"] }; let str = JSON.stringify(obj, null, 2); console.log(str); // { // "name": "Tom", // "age": 18, // "friend": { // "name": "Jerry", // "age": 20 // }, // "skills": [ // "JavaScript", // "HTML", // "CSS" // ] // }
第二个参数设置为2,表示缩进两个空格。
五、JSON对象转字符串——常见问题
1. 循环引用问题
JSON.stringify()方法在遇到循环引用时会报错,如下所示:
let obj = {name: "Tom", age: 18}; obj.friend = obj; let str = JSON.stringify(obj); // 报错
我们可以通过手动移除循环引用或者添加 toJSON()方法来解决循环引用问题。
// 手动移除循环引用 let obj = {name: "Tom", age: 18}; let friend = {name: "Jerry", age: 20}; obj.friend = friend; friend.friend = obj; friend.friend = undefined; let str = JSON.stringify(obj); // 正常 // 添加toJSON()方法 let obj = {name: "Tom", age: 18}; obj.friend = obj; obj.toJSON = function() { let newObj = Object.assign({}, this); newObj.friend = undefined; return newObj; } let str = JSON.stringify(obj); // 正常
2. 对象属性顺序问题
JSON.stringify()方法默认情况下会按照属性名称的字母顺序进行排列。如果希望按照自己设置的顺序进行排列,可以传入一个数组。
let obj = {name: "Tom", age: 18}; let str = JSON.stringify(obj, ["age", "name"]); // str: {"age":18,"name":"Tom"}
3. NaN 和 Infinity 问题
JSON.stringify()方法不能正确处理NaN和Infinity这两个特殊值。可以通过定义 toJSON()方法来解决这个问题。
let obj = {name: "Tom", age: NaN, height: Infinity}; obj.toJSON = function() { let newObj = Object.assign({}, this); for (let prop in obj) { if (isNaN(obj[prop])) { newObj[prop] = null; } if (obj[prop] === Infinity) { newObj[prop] = "Infinity"; } if (obj[prop] === -Infinity) { newObj[prop] = "-Infinity"; } } return newObj; } let str = JSON.stringify(obj); // str: {"name":"Tom","age":null,"height":"Infinity"}
六、结语
本文主要介绍了JSON对象转字符串的常用方法,以及JSON字符串的转义和格式化问题,同时还对JSON对象转字符串过程中常见问题进行了分析和解决。
读者可以通过实践,更加深入地理解JSON对象转字符串的原理和应用。