关于javaScript中的运算符优先级的思考

259 阅读2分钟

近几天一直在看《你不知道的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》中卷的内容,本人只是整理而已。如有误,望斧正。