在此页

• Precedence And Associativity
• 范例
• Table
• 相关话题

运算符优先级 determines how operators are parsed concerning each other. Operators with higher precedence become the operands of operators with lower precedence.

Precedence And Associativity

Consider an expression describable by the representation below. Note that both OP ₁ and OP ₂ are fill-in-the-blanks for OPerators.

a OP1 b OP2 c
					

若 OP 1 and OP 2 have different precedence levels (see the table below), the operator with the highest precedence goes first and associativity does not matter. Observe how multiplication has higher precedence than addition and executed first, even though addition is written first in the code.

console.log(3 + 10 * 2);   // logs 23
console.log(3 + (10 * 2)); // logs 23 because parentheses here are superfluous
console.log((3 + 10) * 2); // logs 26 because the parentheses change the order
					

Left-associativity (left-to-right) means that it is processed as (a OP 1 b) OP 2 c , while right-associativity (right-to-left) means it is interpreted as a OP 1 (b OP 2 c) . Assignment operators are right-associative, so you can write:

a = b = 5; // same as writing a = (b = 5);
					

with the expected result that a and b get the value 5. This is because the assignment operator returns the value that is assigned. First, b is set to 5. Then the a is also set to 5, the return value of b = 5 , aka right operand of the assignment.

As another example, the unique exponentiation operator has right-associativity, whereas other arithmetic operators have left-associativity. It is interesting to note that, the order of evaluation is always left-to-right irregardless of associativity.

function echo(name, num) {
    console.log("Evaluating the " + name + " side");
    return num;
}
// Notice the division operator (/)
console.log(echo("left", 6) / echo("right", 2));
									

Evaluating the left side
Evaluating the right side
3
									

function echo(name, num) {
    console.log("Evaluating the " + name + " side");
    return num;
}
// Notice the exponentiation operator (**)
console.log(echo("left", 2) ** echo("right", 3));
									

Evaluating the left side
Evaluating the right side
8
									

The difference in associativity comes into play when there are multiple operators of the same precedence. With only one operator or operators of different precedences, associativity doesn't affect the output, as seen in the example above. In the example below, observe how associativity affects the output when multiple of the same operator are used.

function echo(name, num) {
    console.log("Evaluating the " + name + " side");
    return num;
}
// Notice the division operator (/)
console.log(echo("left", 6) / echo("middle", 2) / echo("right", 3));
									

Evaluating the left side
Evaluating the middle side
Evaluating the right side
1
									

function echo(name, num) {
    console.log("Evaluating the " + name + " side");
    return num;
}
// Notice the exponentiation operator (**)
console.log(echo("left", 2) ** echo("middle", 3) ** echo("right", 2));
									

Evaluating the left side
Evaluating the middle side
Evaluating the right side
512
									

function echo(name, num) {
    console.log("Evaluating the " + name + " side");
    return num;
}
// Notice the parentheses around the left and middle exponentiation
console.log((echo("left", 2) ** echo("middle", 3)) ** echo("right", 2));
									

Evaluating the left side
Evaluating the middle side
Evaluating the right side
64
									

Looking at the code snippets above, 6 / 3 / 2 如同 (6 / 3) / 2 because division is left-associative. Exponentiation, on the other hand, is right-associative, so 2 ** 3 ** 2 如同 2 ** (3 ** 2) . Thus, doing (2 ** 3) ** 2 changes the order and results in the 64 seen in the table above.

Remember that precedence comes before associativity. So, mixing division and exponentiation, the exponentiation comes before the division. For example, 2 ** 3 / 3 ** 2 results in 0.8888888888888888 because it is the same as (2 ** 3) / (3 ** 2) .

Note on grouping and short-circuiting

In the table below, Grouping is listed as having the highest precedence. However, that does not always mean the expression within the grouping symbols ( … ) is evaluated first, especially when it comes to short-circuiting.

Short-circuiting is jargon for conditional evaluation. For example, in the expression a && (b + c) , if a is falsy , then the sub-expression (b + c) will not even get evaluated, even if it is in parentheses. We could say that the logical disjunction operator ("OR") is "short-circuited". Along with logical disjunction, other short-circuited operators include logical conjunction ("AND"), nullish-coalescing, optional chaining, and the conditional operator. Some more examples follow.

a || (b * c);  // evaluate `a` first, then produce `a` if `a` is "truthy"
a && (b < c);  // evaluate `a` first, then produce `a` if `a` is "falsy"
a ?? (b || c); // evaluate `a` first, then produce `a` if `a` is not `null` and not `undefined`
a?.b.c;        // evaluate `a` first, then produce `undefined` if `a` is `null` or `undefined`
					

范例

3 > 2 && 2 > 1
// returns true
3 > 2 > 1
// Returns false because 3 > 2 is true, then true is converted to 1
// in inequality operators, therefore true > 1 becomes 1 > 1, which
//  is false. Adding parentheses makes things clear: (3 > 2) > 1.
					

Table

