使用安全导航运算符累加数组长度时出现NaN问题的解决方法

当currentData?.subjects?.length或currentData?.delivery_method?.length对应的路径不存在时，可选链运算符会返回undefined。而undefined与数字相加会得到NaN，最终导致count变成非数字。

方法一：使用空值合并运算符（??）设置默认值 #

给每个长度表达式添加默认值0，确保即使路径不存在也会返回数字0：

let count = 0;
count += (currentData?.subjects?.length ?? 0) + (currentData?.delivery_method?.length ?? 0);

??运算符仅在左侧值为null或undefined时返回右侧的默认值，不会影响正常的数组长度（包括长度为0的情况）。

方法二：使用逻辑或（||）设置默认值 #

如果不需要区分0和undefined/null，也可以用逻辑或运算符：

let count = 0;
count += (currentData?.subjects?.length || 0) + (currentData?.delivery_method?.length || 0);

注意：如果数组确实存在但长度为0，||同样会返回0，这个场景下结果符合预期，但如果有其他假值（比如空字符串、false）可能会误判，不过数组长度只能是数字，所以这里也适用。

方法三：封装工具函数（更健壮） #

如果需要处理更多类似场景，或者要确保目标值确实是数组，可以封装一个工具函数：

function getArrayLength(arr) {
  return Array.isArray(arr) ? arr.length : 0;
}

let count = 0;
count += getArrayLength(currentData?.subjects) + getArrayLength(currentData?.delivery_method);

这个方法能避免非数组类型（比如对象、字符串）被误判为有长度的情况，让代码更可靠。

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