Index

no-mixed-operators

禁止混合二元运算符

Important

This rule was deprecated in ESLint v8.53.0. It will be removed in v11.0.0. Please use the corresponding rule in @stylistic/eslint-plugin.

Learn more

用括号括起复杂的表达式可以明确开发者的意图，从而使代码更易读。该规则会在表达式中连续使用不同运算符而没有括号时发出警告。

🌐 Enclosing complex expressions by parentheses clarifies the developer’s intention, which makes the code more readable. This rule warns when different operators are used consecutively without parentheses in an expression.

var foo = a && b || c || d;    /*BAD: Unexpected mix of '&&' and '||'.*/
var foo = (a && b) || c || d;  /*GOOD*/
var foo = a && (b || c || d);  /*GOOD*/

注意： 预期此规则会针对每对混合运算符发出一个错误。因此，对于每两个连续使用的混合运算符，将显示一个不同的错误，指向违反规则的特定运算符的位置：

var foo = a && b || c || d;

会产生

🌐 will generate

1:13  Unexpected mix of '&&' and '||'. (no-mixed-operators)
1:18  Unexpected mix of '&&' and '||'. (no-mixed-operators)

规则详情

🌐 Rule Details

此规则检查 BinaryExpression、LogicalExpression 和 ConditionalExpression。

🌐 This rule checks BinaryExpression, LogicalExpression and ConditionalExpression.

此规则可能与 no-extra-parens 规则冲突。 如果你同时使用此规则和 no-extra-parens 规则，则需要使用 no-extra-parens 规则的 nestedBinaryExpressions 选项。

🌐 This rule may conflict with no-extra-parens rule. If you use both this and no-extra-parens rule together, you need to use the nestedBinaryExpressions option of no-extra-parens rule.

此规则的错误代码示例：

🌐 Examples of incorrect code for this rule:

在线运行 
/*eslint no-mixed-operators: "error"*/

var foo = a && b < 0 || c > 0 || d + 1 === 0;
var foo = a + b * c;

符合此规则的正确代码示例：

🌐 Examples of correct code for this rule:

在线运行 
/*eslint no-mixed-operators: "error"*/

var foo = a || b || c;
var foo = a && b && c;
var foo = (a && b < 0) || c > 0 || d + 1 === 0;
var foo = a && (b < 0 || c > 0 || d + 1 === 0);
var foo = a + (b * c);
var foo = (a + b) * c;

选项

🌐 Options

{
    "no-mixed-operators": [
        "error",
        {
            "groups": [
                ["+", "-", "*", "/", "%", "**"],
                ["&", "|", "^", "~", "<<", ">>", ">>>"],
                ["==", "!=", "===", "!==", ">", ">=", "<", "<="],
                ["&&", "||"],
                ["in", "instanceof"]
            ],
            "allowSamePrecedence": true
        }
    ]
}

此规则有 2 个选项。

🌐 This rule has 2 options.

  • groups（string[][]）- 指定要检查的操作符组。groups 选项是一个组列表，每个组是二元操作符的列表。默认操作符组定义为算术、按位、比较、逻辑和关系操作符。注意：三元操作符(?:) 可以是任何组的一部分，默认情况下允许与其他操作符混合使用。
  • allowSamePrecedence（boolean）- 指定是否允许在运算符优先级相同的情况下混合使用运算符。默认值是 true。

groups

以下运算符可用于 groups 选项：

🌐 The following operators can be used in groups option:

  • 算术运算符："+"、"-"、"*"、"/"、"%"、"**"
  • 按位运算符："&"、"|"、"^"、"~"、"<<"、">>"、">>>"
  • 比较运算符："=="、"!="、"==="、"!=="、">"、">="、"<"、"<="
  • 逻辑运算符："&&"、"||"
  • 合并操作符："??"
  • 关系运算符："in"、"instanceof"
  • 三元运算符: ?:

现在，考虑以下组配置：{"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]}。 在此配置中指定了 2 个组：按位运算符和逻辑运算符。 此规则仅检查运算符是否属于同一组。 在本例中，该规则检查按位运算符和逻辑运算符是否混合，但忽略所有其他运算符。

使用 {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]} 选项违反此规则的 错误 代码示例：

在线运行 
/*eslint no-mixed-operators: ["error", {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]}]*/

var foo = a && b < 0 || c > 0 || d + 1 === 0;
var foo = a & b | c;
在线运行 
/*eslint no-mixed-operators: ["error", {"groups": [["&&", "||", "?:"]]}]*/

var foo = a || b ? c : d;

var bar = a ? b || c : d;

var baz = a ? b : c || d;

使用 {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]} 选项的此规则的正确代码示例：

在线运行 
/*eslint no-mixed-operators: ["error", {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]}]*/

var foo = a || b > 0 || c + 1 === 0;
var foo = a && b > 0 && c + 1 === 0;
var foo = (a && b < 0) || c > 0 || d + 1 === 0;
var foo = a && (b < 0 ||  c > 0 || d + 1 === 0);
var foo = (a & b) | c;
var foo = a & (b | c);
var foo = a + b * c;
var foo = a + (b * c);
var foo = (a + b) * c;
在线运行 
/*eslint no-mixed-operators: ["error", {"groups": [["&&", "||", "?:"]]}]*/

var foo = (a || b) ? c : d;
var foo = a || (b ? c : d);

var bar = a ? (b || c) : d;

var baz = a ? b : (c || d);
var baz = (a ? b : c) || d;

allowSamePrecedence

使用 {"allowSamePrecedence": true} 选项的此规则的正确代码示例：

🌐 Examples of correct code for this rule with {"allowSamePrecedence": true} option:

在线运行 
/*eslint no-mixed-operators: ["error", {"allowSamePrecedence": true}]*/

// + and - have the same precedence.
var foo = a + b - c;

使用 {"allowSamePrecedence": false} 选项违反此规则的 错误 代码示例：

🌐 Examples of incorrect code for this rule with {"allowSamePrecedence": false} option:

在线运行 
/*eslint no-mixed-operators: ["error", {"allowSamePrecedence": false}]*/

// + and - have the same precedence.
var foo = a + b - c;

使用 {"allowSamePrecedence": false} 选项的此规则的 正确 代码示例：

🌐 Examples of correct code for this rule with {"allowSamePrecedence": false} option:

在线运行 
/*eslint no-mixed-operators: ["error", {"allowSamePrecedence": false}]*/

// + and - have the same precedence.
var foo = (a + b) - c;

何时不使用

🌐 When Not To Use It

如果你不想收到有关混合运算符的通知，那么禁用此规则是安全的。

🌐 If you don’t want to be notified about mixed operators, then it’s safe to disable this rule.

版本

此规则是在 ESLint v2.12.0 中引入。

资源