The following table is ordered from highest (21) to lowest (1) precedence.

• 最后修改： Aug 7, 2020

相关话题

1. JavaScript
2. 教程：
3. 完全初学者

   1. JavaScript 基础
   2. JavaScript 第一步
   3. JavaScript 构建块
   4. 引入 JavaScript 对象
4. JavaScript 指南

   1. 介绍
   2. 语法和类型
   3. 控制流程和错误处理
   4. 循环和迭代
   5. 函数
   6. 表达式和运算符
   7. 数字和日期
   8. 文本格式化
   9. 正则表达式
   10. 索引集合
   11. 键控集合
   12. Working with objects
   13. 对象模型的细节
   14. Using promises
   15. 迭代器和生成器
   16. Meta programming
   17. JavaScript 模块
5. 中间体

   1. Client-side JavaScript frameworks
   2. 客户端侧 Web API
   3. 重新介绍 JavaScript
   4. JavaScript 数据结构
   5. 相等比较和相同
   6. 闭包
6. 高级

   1. 继承和原型链
   2. 严格模式
   3. JavaScript 类型数组
   4. 内存管理
   5. 并发模型和事件循环
7. 参考：
8. 内置对象

   1. AggregateError
   2. Array
   3. ArrayBuffer
   4. AsyncFunction
   5. Atomics
   6. BigInt
   7. BigInt64Array
   8. BigUint64Array
   9. 布尔
   10. DataView
   11. Date
   12. Error
   13. EvalError
   14. FinalizationRegistry
   15. Float32Array
   16. Float64Array
   17. Function
   18. Generator
   19. GeneratorFunction
   20. Infinity
   21. Int16Array
   22. Int32Array
   23. Int8Array
   24. InternalError
   25. Intl
   26. JSON
   27. Map
   28. Math
   29. NaN
   30. Number
   31. Object
   32. Promise
   33. Proxy
   34. RangeError
   35. ReferenceError
   36. Reflect
   37. RegExp
   38. Set
   39. SharedArrayBuffer
   40. String
   41. Symbol
   42. SyntaxError
   43. TypeError
   44. TypedArray
   45. URIError
   46. Uint16Array
   47. Uint32Array
   48. Uint8Array
   49. Uint8ClampedArray
   50. WeakMap
   51. WeakRef
   52. WeakSet
   53. WebAssembly
   54. decodeURI()
   55. decodeURIComponent()
   56. encodeURI()
   57. encodeURIComponent()
   58. escape()
   59. eval()
   60. globalThis
   61. isFinite()
   62. isNaN()
   63. null
   64. parseFloat()
   65. parseInt()
   66. undefined
   67. unescape()
   68. uneval()
9. 表达式 & 运算符

   1. Addition (+)
   2. Addition assignment (+=)
   3. Assignment (=)
   4. Bitwise AND (&)
   5. Bitwise AND assignment (&=)
   6. Bitwise NOT (~)
   7. Bitwise OR (|)
   8. Bitwise OR assignment (|=)
   9. Bitwise XOR (^)
   10. Bitwise XOR assignment (^=)
   11. Comma operator (,)
   12. 条件 (三元) 运算符
   13. Decrement (--)
   14. Destructuring assignment
   15. Division (/)
   16. Division assignment (/=)
   17. Equality (==)
   18. Exponentiation (**)
   19. Exponentiation assignment (**=)
   20. 函数表达式
   21. Greater than (>)
   22. Greater than or equal (>=)
   23. Grouping operator ( )
   24. Increment (++)
   25. Inequality (!=)
   26. Left shift (<<)
   27. Left shift assignment (<<=)
   28. Less than (<)
   29. Less than or equal (<=)
   30. Logical AND (&&)
   31. Logical AND assignment (&&=)
   32. Logical NOT (!)
   33. Logical OR (||)
   34. Logical OR assignment (||=)
   35. Logical nullish assignment (??=)
   36. Multiplication (*)
   37. Multiplication assignment (*=)
   38. Nullish coalescing operator (??)
   39. 对象初始化器
   40. 运算符优先级
   41. Optional chaining (?.)
   42. Pipeline operator (|>)
   43. 特性访问器
   44. Remainder (%)
   45. Remainder assignment (%=)
   46. Right shift (>>)
   47. Right shift assignment (>>=)
   48. Spread syntax (...)
   49. Strict equality (===)
   50. Strict inequality (!==)
   51. Subtraction (-)
   52. Subtraction assignment (-=)
   53. Unary negation (-)
   54. Unary plus (+)
   55. Unsigned right shift (>>>)
   56. Unsigned right shift assignment (>>>=)
   57. 异步函数表达式
   58. await
   59. class expression
   60. delete operator
   61. function* 表达式
   62. in operator
   63. instanceof
   64. new operator
   65. new.target
   66. super
   67. this
   68. typeof
   69. void 运算符
   70. yield
   71. yield*
10. 语句 & 声明

    1. async function
    2. block
    3. break
    4. class
    5. const
    6. continue
    7. debugger
    8. do...while
    9. empty
    10. export
    11. for
    12. for await...of
    13. for...in
    14. for...of
    15. 函数声明
    16. function*
    17. if...else
    18. import
    19. import.meta
    20. label
    21. let
    22. return
    23. switch
    24. throw
    25. try...catch
    26. var
    27. while
    28. with
11. 函数

    1. 箭头函数表达式
    2. 默认参数
    3. 方法定义
    4. 其余参数
    5. 自变量对象
    6. getter
    7. setter
12. 类

    1. Private class fields
    2. Public class fields
    3. 构造函数
    4. extends
    5. static
13. 错误

    1. Error: Permission denied to access property "x"
    2. InternalError: too much recursion
    3. RangeError: argument is not a valid code point
    4. RangeError: invalid array length
    5. RangeError: invalid date
    6. RangeError: precision is out of range
    7. RangeError: radix must be an integer
    8. RangeError: repeat count must be less than infinity
    9. RangeError: repeat count must be non-negative
    10. ReferenceError: "x" is not defined
    11. ReferenceError: assignment to undeclared variable "x"
    12. ReferenceError: can't access lexical declaration`X' before initialization
    13. ReferenceError: deprecated caller or arguments usage
    14. ReferenceError: invalid assignment left-hand side
    15. ReferenceError: reference to undefined property "x"
    16. SyntaxError: "0"-prefixed octal literals and octal escape seq. are deprecated
    17. SyntaxError: "use strict" not allowed in function with non-simple parameters
    18. SyntaxError: "x" is a reserved identifier
    19. SyntaxError: JSON.parse: bad parsing
    20. SyntaxError: Malformed formal parameter
    21. SyntaxError: Unexpected token
    22. SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead
    23. SyntaxError: a declaration in the head of a for-of loop can't have an initializer
    24. SyntaxError: applying the 'delete' operator to an unqualified name is deprecated
    25. SyntaxError: for-in loop head declarations may not have initializers
    26. SyntaxError: function statement requires a name
    27. SyntaxError: identifier starts immediately after numeric literal
    28. SyntaxError: illegal character
    29. SyntaxError: invalid regular expression flag "x"
    30. SyntaxError: missing ) after argument list
    31. SyntaxError: missing ) after condition
    32. SyntaxError: missing : after property id
    33. SyntaxError: missing ; before statement
    34. SyntaxError: missing = in const declaration
    35. SyntaxError: missing ] after element list
    36. SyntaxError: missing formal parameter
    37. SyntaxError: missing name after . operator
    38. SyntaxError: missing variable name
    39. SyntaxError: missing } after function body
    40. SyntaxError: missing } after property list
    41. SyntaxError: redeclaration of formal parameter "x"
    42. SyntaxError: return not in function
    43. SyntaxError: test for equality (==) mistyped as assignment (=)?
    44. SyntaxError: unterminated string literal
    45. TypeError: "x" has no properties
    46. TypeError: "x" is (not) "y"
    47. TypeError: "x" is not a constructor
    48. TypeError: "x" is not a function
    49. TypeError: "x" is not a non-null object
    50. TypeError: "x" is read-only
    51. TypeError: 'x' is not iterable
    52. TypeError: More arguments needed
    53. TypeError: Reduce of empty array with no initial value
    54. TypeError: X.prototype.y called on incompatible type
    55. TypeError: can't access dead object
    56. TypeError: can't access property "x" of "y"
    57. TypeError: can't assign to property "x" on "y": not an object
    58. TypeError: can't define property "x": "obj" is not extensible
    59. TypeError: can't delete non-configurable array element
    60. TypeError: can't redefine non-configurable property "x"
    61. TypeError: cannot use 'in' operator to search for 'x' in 'y'
    62. TypeError: cyclic object value
    63. TypeError: invalid 'instanceof' operand 'x'
    64. TypeError: invalid Array.prototype.sort argument
    65. TypeError: invalid arguments
    66. TypeError: invalid assignment to const "x"
    67. TypeError: property "x" is non-configurable and can't be deleted
    68. TypeError: setting getter-only property "x"
    69. TypeError: variable "x" redeclares argument
    70. URIError: malformed URI sequence
    71. Warning: -file- is being assigned a //# sourceMappingURL, but already has one
    72. Warning: 08/09 is not a legal ECMA-262 octal constant
    73. Warning: Date.prototype.toLocaleFormat is deprecated
    74. Warning: JavaScript 1.6's for-each-in loops are deprecated
    75. Warning: String.x is deprecated; use String.prototype.x instead
    76. Warning: expression closures are deprecated
    77. Warning: unreachable code after return statement
14. 杂项

    1. JavaScript 技术概述
    2. 词法语法
    3. JavaScript 数据结构
    4. Enumerability and ownership of properties
    5. Iteration protocols
    6. 严格模式
    7. 过渡到严格模式
    8. 模板文字
    9. 弃用特征