纯JavaScript下如何更简洁地判断深层嵌套节点是否存在

方案1：ES2020 可选链操作符（优先推荐） #

直接使用JS原生的可选链?.语法即可实现你要的简洁写法，不需要逐层校验父节点，任意一级为undefined/null时会直接返回undefined，不会抛出运行时错误：

// 校验存在有效length（length大于0时触发逻辑）
if (Grandparent?.Parent?.child?.prop3?.length) {
    // do something
}

// 若需要区分「length为0」和「属性不存在」的场景，使用如下写法
if (Grandparent?.Parent?.child?.prop3?.length !== undefined) {
    // 只要prop3存在length属性就触发逻辑，不限制length值大小
}

该方案无需额外封装，性能最优，目前所有现代浏览器、Node.js 14+、前端工程化项目都默认支持ES2020语法，旧环境可以通过Babel转译支持。

方案2：兼容全环境的自定义工具函数 #

如果需要兼容非常老旧的运行环境，不需要引入第三方库，自己封装一个通用的嵌套属性获取函数即可：

/**
 * 获取对象深层嵌套属性
 * @param {object} obj 目标对象
 * @param {array} path 属性路径数组
 * @param {*} defaultValue 不存在时返回的默认值
 * @returns {*} 属性值/默认值
 */
function getNestedValue(obj, path, defaultValue = undefined) {
  return path.reduce((current, key) => {
    return current != null && Object.prototype.hasOwnProperty.call(current, key) 
      ? current[key] 
      : defaultValue
  }, obj)
}

// 使用示例
const prop3Length = getNestedValue(Grandparent, ['Parent', 'child', 'prop3', 'length'])
if (prop3Length) {
    // do something
}

该方案兼容性最强，所有JS运行环境都可直接使用，支持自定义默认返回值。

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