前端JavaScript基础训练系列一百二十七：运算符优先级

JavaScript 中的 && 和 || 运算符返回它们其中一个操作数的值，而非 true 或 false。在一个运算符两个操作数的情况下这比较好理解:

    var a = 42;
     var b = "foo";
     a && b; // "foo"
     a || b; // 42

那么两个运算符三个操作数呢?

    var a = 42;
     var b = "foo";
     var c = [1,2,3];
     a && b || c; // ???
     a || b && c; // ???

想知道结果就需要了解超过一个运算符时表达式的执行顺序。 这些规则被称为“运算符优先级”(operator precedence)。
估计大多数读者都会认为自己已经掌握了运算符优先级。这里我们秉承本系列丛书的一贯 宗旨，将对这个主题进行深入探讨，希望读者从中能有新的收获。
回顾前面的例子:

    var a = 42, b;
     b = ( a++, a );
     a;  // 43
     b;  // 43

如果去掉 ( ) 会出现什么情况? var a = 42, b;

b = a++, a;
     a;  // 43
     b;  // 42

为什么上面两个例子中 b 的值会不一样?
原因是 , 运算符的优先级比 = 低。所以 b = a++, a 其实可以理解为 (b = a++), a。前面说
过 a++ 有后续副作用(after side effect)，所以 b 的值是 ++ 对 a 做递增之前的值 42。 这只是一个简单的例子。请务必记住，用 , 来连接一系列语句的时候，它的优先级最低，
其他操作数的优先级都比它高。
回顾前面的一个例子:

    if (str && (matches = str.match( /[aeiou]/g ))) {
         // ..
}

这里对赋值语句使用( )是必要的，因为&&运算符的优先级高于=，如果没有( )对其中 的表达式进行绑定(bind)的话，就会执行作 (str && matches) = str.match…。这样会出 错，由于(str && matches)的结果并不是一个变量，而是一个undefined值，因此它不能

出现在 = 运算符的左边! 下面再来看一个更复杂的例子(本章后面几节都将用到):

    var a = 42;
     var b = "foo";
     var c = false;
     var d = a && b || c ? c || b ? a : c && b : a;
     d;      // ??

应该没有人会写出这样恐怖的代码，这只是用来举例说明多个运算符串联时可能出现的一 些常见问题。
上例的结果是 42，当然只要运行一下代码就能够知道答案，但是弄明白其中的来龙去脉更 有意思。
首先我们要搞清楚(a && b || c)执行的是(a && b) || c还是a && (b || c)?它们之间 有什么区别?

    (false && true) || true;    // true
     false && (true || true);    // false

事实证明它们是有区别的，false && true || true 的执行顺序如下: false && true || true; // true

(false && true) || true; // true
&& 先执行，然后是 ||。 那执行顺序是否就一定是从左到右呢?不妨将运算符颠倒一下看看:
true || false && false;
(true || false) && false;
true || (false && false);
// true
// false
// true

这说明 && 运算符先于 || 执行，而且执行顺序并非我们所设想的从左到右。原因就在于运 算符优先级。
每门语言都有自己的运算符优先级。遗憾的是，对 JavaScript 运算符优先级有深入了解的 开发人员并不多。
如果我们明白其中的道理，上面的例子就是小菜一碟。不过估计很多读者看到上面几个例 子时还是需要细细琢磨一番。