使用 else if 处理 ESLint 规则

Question

我有这个代码 else/if 代码

       if (_.has($scope.item, 'comment_id')) {

          track(one);

        } else if (_.has($scope.item, 'post_id')) {

          track(two);

        } else {

          if ($scope.followers) {

            track(three);

          } else {

            track(four);

          }

        }

但是 Eslint 想让我把它变成这个

        if (_.has($scope.item, 'comment_id')) {

          track(one);

        } else if (_.has($scope.item, 'post_id')) {

          track(two);

        } else if ($scope.followers) {

          track(three);

        } else {

          track(four);

        }

它们是一样的吗？

Answer 1

是的，它们是等价的。ESLint 足够聪明，可以检测到这一点并因此提出建议。原因是您在构造中实际上只有四种选择if/else- 当代码不匹配前两个条件中的任何一个时，它将始终执行外部else {&nbsp; if ($scope.followers) {&nbsp; &nbsp; track(three);&nbsp; } else {&nbsp; &nbsp; track(four);&nbsp; }}这只会导致两件事之一发生。提取if ($scope.followers)aselse if遵循完全相同的逻辑路径。通过抽象出条件并生成真值表，然后检查结果，可以很容易地证明这一点。它可以在纸上完成，但由于您已经有了代码，因此也很容易将其制作为代码：function nested(a, b, c) {&nbsp; if (a) {&nbsp; &nbsp; return "track(one)";&nbsp; } else if (b) {&nbsp; &nbsp; return "track(two)";&nbsp; } else {&nbsp; &nbsp; if (c) {&nbsp; &nbsp; &nbsp; return "track(three)";&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; return "track(four)";&nbsp; &nbsp; }&nbsp; }}function chained(a, b, c) {&nbsp; if (a) {&nbsp; &nbsp; return "track(one)";&nbsp; } else if (b) {&nbsp; &nbsp; return "track(two)";&nbsp; } else if (c) {&nbsp; &nbsp; return "track(three)";&nbsp; } else {&nbsp; &nbsp; return "track(four)";&nbsp; }}const truthTable = [&nbsp; [false, false, false],&nbsp; [false, false, true ],&nbsp; [false, true , false],&nbsp; [false, true , true ],&nbsp; [true , false, false],&nbsp; [true , false, true ],&nbsp; [true , true , false],&nbsp; [true , true , true ],];for(const [a, b, c] of truthTable) {&nbsp; const nestedResult = nested(a, b, c);&nbsp; console.log(`called nested() with&nbsp;&nbsp; a=${a}&nbsp; b=${b}&nbsp; c=${c}&nbsp; result: ${nestedResult}`);&nbsp;&nbsp;&nbsp; const chainedResult = chained(a, b, c);&nbsp; console.log(`called nested() with&nbsp;&nbsp; a=${a}&nbsp; b=${b}&nbsp; c=${c}&nbsp; result: ${chainedResult}`);&nbsp;&nbsp;&nbsp; console.log(`matching results?: ${nestedResult === chainedResult}`);&nbsp;&nbsp;&nbsp; console.log(`------------------------`);}或者，您可以生成一个实际的真值表来可视化结果：function nested(a, b, c) {&nbsp; if (a) {&nbsp; &nbsp; return "track(one)";&nbsp; } else if (b) {&nbsp; &nbsp; return "track(two)";&nbsp; } else {&nbsp; &nbsp; if (c) {&nbsp; &nbsp; &nbsp; return "track(three)";&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; return "track(four)";&nbsp; &nbsp; }&nbsp; }}function chained(a, b, c) {&nbsp; if (a) {&nbsp; &nbsp; return "track(one)";&nbsp; } else if (b) {&nbsp; &nbsp; return "track(two)";&nbsp; } else if (c) {&nbsp; &nbsp; return "track(three)";&nbsp; } else {&nbsp; &nbsp; return "track(four)";&nbsp; }}const truthTable = [&nbsp; [false, false, false],&nbsp; [false, false, true ],&nbsp; [false, true , false],&nbsp; [false, true , true ],&nbsp; [true , false, false],&nbsp; [true , false, true ],&nbsp; [true , true , false],&nbsp; [true , true , true ],];const enrich = truthTable&nbsp; .map(row => row.concat(nested(...row), chained(...row))) //add the results of the two calls&nbsp; .map(row => row.concat(row[row.length-1] === row[row.length-2])) //compare the last twoconst table = document.querySelector("table");for (const rowData of enrich) {&nbsp; const newRow = table.insertRow(-1);&nbsp; for (const rowValue of rowData) {&nbsp; &nbsp; const cell = newRow.insertCell(-1);&nbsp; &nbsp; cell.textContent = rowValue;&nbsp; }}table {&nbsp; border-collapse: collapse;}table, th, td {&nbsp; border: 1px solid black;}<table>&nbsp; <tr>&nbsp; &nbsp; <th>a</th>&nbsp; &nbsp; <th>b</th>&nbsp; &nbsp; <th>c</th>&nbsp; &nbsp; <th>nested result</th>&nbsp; &nbsp; <th>chained result</th>&nbsp; &nbsp; <th>results equal</th>&nbsp; </tr></table>