菜菜菜的前端學習日誌 - Day14

運算子

運算子大家應該都很了解

運算子的優先序

那這些運算子的優先順序呢？！
小學大家應該都學過先乘除、後加減
那其他的就讓我們來看看

首先優先順序最高的會是()，()內的運算式會優先被執行

再來是* / %，就像我們學過的乘除會先運算

下面就是+ -啦

接下來的順序是

> >= < <=
== != === !==
&& AND運算會再OR運算之前
||
?:最後才是判斷式的運算

實際驗證

先來個簡單到小學生都會的

var a =2, b=3, c=4, d=5;
(a + b) * c + d;
//()內先執行，然後先乘除後加減
//沒錯！答案就是25

再來進階一點的

var a = 3;
var b = 5;
var c = true;
var d = false;
var e = "false";

a > b || c && d == e

答案會是什麼呢?我們來看一下怎麼運算
首先>會先運算，a > b會是 false
接下來 d == e 他是寬鬆相等，會強制轉型去比較值是否相同，所以會是true
再來就是c && true運算會是true
最後就是前面的false || true運算
得到的最終結果就是false啦!!!

最後來一個複雜一點的做收尾

var a = 3;
var b = 5;
var c = true;
var d = false;
var e = "false";

a > b || c ? c && d || a < b ? c == e && d : a >= b === e : c || d

看到這運算式直覺就會覺得吃飽太閒才這樣寫
但是為了能夠更清楚地知道運算子的優先順序還是來看一下好了哈哈

首先因為裡面有判斷式所以我們先從第一個?前面開始看

a > b || c         //a > b是false ，false || c會是True

判斷是true所以就要來執行下面這段

c && d || a < b ? c == e && d : a >= b === e 

同樣的是一個判斷式，所以先執行?前面的程式

c && d || a < b
//首先執行 a < b會得到 true
//接下來執行 c && d 得到 false
//最後 false || true 得到 true

得到true後就來執行以下這段

 c == e && d 
// c == e會先運算得到false，因為值跟型態都不一樣
// 再來運算false && d 得到了最終的答案就是false

呼～ 得到答案啦
其實這運算式看似很複雜，但只要弄清楚他的優先順序會發現其實並不難呢