如何取多层json中的值

如何取多层JSON中的值：从基础到进阶的完整指南

在数据处理中，JSON（JavaScript Object Notation）因其轻量、易读的特性，已成为前后端数据交互的主流格式，实际业务场景中，JSON数据往往嵌套多层（如对象中嵌套对象、数组中嵌套对象等），如何精准提取目标值成为开发中的常见问题，本文将从JSON的基础结构出发，结合代码示例，系统介绍取多层JSON值的多种方法,并总结实用技巧。

JSON基础结构与多层嵌套的本质

要提取多层JSON的值，首先需理解其结构，JSON的核心数据类型包括：

对象（Object）：无序键值对集合，用表示，如 {"name": "Alice", "info": {"age": 25}}；
数组（Array）：有序值列表，用 [] 表示，如 {"scores": [90, 85, {"math": 95}]}；
简单值：字符串、数字、布尔值、null等，如 {"city": "Beijing"}。

多层嵌套的本质：简单值被包裹在对象或数组中，形成“嵌套层级”。

{
  "user": {
    "name": "Bob",
    "contact": {
      "email": "bob@example.com",
      "phones": [
        {"type": "mobile", "number": "13800138000"},
        {"type": "home", "number": "01012345678"}
      ]
    }
  },
  "order": {
    "id": "ORD001",
    "items": [
      {"name": "Laptop", "price": 5999, "specs": {"cpu": "i5", "memory": "16GB"}},
      {"name": "Mouse", "price": 99, "specs": {"dpi": 1600}}
    ]
  }
}

此例中，email 在 user.contact 下（2层嵌套），phones[0].number 在 user.contact.phones 下（3层嵌套），items[1].specs.dpi 甚至在4层嵌套中。

取多层JSON值的核心方法

逐层访问法（基础：适用于已知结构）

原理：从根节点开始，逐层通过“键名（对象）”或“索引（数组）”向下访问，类似“打开俄罗斯套娃”。

示例1：对象嵌套对象

提取 email：

const data = { /* 上述JSON数据 */ };
const email = data.user.contact.email; // 逐层通过 . 访问键名
console.log(email); // 输出: bob@example.com

示例2：对象嵌套数组

提取第一个手机号（phones[0].number）：

const firstPhone = data.user.contact.phones[0].number;
console.log(firstPhone); // 输出: 13800138000

示例3：数组嵌套对象

提取订单中第二个商品的名字（items[1].name）：

const secondItemName = data.order.items[1].name;
console.log(secondItemName); // 输出: Mouse

注意事项：

键名或索引必须存在，否则会报错（如 data.user.contact.phone 会因 phone 不存在而返回 undefined，甚至抛出 TypeError）；
数组索引从 0 开始，越界访问会返回 undefined。

可选链操作符（?.）：安全访问嵌套值（ES2020+）

痛点：逐层访问时，若中间层不存在，代码会报错。

const address = data.user.contact.address.street; // 若 contact 没有 address，抛出 TypeError

解决方案：使用可选链操作符，它会“短路”判断——若左侧属性为 null 或 undefined，则停止访问并返回 undefined，而不会报错。

示例：

const street = data.user.contact?.address?.street; // 安全访问
console.log(street); // 输出: undefined（不会报错）

进阶用法：结合数组索引

const secondHomePhone = data.user.contact.phones?.[1]?.number;
console.log(secondHomePhone); // 输出: 01012345678

优势：代码更简洁，避免冗长的 if 判断（如 if (data.user.contact && data.user.contact.address) {...}）。

空值合并操作符（??）：处理默认值（ES2020+）

场景：当访问结果可能为 null 或 undefined 时，需提供默认值，用户可能未填写“家庭电话”，此时返回“未提供”。

解决方案：空值合并操作符，仅在左侧为 null 或 undefined 时返回右侧默认值（区别于，会将、0、false 等视为“假值”）。

示例：

const homePhone = data.user.contact.phones?.[1]?.number ?? "未提供";
console.log(homePhone); // 输出: 01012345678（若 phones[1].number 为 undefined，则返回“未提供”）

结合可选链：

const fax = data.user.contact.fax ?? "无传真";
console.log(fax); // 输出: 无传真（若 contact 没有 fax，返回默认值）

动态访问键名（适用于键名变量）

场景：键名是动态变量（如通过用户输入、API 返回参数确定），无法直接用访问。

解决方案：

对象：用方括号 [] 动态访问键名（如 data[user][contact]）；
数组：用变量作为索引（如 data.items[index]）。

示例：

const contactKey = "contact";
const emailKey = "email";
const email = data.user[contactKey][emailKey]; // 动态键名访问
console.log(email); // 输出: bob@example.com
const itemIndex = 0;
const itemName = data.order.items[itemIndex].name;
console.log(itemName); // 输出: Laptop

注意：

动态键名需确保是字符串类型（若变量为数字，JS 会自动转为字符串）；
若键名包含特殊字符（如空格、连字符），必须用 [] 且键名加引号（如 data["user-name"]）。

递归遍历（适用于未知层级或批量提取）

场景：JSON 结构复杂且层级不固定（如无限嵌套的对象），或需提取所有符合条件的目标值（如提取所有手机号）。

解决方案：递归函数遍历JSON，通过 typeof 判断值类型，对对象或数组继续递归。

示例1：提取所有手机号

function getAllPhones(data, result = []) {
  if (typeof data !== "object" || data === null) return; // 简单值直接返回
  // 检查当前对象是否包含手机号（假设手机号键为 "number"）
  if (data.number && data.type) {
    result.push(data.number);
  }
  // 递归遍历对象属性
  for (const key in data) {
    if (typeof data[key] === "object" && data[key] !== null) {
      getAllPhones(data[key], result);
    }
  }
  return result;
}
const phones = getAllPhones(data);
console.log(phones); // 输出: ["13800138000", "01012345678"]

示例2：提取指定路径的值（路径动态生成）

function getValueByPath(data, path) {
  return path.split('.').reduce((acc, key) => {
    // 处理数组索引（如 "phones[0]"）
    const arrayMatch = key.match(/(\w+)\[(\d+)\]/);
    if (arrayMatch) {
      const [, arrayKey, index] = arrayMatch;
      return acc?.[arrayKey]?.[parseInt(index)];
    }
    return acc?.[key];
  }, data);
}
const path = "user.contact.phones[0].number";
const phone = getValueByPath(data, path);
console.log(phone); // 输出: 13800138000

第三方库（简化复杂操作）

当JSON结构非常复杂或需频繁操作时，第三方库能大幅简化代码，以下是常用工具：

（1）Lodash（`_.get` 方法）

_.get 可通过路径字符串安全获取嵌套值，

企鹅直播企鹅直播足球直播爱奇艺直播爱奇艺足球直播足球直播足球直播

正文

如何取多层json中的值