JavaScript如何通过点分隔文本键动态获取JSON对应属性值

问题场景 #

现有解析完成的JSON对象，需要根据外部传入的点分隔格式键路径（例如"Design.Wheel"）获取对应属性值，原有硬编码固定层级索引的写法仅支持固定深度的路径，无法适配动态变化的层级。原始示例代码如下：

let carStr = `{
  "_id": "Tesla-200",
  "Design": {
    "Wheel": "Black",
    "Seat": "4",
    "Speed": "200"
  }
}`;
let car = JSON.parse(carStr);

let key = "Design.Wheel";
let keys = key.split(".");
let value = car[keys[0]][keys[1]]; // 硬编码两层索引，无法适配动态层级
console.log(value);

实现方法 #

方法1：原生循环遍历（无依赖，全环境兼容） #

核心逻辑是将点分隔的键路径拆分为键名数组后，从最外层对象开始逐层向内查找，每轮循环将当前查找的对象替换为当前键对应的值，直到遍历完所有键名，即可得到最终结果。

/**
 * 按点分隔路径获取嵌套对象属性值
 * @param {Object} target 待查找的目标对象
 * @param {string} keyPath 点分隔格式的键路径
 * @param {*} defaultValue 路径不存在时返回的默认值
 * @returns 路径对应的值，路径不存在时返回默认值
 */
function getNestedValue(target, keyPath, defaultValue = undefined) {
  // 拆分键路径，过滤空键名（兼容误输入多余点号的场景）
  const keys = keyPath.split('.').filter(key => key.trim() !== '');
  let current = target;
  for (const key of keys) {
    // 中途遇到null/undefined说明路径不存在，直接返回默认值
    if (current === null || current === undefined) {
      return defaultValue;
    }
    current = current[key];
  }
  return current === undefined ? defaultValue : current;
}

// 调用示例
const value = getNestedValue(car, "Design.Wheel");
console.log(value); // 输出: Black

该方法的优势：

• 无任何额外依赖，兼容所有JS运行环境
• 支持任意深度的嵌套路径，传入"Design.Seat"、"_id"等不同长度的路径都能正常返回结果
• 可自行扩展逻辑，比如支持数组索引、键名包含点号的转义规则等

方法2：reduce+可选链写法（现代JS环境适用） #

如果运行环境支持ES2020可选链操作符（?.），可以用更简洁的写法实现：

const getNestedValue = (target, keyPath, defaultValue = undefined) => {
  const result = keyPath.split('.').reduce((current, key) => current?.[key], target);
  return result === undefined ? defaultValue : result;
};

注意：该写法在低版本浏览器、Node.js 14以下版本中无法直接运行，需要确认环境兼容性后使用。

注意事项 #

• 如果业务中的键名本身包含.字符，不能直接用split('.')拆分，需要提前约定转义规则（例如用\.标识键名内部的点），拆分时先处理转义字符再分割
• 如果路径中包含数组下标（例如"Design.Color.0"），上述两种写法都可以正常支持，数组下标会被当做键名直接读取，不需要额外处理

内容的提问来源于stack exchange，提问作者Bishal Heuju