添加判断后认知复杂度超标，如何重构函数降至允许值15？

添加card.targetUrl !== "/test"的判断条件后，代码出现认知复杂度超标错误，无法提交。当前代码如下：

const link = useMemo(() => {
  if (!card?.targetUrl || card.targetUrl === "/test") {
    return "/account";
  } else {
    return card.targetUrl;
  }
}, [card]);

未添加该判断的原始代码无此错误：

const link = useMemo(() => {
  if (card?.targetUrl) {
    return card.targetUrl;
  } else {
    return "/account";
  }
}, [card]);

请问如何将认知复杂度降至允许的15以内？

解决方案 #

可以通过简化逻辑表达式，将分支判断合并为单一表达式，减少代码的认知复杂度：

方案1：使用三元表达式 #

const link = useMemo(() => {
  return card?.targetUrl && card.targetUrl !== "/test" ? card.targetUrl : "/account";
}, [card]);

方案2：使用逻辑与/或组合 #

const link = useMemo(() => {
  return (card?.targetUrl !== "/test" && card.targetUrl) || "/account";
}, [card]);

这两种写法都将原有的if-else分支转化为线性的逻辑判断，消除了显式的分支嵌套，从而降低了代码的认知复杂度，同时完全保留了原有业务逻辑：

• 当card.targetUrl不存在，或者等于/test时，返回/account
• 其他情况返回card.targetUrl

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