近几天一直在看《你不知道的js》一书,看到预算符中有一点思考,写下来给有相同困惑的人一个参考。
先看代码
var a = 42;
var b = "foo"
var c = false;
var d = a && b || c ? c || b ? a : c && b : a;
console.log(d); // 42
上面的代码结果是 42 。有些人一眼能看出来,但是其中的运算顺序是怎么样子的可能深究的人真的不多。
首先 我们先弄明白,'&&'、'||'、'? :' 这三种运算符的优先级。
1.短路运算符的优先级('&&'和'||')
false && true || true; // true;
false || true && true; // true;
上面返回的都是true,但是其中的运算优先级是不一样的,上面的代码都是先计算'&&'在计算'||'。不是从左到右依次的。
(false && true) || true; // true;
false || (true && true); // true;
用()标出计算优先级之后,就清晰很多。
2.三目运算符('? :')和短路运算符的运算规则
短路运算符 a && b 或者 a || b 都是左联的运算规则,即先计算符号左边的,在计算符号右边的。
a && b && c
a || b || c
// 用()标出优先级后
(a && b ) && c
(a || b) || c
这里的代码,每一行中用的都是一样的短路运算符,就会遵循js中默认的从左至右依次计算的默认顺序。
但是三目运算符不同,三目运算都是按照右联的运算规则。
a ? b : c ? d : e;
// 用()标出优先级后
a ? b : (c ? d : e);
短路运算符和三目运算符,因为默认计算的顺序是不一样的,在实际操作中,请注意每种运算符的执行顺序这会让返回的计算结果不同。
我们用三目运算符来举例:
var a = true, b = false, c = true, d = true, e = false;
a ? b :( c ? d : e); // false,执行a,b
(a ? b : c) ? d : e; // false,执行a,b,e
再看代码
var a = 42;
var b = "foo"
var c = false;
var d = a && b || c ? c || b ? a : c && b : a;
运用我们学会的优先级,先用()标出:
var d = ((a && b) || c) ? ((c || b) ? a : (c && b)) : a;
让我们逐一的简化代码
// 1
var d = (b || c) ? ((c || b) ? a : c) : a;
// 2
var d = b ? (b ? a : c) : a;
// 3
var d = b ? a : a;
// 4
var d = a;
console.log(d); // 42
上述代码都是《你不知道的javaScript》中卷的内容,本人只是整理而已。如有误,望斧正。