js中如何取出json的值

轻松：JavaScript中如何取出JSON的值

在JavaScript开发中,JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，无处不在，无论是从后端API获取数据，还是在前端进行配置管理，我们都需要频繁地读取和使用JSON中的数据，如何高效、准确地从JSON对象中取出我们想要的值呢？本文将为你详细讲解，从最基础的点/方括号访问，到更高级的动态访问和遍历方法。

准备工作：什么是JSON？

要明确一点：在JavaScript中，我们通常说的“JSON”其实指的是一个符合JSON格式的JavaScript对象，它不是字符串，而是一个实实在在的内存中的对象。

一个JSON对象长这样：

const user = {
  "id": 101,
  "name": "张三",
  "isStudent": false,
  "courses": ["语文", "数学", "英语"],
  "address": {
    "city": "北京",
    "district": "海淀区"
  }
};

我们的目标就是从这个 user 对象中取出各种数据。

核心方法：使用点（）和方括号（[]）访问

这是最基本也是最常用的两种方式,它们可以满足绝大多数的取值需求。

使用点（）访问

当键名是有效的JavaScript标识符（由字母、数字、下划线或美元符号组成，且不以数字开头）时，可以使用点表示法。

示例：

console.log(user.name);      // 输出: 张三
console.log(user.isStudent); // 输出: false
console.log(user.courses);   // 输出: ["语文", "数学", "英语"]

优点：

• 语法简洁,可读性高。
• 支持代码编辑器的自动补全功能。

缺点：

• 键名中不能包含空格或特殊字符（如 , 等）。
• 键名必须是有效的标识符,不能是JavaScript关键字（如 if, for 等）。
• 无法使用变量来动态指定键名。

使用方括号（[]）访问

方括号访问法更为灵活和强大。

键名包含空格或特殊字符

const data = {
  "first name": "李四",
  "user-role": "admin"
};
console.log(data["first name"]); // 输出: 李四
console.log(data["user-role"]);  // 输出: admin

键名是JavaScript关键字或数字

const config = {
  "default": "blue",
  "123": "version number"
};
console.log(config["default"]); // 输出: blue
console.log(config["123"]);     // 输出: version number

使用变量动态访问键名（这是方括号最强大的功能！）

假设我们有一个变量,存储了要访问的键名。

const key = "name";
console.log(user[key]); // 输出: 张三
const courseIndex = 1;
console.log(user.courses[courseIndex]); // 输出: 数学

注意： 使用点表示法 user.key 是错误的，它会去寻找名为 "key" 的属性，而不是变量 key 的值。

处理嵌套对象和数组

JSON数据常常是嵌套的,访问嵌套结构只需将上述方法组合起来即可。

访问嵌套对象的值

使用连续的点或方括号来“”对象。

// 使用点表示法
console.log(user.address.city); // 输出: 北京
// 使用方括号表示法
console.log(user["address"]["district"]); // 输出: 海淀区

访问数组中的值

数组通过索引（从0开始）来访问元素，索引放在方括号里。

// 访问数组第一个元素
console.log(user.courses[0]); // 输出: 语文
// 访问数组的最后一个元素
console.log(user.courses[user.courses.length - 1]); // 输出: 英语

组合使用：访问嵌套在对象中的数组

这是最常见的场景之一。

// 访问用户的第一门课程
console.log(user.courses[0]); // 输出: 语文
// 访问用户地址的区
console.log(user.address.district); // 输出: 海淀区

安全访问：避免 TypeError

当尝试访问一个不存在的属性时,JavaScript会抛出 TypeError 并中断程序，这在实际开发中非常常见，比如从API返回的数据可能缺少某个字段。

const incompleteUser = { name: "王五" };
console.log(incompleteUser.age.toString()); // 报错: Cannot read properties of undefined (reading 'toString')

为了解决这个问题,有几种非常实用的方法。

可选链操作符（） - 现代JavaScript推荐

这是ES2020引入的特性,是目前最优雅、最简洁的安全访问方式，如果左侧的操作数为 null 或 undefined，表达式会短路并直接返回 undefined，而不会继续执行后面的代码。

const incompleteUser = { name: "王五" };
// 安全访问不存在的 age
console.log(incompleteUser.age?.toString()); // 输出: undefined，不会报错
// 安全访问嵌套属性
console.log(incompleteUser.address?.city); // 输出: undefined
// 安全访问数组
const emptyUser = {};
console.log(emptyUser.courses?.[0]); // 输出: undefined

注意： 可选链不能用在赋值语句的左侧（如 obj?.a = 1 是无效的）。

逻辑与操作符（&&） - 传统方法

在可选链普及之前,开发者常用 && 来实现类似的效果。

const incompleteUser = { name: "王五" };
const age = incompleteUser.age && incompleteUser.age.toString();
console.log(age); // 输出: undefined

这种方法虽然有效,但可读性较差，且当属性存在但为假值（如 0, , false）时也会短路，可能不符合预期。

使用 in 操作符判断属性是否存在

in 操作符用于检查一个对象是否具有某个属性（包括继承来的属性）。

const user = { name: "张三" };
console.log("name" in user);   // 输出: true
console.log("age" in user);    // 输出: false
// 可以结合条件判断
if ("address" in user) {
  console.log(user.address.city);
} else {
  console.log("用户没有地址信息");
}

遍历JSON对象的所有键值对

如果你想获取一个对象中的所有数据,而不是某一个特定的值，就需要使用循环。

for...in 循环

for...in 循环用于遍历对象自身及其原型链上可枚举的属性。

const user = { id: 101, name: "张三", isStudent: false };
for (const key in user) {
  // 使用 hasOwnProperty 可以确保只遍历对象自身的属性
  if (user.hasOwnProperty(key)) {
    const value = user[key];
    console.log(`键: ${key}, 值: ${value}`);
  }
}
// 输出:
// 键: id, 值: 101
// 键: name, 值: 张三
// 键: isStudent, 值: false

Object.keys(), Object.values(), Object.entries()

这三个是ES8引入的静态方法,非常实用。

• Object.keys(obj): 返回一个包含对象自身所有可枚举属性键名的数组。
• Object.values(obj): 返回一个包含对象自身所有可枚举属性值的数组。
• Object.entries(obj): 返回一个包含对象自身所有可枚举属性键值对数组的数组。

const user = { id: 101, name: "张三", isStudent: false };
console.log(Object.keys(user));   // 输出: ["id", "name", "isStudent"]
console.log(Object.values(user)); // 输出: [101, "张三", false]
console.log(Object.entries(user));
// 输出: [["id", 101], ["name", "张三"], ["isStudent", false]]
// 结合数组的 forEach 方法进行遍历
Object.entries(user).forEach(([key, value]) => {
  console.log(`键: ${key}, 值: ${value}`);
});

| 场景 | 推荐方法 | 示例