安全访问可能为undefined的对象嵌套属性的最佳实践

示例代码存在几处笔误：对象属性间缺少分隔逗号、属性行尾误用分号、访问Y轴坐标时错写为x${iY}，实际运行需先修正为y${iY}。

以下是不同场景下的通用方案，按推荐优先级排序：

• 现代项目首选：可选链操作符（ES2020 原生支持）
  这是目前行业内的标准简洁写法，只需在可能为null/undefined的属性访问节点前加?，操作符会自动触发短路逻辑：只要中间某级属性不存在，就直接返回undefined，不会继续向后访问属性抛出错误。
  改写后的代码如下：

  let oUsed = {
    "x1":{
      "y2": true,
      "y3": true
    },
    "x3":{
      "y2": true
    }
  }
  let iY = 2;
  
  for (let iX=1;iX <= 3; iX++) {
    // 自动判断x层级是否存在，不存在则直接返回undefined，不会抛错
    if (oUsed[`x${iX}`]?.[`y${iY}`]) {
      break;
    }
  }
  

  该方案支持任意层级的属性访问，比如三层嵌套可以直接写obj?.a?.[b]?.c，不需要逐层写判断；如果需要兼容IE等老旧浏览器，搭配Babel转译即可正常运行。

• 老旧环境通用方案：封装复用安全取值函数
  如果项目没有构建转译流程、需要直接在老旧环境运行，可以封装一个通用的嵌套取值函数，一次封装即可覆盖所有多层属性访问场景，支持自定义兜底值：

  function safeGet(obj, pathArr, defaultValue = undefined) {
    let current = obj;
    for (const key of pathArr) {
      if (current === null || current === undefined) return defaultValue;
      current = current[key];
    }
    return current === undefined ? defaultValue : current;
  }
  
  // 场景使用示例
  for (let iX=1;iX <= 3; iX++) {
    const isBlocked = safeGet(oUsed, [`x${iX}`, `y${iY}`], false);
    if (isBlocked) break;
  }
  

• 轻量场景简化写法：逻辑与短路判断
  如果只有两层属性访问，不想引入额外语法或封装，可以用&&的短路特性简化嵌套if判断，写法比双层if简洁很多：

  for (let iX=1;iX <= 3; iX++) {
    if (oUsed[`x${iX}`] && oUsed[`x${iX}`][`y${iY}`]) {
      break;
    }
  }
  

  注意该方案不适合3层及以上的嵌套场景，否则会出现a && a.b && a.b.c && a.b.c.d这类冗余难读的代码，可读性反而下降。

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