js如何获取json的值

JavaScript轻松获取JSON数据的值：从基础到进阶

在Web开发中，JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，因其易读性和与JavaScript的天然兼容性，成为了前后端数据交互的主流选择，无论是从API接口获取数据，还是处理本地存储的配置信息，都离不开“如何从JSON中提取所需值”这一核心操作，本文将从基础到进阶，详细介绍JavaScript中获取JSON值的多种方法,并通过实例帮助大家彻底这一技能。

JSON与JavaScript对象的本质关系

在开始获取JSON值之前，首先要明确一个关键概念：JSON本质上是一种字符串格式，而JavaScript（JS）中的对象（Object）是内存中的数据结构，两者可以直接相互转换,这也是JS操作JSON如此便捷的原因。

• JSON字符串：符合JSON格式规范的文本，'{ "name": "张三", "age": 25, "hobbies": ["阅读", "游泳"] }',必须用单引号或双引号包裹。
• JavaScript对象：由键值对组成的集合，const obj = { name: "张三", age: 25, hobbies: ["阅读", "游泳"] };，键可以不用引号（字符串类型的键加引号更规范）。

从JSON字符串获取值，通常需要先将其转换为JS对象；而直接处理JS对象时,则可以直接通过属性访问操作符获取值。

基础操作：直接访问JS对象的属性

如果已经是JS对象（非JSON字符串），获取值的核心是通过点（）或方括号（[]）操作符访问属性。

点（）操作符：适用于属性名是合法标识符的情况

当属性名是有效的JS变量名（不含空格、特殊字符，且不以数字开头）时,可以用点操作符直接访问。

const user = {
  name: "李四",
  age: 30,
  isStudent: false,
  address: {
    city: "北京",
    district: "朝阳区"
  }
};
// 访问顶层属性
console.log(user.name);    // 输出: "李四"
console.log(user.age);     // 输出: 30
console.log(user.isStudent); // 输出: false
// 访问嵌套对象属性
console.log(user.address.city);      // 输出: "北京"
console.log(user.address.district);  // 输出: "朝阳区"

方括号（[]）操作符：更灵活的属性访问

方括号操作符适用于以下场景：

• 属性名包含特殊字符（如空格、、等）；
• 属性名是动态的（变量）；
• 属性名是数字（访问数组元素）。

const data = {
  "user-name": "王五",
  "1st-place": "冠军",
  scores: [88, 92, 76],
  contact: {
    "phone-number": "13800138000"
  }
};
// 属性名包含特殊字符，必须用方括号（注意属性名需加引号）
console.log(data["user-name"]);       // 输出: "王五"
console.log(data["1st-place"]);      // 输出: "冠军"
// 动态属性名（变量）
const dynamicKey = "phone-number";
console.log(data.contact[dynamicKey]); // 输出: "13800138000"
// 访问数组元素（本质是数字属性名）
console.log(data.scores[0]);          // 输出: 88
console.log(data.scores[1]);          // 输出: 92

注意事项：避免“undefined”陷阱

直接访问不存在的属性会返回undefined，可能导致后续操作报错（如user.age.toString()）,建议通过以下方式处理：

const user = { name: "赵六" };
// 直接访问不存在的属性
console.log(user.age); // 输出: undefined
// 方式1：使用逻辑或（||）提供默认值
const age = user.age || 0;
console.log(age); // 输出: 0
// 方式2：使用可选链操作符（?.，ES2020+，推荐）
const city = user.address?.city; // 如果user.address不存在，直接返回undefined，不会报错
console.log(city); // 输出: undefined
// 方式3：使用空值合并运算符（??，ES2020+），区分undefined/null和0/空字符串
const score = user.score ?? 0; // 只有当user.score为undefined或null时，才使用默认值0
console.log(score); // 输出: 0

进阶操作：从JSON字符串解析为JS对象

实际开发中，数据常以JSON字符串的形式从API或本地文件中获取（如fetch()请求返回的response.text()或response.json()），此时需先通过JSON.parse()将字符串转换为JS对象,再进行访问。

JSON.parse()：将JSON字符串转为JS对象

JSON.parse()方法会解析JSON字符串,并返回对应的JS对象或数组。

// JSON字符串示例（注意：JSON字符串的键必须用双引号）
const jsonStr = '{ "name": "钱七", "age": 28, "hobbies": ["旅行", "摄影"], "contact": { "email": "qianqi@example.com" } }';
// 解析为JS对象
const userObj = JSON.parse(jsonStr);
// 访问属性（同基础操作）
console.log(userObj.name);         // 输出: "钱七"
console.log(userObj.hobbies[1]);   // 输出: "摄影"
console.log(userObj.contact.email); // 输出: "qianqi@example.com"

错误处理：避免JSON.parse()报错

如果JSON字符串格式不正确（如单引号包裹、属性名无引号、逗号使用错误等），JSON.parse()会抛出SyntaxError，建议使用try-catch捕获异常：

const invalidJsonStr = "{ name: '孙八', age: 31 }"; // 属性名无引号，不符合JSON规范
try {
  const userObj = JSON.parse(invalidJsonStr);
  console.log(userObj.name);
} catch (error) {
  console.error("JSON解析失败:", error.message); // 输出: JSON解析失败: Unexpected token n in JSON at position 2
  // 可在此处设置默认值或提示用户
}

实战案例：从API获取JSON数据并提取值

假设我们需要从某个用户API获取用户信息，提取其姓名、邮箱和所在城市,API返回的JSON字符串如下：

{
  "code": 200,
  "message": "success",
  "data": {
    "userInfo": {
      "name": "周九",
      "email": "zhoujiu@example.com",
      "address": {
        "city": "上海",
        "street": "南京东路123号"
      }
    }
  }
}

使用fetch()获取数据并解析

// 模拟API请求（实际开发中替换为真实URL）
fetch('/api/user/1')
  .then(response => {
    if (!response.ok) {
      throw new Error('网络响应异常');
    }
    return response.json(); // 将响应体解析为JS对象（自动调用JSON.parse()）
  })
  .then(data => {
    // 提取所需值
    const userName = data.data.userInfo.name;
    const userEmail = data.data.userInfo.email;
    const userCity = data.data.userInfo.address.city;
    console.log("姓名:", userName);        // 输出: 姓名: 周九
    console.log("邮箱:", userEmail);      // 输出: 邮箱: zhoujiu@example.com
    console.log("城市:", userCity);        // 输出: 城市: 上海
  })
  .catch(error => {
    console.error("获取数据失败:", error);
  });

使用async/await优化异步代码（ES2017+）

async function fetchUserInfo() {
  try {
    const response = await fetch('/api/user/1');
    if (!response.ok) {
      throw new Error('网络响应异常');
    }
    const data = await response.json();
    // 提取值（使用可选链避免中间层缺失报错）
    const userName = data.data?.userInfo?.name || "未知用户";
    const userEmail = data.data?.userInfo?.email || "";
    const userCity = data.data?.userInfo?.address?.city || "未知城市";
    console.log("姓名:", userName);
    console.log("邮箱:", userEmail);
    console.log("城市:", userCity);
  } catch (error) {
    console.error("获取数据失败:", error);
  }
}
fetchUserInfo();

高级技巧：动态访问与批量提取

1