如何修复ESLint报错：可选链上的不安全算术运算可能导致NaN？

我需要检查一个返回HTML Element的对象，判断其是否包含类名“is-visible”，但代码触发了ESLint错误。尝试添加可选链操作符后问题仍未解决。

原代码 #

const objVisible = (obj) =>
  obj.Components.Elements.slides[0].classList.contains("is-visible") &&
  obj.Components.Elements.slides[tags?.length - 1].classList.contains(
    "is-visible"
  );

修改后代码（仍有ESLint错误） #

const objVisible = (obj) =>
  obj?.Components?.Elements?.slides[0]?.classList.contains("is-visible") &&
  obj?.Components?.Elements?.slides[tags?.length - 1]?.classList.contains(
    "is-visible"
  );

问题分析与修复方案 #

核心问题点 #

• tags?.length - 1的NaN隐患：当tags为undefined或空数组时，tags?.length返回undefined，undefined - 1会得到NaN，用NaN作为数组索引会取到undefined，ESLint会判定这种索引访问不安全。
• 可选链方法调用触发规则：部分ESLint规则（如no-unsafe-optional-chaining）会认为，若可选链某一环返回undefined，后续调用方法属于风险操作，即使语法合法也会触发警告。

修复方案 #

方案1：处理合法索引，避免NaN

先计算有效的最后一项索引，从源头消除无效索引问题：

const objVisible = (obj) => {
  // 确保索引为有效数字，tags不存在时默认取最后一个slide
  const lastSlideIndex = tags?.length ? tags.length - 1 : (obj?.Components?.Elements?.slides?.length || 0) - 1;
  const firstSlide = obj?.Components?.Elements?.slides[0];
  const lastSlide = obj?.Components?.Elements?.slides[lastSlideIndex];

  // 仅当两个slide都存在且包含目标类名时返回true
  return firstSlide?.classList.contains("is-visible") && lastSlide?.classList.contains("is-visible");
};

方案2：前置空值判断，简化链式调用

提前检查关键节点是否存在，减少可选链的使用，同时消除ESLint警告：

const objVisible = (obj) => {
  const slides = obj?.Components?.Elements?.slides;
  // 先判断slides是否存在且有内容
  if (!slides || slides.length === 0) return false;

  const firstSlide = slides[0];
  // 处理tags边界，默认取最后一个slide
  const lastSlideIndex = tags?.length ? tags.length - 1 : slides.length - 1;
  const lastSlide = slides[lastSlideIndex];

  // 已确认slide是HTML元素，可安全调用classList
  return firstSlide.classList.contains("is-visible") && lastSlide.classList.contains("is-visible");
};

方案3：临时忽略ESLint规则（不推荐长期使用）

若业务逻辑能保证所有链式节点一定存在，可在代码行上方添加注释忽略警告：

const objVisible = (obj) =>
  // eslint-disable-next-line no-unsafe-optional-chaining
  obj?.Components?.Elements?.slides[0]?.classList.contains("is-visible") &&
  // eslint-disable-next-line no-unsafe-optional-chaining
  obj?.Components?.Elements?.slides[tags?.length ? tags.length -1 : 0]?.classList.contains(
    "is-visible"
  );

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