“JavaScript⾥的很多奇技淫巧,都来⾃于对运算符的灵活使⽤。”
说到运算符的优先级，我们往往会想到一张见过无数次却从来没背下来的表。因为没背下来， 所以往往会认为它很简单，只要拿不准的时候去看看就好。我曾经也是这么认为的，直到在一个明媚的下午，我对着这张遍，遇到了几个问题。我才发现我其实并没有把它搞定。
《如晴天，似雨天》希望你也能有一个阳光明媚的下午，来解开心中的这些困惑。
1 运算符基础
我们先看一下完整的JavaScript运算符优先级表(文章最后，移动端锚点链接不好用，手滑下去吧)
这张表说明了两个问题：
1.1 优先级: 优先级高的运算符最先被执行
问题： 1 || 1 ? 2 : 3 ;
答案：2
解析：||的优先级高
相当于： （1 || 1 ）? 2 : 3
而不是： 1 || （1 ? 2 : 3 ）
复制代码1.2 关联性: 运算符执行时的方向。是从左向右，还是从右向左
问题：+function (){var a = b = 1;}();
console.log(b);
console.log(a);
答案：1 error
解析：赋值从右到左，var a = b = 1所以相当于
b = 1;
var a = b;
那有同学可能会问，为什么不是？
var b = 1;
var a = b;
还记得变量提升吗？var a = b = 1;在变量提升的时候，只会把a去声明，并不会执行赋值中的b。
所以要想把b也声明了就需要按照语法 var a=1 , b ;
复制代码现在我们仔细把优先级的题改一下
1 || fn() && fn()
复制代码MDN上写的是优先级高的运算符最先被执行，我们都知道 ||是短路的，后边不会执行。那么这个最先被执行的含义是什么呢？
1.3 短路:
- && 运算符的短路(a && b)：如果a为假，b就不用执行了
- | | 运算符的短路(a || b)：如果a为真，b就不用执行了
问题：1 || fn() && fn()
答案：1 fn不会执行
解析：就是利用&&运算符的短路原理啊。
复制代码讲到这有些同学会觉得很简单啊，就是这样啊，看到短路后边就不用算了啊。也有的同学可能会有点懵，不是说好了， 优先级高的先被执行吗？明明&&的优先级高啊。哈哈，别吵吵，我们一起看下一题。
问题：var a = 42;
var b = "foo";
var c = 0;
c || b ? a : b ; // 42
复制代码刚才说短路的同学可能会说还是要参考优先级。刚才说优先级的同学可能一脸懵逼，静静地不想说话。那么我们开始今天的学习吧。
2 绑定
定义：运算符的优先级高先执行，并不是真正的执行，而是更强的绑定。
我们用上面来两个问题
1 || fn() && fn() // &&的优先级高，所以将后边的绑定
1 ||（fn() && fn()） // 所以相当于1 和（fn() && fn()）的值去逻辑或
1 ||（fn() && fn()） // 我们查表，逻辑或从左到右执行。
1 ||（fn() && fn()） // 左执行，1是真值，所以短路，后边不执行
复制代码 问题： var a = 42;
var b = "foo";
var c = 0;
c || b ? a : b ;
答案：42
解析：c || b ? a : b ; //查表 条件运算符权重是4，逻辑与符权重是6，所以逻辑与有更强的绑定
(c || b )? a : b ; //(c || b )相当于条件运算符里的条件
(c || b )? a : b ; //(c || b )值是0 ，所以值是 a
复制代码好，我们在做两题巩固一下
问题： var a = 5;
var b = 5;
var c = 5+a+++b;
[ a , c ]
答案： [6, 15]
解析： b = 5+a+++b; //查表 后置递增权重17 前置递增权重16
b = 5 +（a++）+ b; //++优先级更高，所以和绑定a绑定在一起
b = 5 +（a++）+ b; //根据语法后置递增先执行语句，后递增
b = 5 +（a++）+ b; //执行语句时a是5，所以b是15
b = 5 +（a++）+ b; //a在进行自增，得到6
复制代码 问题： var a = 5;
var b = 5;
var c = ++a-b;
[ a , c ]
答案： [6, 1]
解析： var c = ++a-b; //查表 前置递增权重和一元减权重都是16，从左往右执行
var c = ++a-b; //根据语法前置递增先递增，后执行语句 a = 6
var c = ++a-b; //执行语句时a是6，所以b是1
复制代码看到这，同学们可能恍然大悟，就这么回事啊。别急，我们来看下一题。 要解决这个问题，需要我们理解下一节的概念。
问题： var a = 42;
var b = "foo";
var c = 0;
a && b || c ? c || b ? a : c && b : a
复制代码3 关联
定义：运算符的关联性去定义表达式的处理方向
来，用题说话
问题：a && b && c 的执行顺序
解析：（1）两个运算符都是&&，权重一样。所以这个时候就要看关联性。
（2）查表 &&的关联性是从左到右
（3）所以表达式应该是 （ a && b ） && c
复制代码 问题：a ？ b ：c ？ d : e 的执行顺序
解析：（1）两个运算符都是条件运算符，权重一样。所以这个时候就要看关联性。
（2）查表条件运算符的关联性是从右到左
（3）所以表达式应该是 a ？ b ：（c ？ d : e ）
复制代码好了，现在我们就可以轻松解决上面那个问题啦。
问题： var a = 42;
var b = "foo";
var c = 0;
a && b || c ? c || b ? a : c && b : a
答案： 42
解析：(a && b) || c ? c || b ? a :(c && b) : a //首先查表逻辑与权重是6最高
((a && b) || c) ? c || b ? a :(c && b) : a //然后是逻辑或
((a && b) || c) ? （c || b ? a :(c && b)） : a //两个条件运算符，权重一样。关联性从右到左
复制代码啊、、有没有很开心 最后的最后，我们来讲一个释疑
4 释疑
哈哈，释疑顾名思义就是解释调疑惑的地方，那最好的办法就是加（）。
如果你能够熟练运用优先级／关联的规则，你的代码能更简洁，许多框架都是这样写的，非常漂亮。
但是你要叫不准，那就加（）吧，千万别逞能，美其名曰有助于代码的可阅读性。
| 优先级 | 运算类型 | 关联性 | 运算符 |
|---|---|---|---|
| 20 | 圆括号 | n/a | ( … ) |
| 19 | 成员访问 | 从左到右 | … . … |
| 需计算的成员访问 | 从左到右 | … [ … ] | |
| new (带参数列表) | n/a | new … ( … ) | |
| 函数调用 | 从左到右 | … ( … ) | |
| 18 | new (无参数列表) | 从右到左 | new … |
| 17 | 后置递增(运算符在后) | n/a | … ++ |
| 后置递减(运算符在后) | … -- | ||
| 16 | 逻辑非 | 从右到左 | ! … |
| 按位非 | ~ … | ||
| 一元加法 | + … | ||
| 一元减法 | - … | ||
| 前置递增 | ++ … | ||
| 前置递减 | -- … | ||
| typeof | typeof … | ||
| void | void … | ||
| delete | delete … | ||
| await | await … | ||
| 15 | 幂 | 从右到左 | … ** … |
| 14 | 乘法 | 从左到右 | … * … |
| 除法 | … / … | ||
| 取模 | … % … | ||
| 13 | 加法 | 从左到右 | … + … |
| 减法 | … - … | ||
| 12 | 按位左移 | 从左到右 | … << … |
| 按位右移 | … >> … | ||
| 无符号右移 | … >>> … | ||
| 11 | 小于 | 从左到右 | … < … |
| 小于等于 | … <= … | ||
| 大于 | … > … | ||
| 大于等于 | … >= … | ||
| in | … in … | ||
| instanceof | … instanceof … | ||
| 10 | 等号 | 从左到右 | … == … |
| 非等号 | … != … | ||
| 全等号 | … === … | ||
| 非全等号 | … !== … | ||
| 9 | 按位与 | 从左到右 | … & … |
| 8 | 按位异或 | 从左到右 | … ^ … |
| 7 | 按位或 | 从左到右 | … | … |
| 6 | 逻辑与 | 从左到右 | … && … |
| 5 | 逻辑或 | 从左到右 | … || … |
| 4 | 条件运算符 | 从右到左 | … ? … : … |
| 3 | 赋值 | 从右到左 | … = … |
| … += … | |||
| … -= … | |||
| … *= … | |||
| … /= … | |||
| … %= … | |||
| … <<= … | |||
| … >>= … | |||
| … >>>= … | |||
| … &= … | |||
| … ^= … | |||
| … |= … | |||
| 2 | yield | 从右到左 | yield … |
| yield* | yield* … | ||
| 1 | 展开运算符 | n/a | ... … |
| 0 | 逗号 | 从左到右 | … , … |
参考：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
