如何优雅处理JavaScript解析JSON得到的对象含null时的嵌套取值报错问题

方案1：使用ES2020 可选链操作符（最推荐） #

• 可选链?.会自动判断左侧的值是否为null/undefined，如果是就直接返回undefined，不会抛出类型错误，完美覆盖路径上任意节点为空的场景：

// 基础用法，取不到值时publicationDay为undefined
let publicationDay = val?.["work-summary"]?.[0]?.["publication-date"]?.["day"]?.["value"];

// 搭配空值合并操作符??可以设置默认值，避免得到undefined
// ??只会在左侧值为null/undefined时触发默认值，不会覆盖0、''等合法 falsy 值
let publicationDay = val?.["work-summary"]?.[0]?.["publication-date"]?.["day"]?.["value"] ?? null;

• 支持情况：所有现代浏览器（Chrome 80+/Firefox 72+/Safari 13.1+）、Node 14+ 都原生支持，需要兼容低版本环境可通过Babel转译实现。

方案2：自定义嵌套属性取值工具函数（全环境兼容） #

如果项目不支持ES2020新语法，可以封装通用的嵌套取值函数，无需手写多层if判断：

/**
 * 嵌套获取对象属性值
 * @param {Object} obj 目标对象
 * @param {Array} pathArr 属性路径数组
 * @param {*} defaultValue 取值失败时返回的默认值
 * @returns {*} 取到的属性值或默认值
 */
function getNestedVal(obj, pathArr, defaultValue = null) {
  return pathArr.reduce((current, key) => {
    return (current !== null && current !== undefined) ? current[key] : defaultValue;
  }, obj);
}

// 调用示例
let publicationDay = getNestedVal(val, ["work-summary", 0, "publication-date", "day", "value"]);

该函数会自动遍历路径的每一层，任意一层为空都会直接返回设置的默认值，不会抛出错误。

方案3：第三方工具类方法 #

如果项目已经引入Lodash工具库，可以直接使用内置的get方法，逻辑和自定义函数一致：

let publicationDay = _.get(val, ["work-summary", 0, "publication-date", "day", "value"], null);

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