JavaScript用三元运算符操作DOM避免空值报错的写法是否合理？

现有写法的可行性与问题 #

你的写法确实可以实现需求，不会在元素不存在时抛出错误，元素存在时也能正确赋值，但存在两个明显缺陷：

• 属于取巧的非标准写法，可读性极低，其他维护人员很难第一时间理解你创建临时数组的作用
• 会产生无意义的临时数组内存开销，虽然量级极小，但属于完全不必要的冗余操作

更优的解决方案 #

1. 标准if判断（最推荐） #

逻辑最清晰，没有任何冗余，是工业界的通用写法：

if (submitCodeContent) {
  submitCodeContent.disabled = true;
  submitCodeContent.style.backgroundColor = "#886A6C";
}

2. 可选链简洁写法 #

如果你偏好更短的代码，且项目兼容ES2020+语法（所有现代浏览器均支持），可以用可选链操作符：

// 分开写单个属性
submitCodeContent?.disabled = true;
submitCodeContent?.style.backgroundColor = "#886A6C";

// 合并为单行用逗号表达式，不需要创建临时数组
submitCodeContent && (
  submitCodeContent.disabled = true,
  submitCodeContent.style.backgroundColor = "#886A6C"
);

3. 批量设置工具函数（多属性赋值场景复用） #

如果后续有大量类似的元素属性赋值需求，可以封装通用工具函数提升复用性：

function setElementProps(el, commonProps = {}, styleProps = {}) {
  if (!el) return;
  // 赋值通用属性
  Object.entries(commonProps).forEach(([prop, value]) => {
    el[prop] = value;
  });
  // 赋值样式属性
  Object.entries(styleProps).forEach(([prop, value]) => {
    el.style[prop] = value;
  });
}

// 调用示例
setElementProps(
  submitCodeContent,
  { disabled: true },
  { backgroundColor: "#886A6C" }
);

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