js怎么操作json

JavaScript操作JSON完全指南：从解析到构建与遍历

JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，因其易于人阅读和编写，同时也易于机器解析和生成，在Web开发中得到了广泛应用，JavaScript作为Web开发的核心语言，与JSON有着天然的紧密联系，本文将详细介绍如何使用JavaScript操作JSON，包括解析JSON字符串、将对象转换为JSON字符串、以及如何访问和修改JSON数据。

什么是JSON？

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

对象（Object）：无序的键值对集合，以开始，以结束，键名必须是字符串，值可以是字符串、数字、布尔值、null、数组或其他对象。
- 示例：{"name": "张三", "age": 30, "isStudent": false}
数组（Array）：值的有序列表，以 [ 开始，以 ] 结束，值可以是字符串、数字、布尔值、null、数组或其他对象。
- 示例：[{"name": "李四", "age": 25}, {"name": "王五", "age": 28}]

将JSON字符串解析为JavaScript对象

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

语法： JSON.parse(text[, reviver])

text: 必需,一个有效的JSON字符串。
reviver: 可选，一个转换结果的函数,将在每个键值对上调用。

示例：

const jsonString = '{"name": "张三", "age": 30, "hobbies": ["reading", "music"]}';
// 使用JSON.parse()将JSON字符串转换为JavaScript对象
const jsObject = JSON.parse(jsonString);
console.log(jsObject); // 输出: { name: '张三', age: 30, hobbies: [ 'reading', 'music' ] }
console.log(jsObject.name); // 输出: 张三
console.log(jsObject.hobbies[0]); // 输出: reading
// 处理包含日期的JSON字符串（需要reviver函数）
const jsonStringWithDate = '{"name": "李四", "birthDate": "1990-01-01T00:00:00Z"}';
const jsObjectWithDate = JSON.parse(jsonStringWithDate, (key, value) => {
  if (key === 'birthDate') {
    return new Date(value);
  }
  return value;
});
console.log(jsObjectWithDate.birthDate); // 输出: 一个Date对象

注意事项：

JSON.parse() 要求字符串必须是符合JSON格式的，否则会抛出SyntaxError异常。
JSON中的键名必须使用双引号，JavaScript对象可以使用单引号或双引号，但JSON.parse()只认双引号。

将JavaScript对象转换为JSON字符串

当我们需要将JavaScript对象发送到服务器，或者将其保存到本地存储时，通常需要将其转换为JSON字符串，这时，JSON.stringify() 方法就派上用场了。

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

value: 必需,要转换的JavaScript对象或数组。
replacer: 可选，可以是一个函数或数组，用于控制哪些属性如何被序列化。
- 如果是函数，则每个属性都会经过该函数处理,返回的值将被序列化。
- 如果是数组,则只有数组中包含的属性名会被序列化。
space: 可选，用于美化输出，是一个数字或字符串，数字表示缩进的空格数（最大10），字符串则用作缩进字符（如\t）。

示例：

const jsObject = {
  name: "王五",
  age: 28,
  hobbies: ["traveling", "coding"],
  address: {
    city: "北京",
    street: "某某街道123号"
  }
};
// 基本转换
const jsonString = JSON.stringify(jsObject);
console.log(jsonString);
// 输出: {"name":"王五","age":28,"hobbies":["traveling","coding"],"address":{"city":"北京","street":"某某街道123号"}}
// 使用space参数美化输出
const prettyJsonString = JSON.stringify(jsObject, null, 2);
console.log(prettyJsonString);
/*
输出:
{
  "name": "王五",
  "age": 28,
  "hobbies": [
    "traveling",
    "coding"
  ],
  "address": {
    "city": "北京",
    "street": "某某街道123号"
  }
}
*/
// 使用replacer函数（过滤掉age属性）
const filteredJsonString = JSON.stringify(jsObject, (key, value) => {
  if (key === 'age') {
    return undefined; // 过滤掉该属性
  }
  return value;
});
console.log(filteredJsonString);
// 输出: {"name":"王五","hobbies":["traveling","coding"],"address":{"city":"北京","street":"某某街道123号"}}
// 使用replacer数组（只序列化name和hobbies）
const selectedJsonString = JSON.stringify(jsObject, ['name', 'hobbies']);
console.log(selectedJsonString);
// 输出: {"name":"王五","hobbies":["traveling","coding"]}

注意事项：

JSON.stringify() 会忽略值为function、undefined和Symbol类型的属性。
循环引用的对象会导致JSON.stringify()抛出错误。

访问和修改JSON数据

一旦将JSON字符串解析为JavaScript对象,我们就可以像操作普通JavaScript对象一样访问和修改其数据。

访问数据：

使用点表示法（）或方括号表示法（[]）来访问对象的属性或数组的元素。

const user = {
  id: 1,
  name: "赵六",
  contact: {
    email: "zhaoliu@example.com",
    phone: "13800138000"
  },
  courses: ["JavaScript", "React", "Node.js"]
};
// 访问简单属性
console.log(user.name); // 输出: 赵六
// 访问嵌套对象属性
console.log(user.contact.email); // 输出: zhaoliu@example.com
// 访问数组元素
console.log(user.courses[1]); // 输出: React
// 使用方括号表示法访问属性（特别适用于属性名包含特殊字符或变量名）
console.log(user['contact']['phone']); // 输出: 13800138000
const propName = 'name';
console.log(user[propName]); // 输出: 赵六

修改数据：

直接通过赋值来修改对象的属性值或数组元素。

const product = {
  id: 101,
  name: "笔记本电脑",
  price: 4999,
  specs: {
    cpu: "Intel i5",
    ram: "16GB"
  }
};
// 修改简单属性
product.price = 4599;
console.log(product.price); // 输出: 4599
// 修改嵌套对象属性
product.specs.ram = "32GB";
console.log(product.specs.ram); // 输出: 32GB
// 添加新属性
product.color = "银色";
console.log(product.color); // 输出: 银色
// 修改数组元素
product.tags = ["电脑", "办公", "便携"];
product.tags[0] = "计算机";
console.log(product.tags); // 输出: ["计算机", "办公", "便携"]

遍历JSON数据：

对于对象，可以使用for...in循环或Object.keys()、Object.values()、Object.entries()结合forEach或map等方法，对于数组，可以使用for循环、forEach、map、filter、reduce等方法。

// 遍历对象
const car = { brand: "Toyota", model: "Camry", year: 2022 };
// for...in 循环（遍历可枚举属性）
for (let key in car) {
  console.log(`${key}: ${car[key]}`);
}
// 输出:
// brand: Toyota
// model: Camry
// year: 2022
// Object.keys() + forEach
Object.keys(car).forEach(key => {
  console.log(`${key}: ${car[key]}`);
});
// 遍历数组
const fruits = ["apple", "banana", "orange"];
// forEach
fruits.forEach((fruit, index) => {
  console.log(`Index ${index}: ${fruit}`);
});
// 输出: