社区首页 >专栏 >【JavaScript】JavaScript 运算符 ⑤ ( 运算符优先级 )

【JavaScript】JavaScript 运算符 ⑤ ( 运算符优先级 )

韩曙亮

发布于 2024-03-23 00:39:39

37800

代码可运行

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

运行总次数：0

代码可运行

一、JavaScript 运算符优先级

1、运算符优先级概念

JavaScript 的运算符是有 " 优先级 " 的 , " 运算符优先级 " 决定一个表达式中多个运算符的执行顺序 ;

一个表达式中 , 有多个运算符 , " 运算符优先级 " 决定了哪个运算符首先与操作数结合 ;

运算符优先级不同 : 优先级较高的运算符比优先级较低的运算符先与操作数结合 ;
运算符优先级相同 : 运算符的优先级相同 , 则根据运算符的结合性判定哪个先与操作数结合 ;

小括号优先级最高 , 可以直接改变运算符的结合性 ;

一元运算符的优先级仅次于小括号 ;

2、运算符优先级列举

下面的运算符优先级按照从上到下顺序 , 优先级由高到低 ;

JavaScript 中的运算符优先级顺序 :

括号运算符 :
- 小括号运算符 () 可以直接用于改变正常的运算符的优先级顺序 ;
一元运算符 : 下面的运算符优先级相同 ;
- 递增运算符 ++ : 前置递增 / 后置递增 ;
- 递减运算符 -- : 前置递减 / 后置递减 ;
- 一元加运算符 +
- 一元减运算符 -
- 逻辑非运算符 !
算术运算符 :
- 乘除运算符 : 下面的运算符优先级相同 ;
  - 乘法运算符 *
  - 除法运算符 /
  - 取模运算符 %
- 加减运算符 : 下面的运算符优先级相同 ;
  - 加法运算符 +
  - 减法运算符 -
- 位移运算符 : 下面的运算符优先级相同 ;
  - 左移运算符 <<
  - 右移运算符 >>
  - 无符号右移运算符 >>>
- 关系运算符 :
  - 小于运算符 <
  - 大于运算符 >
  - 小于等于运算符 <=
  - 大于等于运算符 >=
- 相等运算符 :
  - 等于运算符 ==
  - 不等于运算符 !=
  - 严格等于运算符 ===
  - 严格不等于运算符 !==
- 逻辑运算符 : && 操作符优先级高于 || 操作符 ;
  - 逻辑与运算符 &&
  - 逻辑或运算符 ||
- 赋值运算符 :
  - 赋值运算符 =
  - 加法赋值运算符 +=
  - 减法赋值运算符 -=
  - 乘法赋值运算符 *=
  - 除法赋值运算符 /=
  - 取模赋值运算符 %=
  - 左移赋值运算符 <<=
  - 右移赋值运算符 >>=
- 逗号运算符 ,

3、运算符示例

在下面的代码中 , 分析代码中表达式的运算符优先级 ;

var exp = 2 > 3 || "Tom" == "Jerry" && !(2 * 3 == 6) && false
console.log(exp)

分析上述表达式 2 > 3 || "Tom" == "Jerry" && !(2 * 3 == 6) && false 中的运算符优先级 :

小括号运算符优先级最高 , (2 * 3 == 6) 中的运算符是结合在一起进行运算的 ; 2 * 3 == 6 中 , 算术运算符 * 优先级高于相等运算符 == 优先级 , 先计算乘法得到 6 , 然后计算 == 是否相等 , 最终得到 true 值 ;

2 > 3 || "Tom" == "Jerry" && !(true) && false

一元运算符 ! 高于除小括号意外的其它运算符 , 然后计算该运算 , !true 得到 false ;

2 > 3 || "Tom" == "Jerry" && false && false

2 > 3 中的 > 优先级是目前最高的 , 计算得到结果 false ;

false || "Tom" == "Jerry" && false && false

"Tom" == "Jerry" 中的 == 运算符目前优先级最高 , 计算得到结果 false ;

false || false && false && false

逻辑与 && 运算符优先级高于逻辑或 || 运算符 , 先计算 && 运算 , 有多个 && 运算 , 从左到右结合即可 ;

false || false

最后计算逻辑或 || 操作 , 得到 false 结果 ;

完整代码如下 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 运算符优先级

        var exp = 2 > 3 || "Tom" == "Jerry" && !(2 * 3 == 6) && false
        console.log(exp)
    </script>
</head>

<body>
</body>

</html>