JavaScript中如何优雅获取高度嵌套JSON对象的指定值？

首先需要注意：你当前的取值路径存在错误，对照给出的JSON结构，根节点r下第一层即为data节点，不存在第二层嵌套的data，原写法r['data']['data']['relationships']['product']['data']['id']会返回undefined，正确的原生路径为r.data.relationships.product.data.id。

针对多层链式访问冗长、且容易因中间节点为空抛出报错的问题，有以下几种常用优化方案：

1. 可选链操作符（ES2020 原生方案，优先推荐） #

可选链?.是JavaScript原生支持的语法，无需引入额外依赖，当访问链路中任意一个节点为null或undefined时，会自动短路返回undefined，不会抛出类型错误，写法简洁可读性高：

const productId = r?.data?.relationships?.product?.data?.id

兼容性说明：现代浏览器、Node.js 14+ 版本全量支持该语法，如果需要兼容IE等老旧环境，可通过Babel做语法转译。

2. 封装通用深度取值工具函数 #

如果需要兼容不支持可选链的运行环境，或者项目中存在大量深度取值场景，可以封装一个通用的按路径取值函数，支持自定义路径、兜底默认值：

function getDeepVal(obj, path, defaultValue = undefined) {
  const pathSegments = Array.isArray(path) 
    ? path 
    : path.split('.').filter(Boolean)
  let current = obj
  for (const key of pathSegments) {
    if (current === null || current === undefined) return defaultValue
    current = current[key]
  }
  return current === undefined ? defaultValue : current
}

// 使用方式
const productId = getDeepVal(r, 'data.relationships.product.data.id')
// 当属性名包含特殊字符（比如点、横杠）时，可传入数组格式路径
// const productId = getDeepVal(r, ['data', 'relationships', 'product', 'data', 'id'])
// 支持自定义兜底值，比如取不到时返回空字符串
// const productId = getDeepVal(r, 'data.relationships.product.data.id', '')

该方案零依赖、兼容性好，能覆盖绝大多数深度取值场景。

3. 嵌套解构赋值 #

如果可以100%确定访问链路中所有节点都存在、不会出现空值，也可以使用ES6嵌套解构的方式直接提取目标值：

const { data: { relationships: { product: { data: { id: productId } } } } } = r

如果无法保证节点一定存在，需要给每一层解构加空对象兜底，否则会抛出类型错误，但这种多层兜底的写法可读性较差，不推荐：

const { 
  data: { 
    relationships: { 
      product: { 
        data: { id: productId } = {} 
      } = {} 
    } = {} 
  } = {} 
} = r

内容的提问来源于stack exchange，提问作者KESHAV MAHESHWARI