Do not nest ternary expressions no-nested-ternary 这个报错什么意思

ESLint 规则 no-nested-ternary 当检测到代码中存在嵌套的三元表达式时，会发出警告或错误。该规则旨在通过禁止使用嵌套的三元表达式来提升代码的可读性和可维护性，因为随着条件复杂度的增加，深度嵌套的三元表达式往往会变得难以理解和推理。

三元表达式：三元表达式是 JavaScript 中一种简化的 if-else 结构，包含三个部分：

条件 ? 表达式1 : 表达式2

它首先评估 条件，如果为真，则返回 表达式1 的值；否则返回 表达式2 的值。

嵌套的三元表达式：当一个三元表达式置于另一个三元表达式内部时，就形成了嵌套的三元表达式。以下是一个简单的示例：

const result = condition1 ?
  value1 :
  condition2 ?
    value2 :
    value3;

在此例中，如果 condition1 为真，result 将被赋值为 value1。若 condition1 为假，则进一步检查 condition2：若为真，则赋值 result 为 value2，否则赋值为 value3。

no-nested-ternary 规则：no-nested-ternary 规则禁止使用嵌套的三元表达式。启用此规则后，每当代码中出现嵌套的三元表达式时，它将发出 linting 错误或警告，提示你应重构代码以消除嵌套。

该规则的目的是提倡编写更整洁、易读的代码，鼓励使用易于理解且易于维护的替代结构。针对该规则，可采用以下几种方式重构嵌套的三元表达式：

1. 使用独立的 if-else 语句：

   let result;
   
   if (condition1) {
     result = value1;
   } else if (condition2) {
     result = value2;
   } else {
     result = value3;
   }
   

2. 使用逻辑运算符（&&、||）简化条件判断（仅适用于简单逻辑关系）：

   const result = condition1 ? value1 : (condition2 ? value2 : value3);
   

3. 提取到单独的函数或方法，特别是当嵌套的逻辑较为复杂时，将判断逻辑封装在一个具有明确命名的函数中，有助于提高代码的可读性和可维护性：

   function determineResult(condition1, condition2) {
     // ... 根据条件逻辑计算并返回结果
   }
   
   const result = determineResult(condition1, condition2);
   

遵循 no-nested-ternary 规则，通过合理重构，可以避免使用嵌套的三元表达式，从而提升代码的清晰度和可维护性。