js中拿到json要怎么操作

JS中轻松玩转JSON：从获取到操作的全面指南

在JavaScript（JS）开发中，JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，因其易于人阅读和编写，同时也易于机器解析和生成，已成为前后端数据交互的“通用语言”，无论是从API接口获取数据，还是处理本地存储的配置信息，我们都需要频繁地对JSON进行操作，本文将从“如何拿到JSON”出发，详细讲解JSON的获取、解析、遍历、修改及序列化等核心操作,助你轻松玩转JSON。

如何“拿到”JSON数据？

在JS中，获取JSON数据通常有以下几种常见场景,每种场景的处理方式略有不同：

从变量或字符串中直接获取JSON

如果JSON数据已经以JS对象或字符串的形式存在于代码中,获取方式相对简单：

场景1：JSON数据已解析为JS对象
当后端返回的JSON数据被JS自动解析（如通过fetch的response.json()方法），或我们直接在JS中定义了对象时，可以直接操作该对象：
```
const jsonData = { name: "张三", age: 25, hobbies: ["reading", "coding"] };
console.log(jsonData.name); // 输出: 张三
```
场景2：JSON数据以字符串形式存在
如果JSON数据是未解析的字符串（如从本地存储localStorage获取的字符串，或手动拼接的JSON字符串），需要先将其转换为JS对象，这一步称为“解析JSON”。
使用JSON.parse()方法：
```
const jsonString = '{"name": "李四", "age": 30, "city": "北京"}';
const jsonData = JSON.parse(jsonString); // 解析为JS对象
console.log(jsonData.city); // 输出: 北京
```
注意：JSON.parse()要求数据字符串符合JSON格式（如属性名必须用双引号），否则会抛出SyntaxError。

从API接口获取JSON数据

前后端交互时，后端通常通过API返回JSON格式的数据，此时需要通过异步请求（如fetch、axios）获取数据,并解析响应体：

使用fetch API（原生JS）
fetch返回一个Promise，通过then链式调用解析响应：

fetch('https://api.example.com/user')
  .then(response => {
    if (!response.ok) throw new Error('网络响应异常');
    return response.json(); // 调用response.json()解析JSON
  })
  .then(data => {
    console.log(data); // data已是JS对象
    console.log(data.name);
  })
  .catch(error => console.error('获取数据失败:', error));

使用axios库（更简洁的HTTP客户端）
axios会自动解析JSON，无需手动调用response.json()：

axios.get('https://api.example.com/user')
  .then(response => {
    const data = response.data; // response.data直接是JS对象
    console.log(data.name);
  })
  .catch(error => console.error('获取数据失败:', error));

从本地存储中获取JSON数据

浏览器提供的localStorage和sessionStorage只能存储字符串，因此存储JSON数据时需要先序列化（JSON.stringify），读取时再反序列化（JSON.parse）：

// 存储JSON数据（先序列化）
const userData = { id: 1, token: "abc123" };
localStorage.setItem('user', JSON.stringify(userData));
// 获取JSON数据（后解析）
const storedData = localStorage.getItem('user');
if (storedData) {
  const parsedData = JSON.parse(storedData);
  console.log(parsedData.token); // 输出: abc123
}

拿到JSON后，如何操作数据？

将JSON解析为JS对象后，我们可以像操作普通JS对象一样操作数据，常见操作包括访问、遍历、修改、添加、删除等。

访问JSON数据

通过点表示法（）：适用于属性名是合法的JS标识符（无空格、无特殊字符）且已知属性名的情况。
```
const jsonData = { user: { name: "王五", age: 28 } };
console.log(jsonData.user.name); // 输出: 王五
```

通过方括号表示法（[]）：适用于属性名包含特殊字符、有空格，或属性名存储在变量中的情况。

const jsonData = { "user-name": "赵六", "user age": 32 };
console.log(jsonData["user-name"]); // 输出: 赵六
const key = "user age";
console.log(jsonData[key]); // 输出: 32

遍历JSON数据

JSON数据本质是JS对象,遍历对象和数组的方法同样适用：

遍历对象属性
使用for...in循环（遍历对象的可枚举属性，包括原型链上的属性，需用hasOwnProperty过滤）：

const jsonData = { a: 1, b: 2, c: 3 };
for (const key in jsonData) {
  if (jsonData.hasOwnProperty(key)) { // 过滤掉原型链属性
    console.log(`${key}: ${jsonData[key]}`);
  }
}
// 输出: a: 1, b: 2, c: 3

遍历数组元素
如果JSON包含数组（如hobbies: ["reading", "music"]），使用forEach、for...of或传统for循环：

const jsonData = { hobbies: ["reading", "music", "sports"] };
// 方法1: forEach
jsonData.hobbies.forEach((hobby, index) => {
  console.log(`${index}: ${hobby}`);
});
// 方法2: for...of
for (const hobby of jsonData.hobbies) {
  console.log(hobby);
}

修改、添加、删除JSON数据

JS对象是引用类型,直接修改对象的属性即可影响原数据：

修改/添加属性
直接通过点或方括号赋值，属性存在则修改，不存在则添加：

const jsonData = { name: "钱七", age: 25 };
jsonData.age = 26; // 修改属性
jsonData.gender = "男"; // 添加属性
console.log(jsonData); // { name: "钱七", age: 26, gender: "男" }

删除属性
使用delete操作符（不推荐，会影响性能，且可能产生隐藏bug），或更推荐的方式是使用解构赋值创建新对象：

const jsonData = { name: "孙八", age: 30, temp: "delete me" };
delete jsonData.temp; // 删除temp属性
console.log(jsonData); // { name: "孙八", age: 30 }
// 推荐：解构赋值+剩余对象（创建新对象，避免副作用）
const { temp, ...newJsonData } = jsonData;
console.log(newJsonData); // { name: "孙八", age: 30 }

处理嵌套JSON数据

实际开发中，JSON数据往往是多层嵌套的（如对象中嵌套对象或数组）,处理时需逐层访问或递归遍历：

逐层访问：通过链式调用点或方括号表示法：

const nestedData = {
  user: {
    profile: {
      name: "周九",
      contacts: {
        email: "zhoujiu@example.com",
        phone: "13800138000"
      }
    }
  }
};
console.log(nestedData.user.profile.contacts.email); // 输出: zhoujiu@example.com

递归遍历嵌套对象：若需处理所有层级的属性，可编写递归函数：

function printNestedData(obj, prefix = '') {
  for (const key in obj) {
    if (typeof obj[key] === 'object' && obj[key] !== null) {
      printNestedData(obj[key], `${prefix}${key}.`); // 递归处理嵌套对象
    } else {
      console.log(`${prefix}${key}: ${obj[key]}`);
    }
  }
}
printNestedData(nestedData);
// 输出:
// user.profile.name: 周九
// user.profile.contacts.email: zhoujiu@example.com
// user.profile.contacts.phone: 13800138000