js如何处理json字符串

JavaScript轻松玩转JSON字符串：解析与序列化全解析**

在Web开发的世界里，JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，几乎无处不在，它简洁、易读、易于解析和生成，使得前后端数据交互变得异常高效，JavaScript作为前端开发的核心语言，自然提供了强大的功能来处理JSON字符串，本文将详细探讨JavaScript如何解析JSON字符串（将JSON字符串转换为JavaScript对象）以及如何序列化JavaScript对象（将JavaScript对象转换为JSON字符串）。

什么是JSON？

简单回顾一下JSON，JSON是一种基于JavaScript语法子集的数据格式，但它独立于语言,它有两种主要结构：

对象（Object）：无序的键值对集合，以包裹，键值对之间用逗号分隔，键和值之间用冒号分隔，键必须是字符串，值可以是字符串、数字、布尔值、null、数组或另一个对象。
- 示例：{"name": "张三", "age": 30, "isStudent": false}
数组（Array）：有序的值列表，以 [] 包裹，值之间用逗号分隔，值可以是字符串、数字、布尔值、null、数组或对象。
- 示例：[1, "apple", {"color": "red"}, true]

将JSON字符串解析为JavaScript对象（JSON.parse）

当我们从服务器接收到数据或读取一个存储JSON格式数据的文件时，通常收到的都是JSON字符串，为了在JavaScript中操作这些数据，我们需要将其转换为JavaScript对象（或数组），这时，JSON.parse() 方法就派上用场了。

基本用法

JSON.parse() 方法接收一个JSON字符串作为参数,并返回对应的JavaScript对象或数组。

const jsonString = '{"name": "李四", "age": 25, "hobbies": ["reading", "music"]}';
// 将JSON字符串解析为JavaScript对象
const jsObject = JSON.parse(jsonString);
console.log(jsObject); // 输出: { name: '李四', age: 25, hobbies: [ 'reading', 'music' ] }
console.log(jsObject.name); // 输出: 李四
console.log(jsObject.hobbies[0]); // 输出: reading

处理JSON数组

如果JSON字符串表示一个数组，JSON.parse() 会将其转换为JavaScript数组。

const jsonArrayString = '[{"id": 1, "task": "学习JS"}, {"id": 2, "task": "处理JSON"}]';
const jsArray = JSON.parse(jsonArrayString);
console.log(jsArray); // 输出: [ { id: 1, task: '学习JS' }, { id: 2, task: '处理JSON' } ]
console.log(jsArray[1].task); // 输出: 处理JSON

使用reviver函数（可选）

JSON.parse() 还可以接收第二个参数，一个名为 reviver 的函数，这个函数会在解析每个键值对时被调用,允许你对解析结果进行转换或处理。

const jsonStringWithDate = '{"createdAt": "2023-10-27T10:00:00Z"}';
const jsObjectWithDate = JSON.parse(jsonStringWithDate, (key, value) => {
  if (key === 'createdAt') {
    return new Date(value); // 将日期字符串转换为Date对象
  }
  return value;
});
console.log(jsObjectWithDate.createdAt); // 输出: 2023-10-27T10:00:00.000Z (Date对象)
console.log(typeof jsObjectWithDate.createdAt); // 输出: object

错误处理

如果传入的 JSON.parse() 的字符串不是有效的JSON格式，它会抛出 SyntaxError 异常，在实际开发中，通常建议使用 try...catch 进行错误处理。

const invalidJsonString = '{"name": "王五", age: 30}'; // age两侧缺少引号，不是有效的JSON
try {
  const jsObject = JSON.parse(invalidJsonString);
  console.log(jsObject);
} catch (error) {
  console.error("解析JSON字符串时出错:", error.message);
  // 输出: 解析JSON字符串时出错: Unexpected token a in JSON at position 13 (这里的a是age的a)
}

将JavaScript对象序列化为JSON字符串（JSON.stringify）

我们需要将JavaScript对象或数组转换为JSON字符串，以便将其发送到服务器或存储在本地存储中，这时，JSON.stringify() 方法就派上用场了。

基本用法

JSON.stringify() 方法接收一个JavaScript对象或数组作为参数,并返回对应的JSON字符串。

const jsObject = {
  name: "赵六",
  age: 28,
  isEmployed: true,
  address: null
};
// 将JavaScript对象序列化为JSON字符串
const jsonString = JSON.stringify(jsObject);
console.log(jsonString); // 输出: {"name":"赵六","age":28,"isEmployed":true,"address":null}

处理数组

const jsArray = [1, "hello", { a: 1 }, false];
const jsonArrayString = JSON.stringify(jsArray);
console.log(jsonArrayString); // 输出: [1,"hello",{"a":1},false]

使用replacer函数（可选）

JSON.stringify() 可以接收第二个参数，一个名为 replacer 的函数或数组，这个函数可以控制哪些属性应该被序列化,或者对序列化后的值进行修改。

作为函数：接收键和值作为参数，返回序列化后的值（如果返回 undefined，则该属性会被排除）。

const user = {
  id: 1,
  name: "钱七",
  password: "123456", // 不想序列化密码
  sensitiveData: "保密"
};
const userJsonString = JSON.stringify(user, (key, value) => {
  if (key === 'password' || key === 'sensitiveData') {
    return undefined; // 过滤掉这些属性
  }
  return value;
});
console.log(userJsonString); // 输出: {"id":1,"name":"钱七"}

作为数组：指定需要被序列化的属性名列表。

const product = {
  id: 101, "智能手机",
  price: 2999,
  stock: 100
};
// 只序列化id和title
const productJsonString = JSON.stringify(product, ['id', 'title']);
console.log(productJsonString); // 输出: {"id":101,"title":"智能手机"}

使用space参数（可选，用于格式化）

JSON.stringify() 还可以接收第三个参数 space，用于控制结果字符串的缩进和格式化，使其更易读。space 可以是一个数字（表示缩进的空格数，最大10）或一个字符串（用作缩进字符）。

const data = {
  user: "孙八",
  details: {
    age: 32,
    hobbies: ["travel", "photography"]
  },
  scores: [90, 85, 92]
};
// 使用数字缩进（2个空格）
const formattedJsonString1 = JSON.stringify(data, null, 2);
console.log(formattedJsonString1);
/*
输出:
{
  "user": "孙八",
  "details": {
    "age": 32,
    "hobbies": [
      "travel",
      "photography"
    ]
  },
  "scores": [
    90,
    85,
    92
  ]
}
*/
// 使用字符串缩进（"\t"表示制表符）
const formattedJsonString2 = JSON.stringify(data, null, '\t');
console.log(formattedJsonString2);
/*
输出:
{
    "user": "孙八",
    "details": {
        "age": 32,
        "hobbies": [
            "travel",
            "photography"
        ]
    },
    "scores": [
        90,
        85,
        92
    ]
}
*/

处理循环引用

如果JavaScript对象中存在循环引用（即对象的某个属性间接或直接引用了对象自身），JSON.stringify() 会直接抛出错误 TypeError。

const obj = {};
obj.a = obj; // 循环引用
try {
  JSON.stringify(obj);
} catch (error) {
  console.error("序列化对象时出错:", error.message);
  // 输出: 序列化对象时出错: "Converting circular structure to JSON" (or similar)
}