JS趴趴往上走-運算式與運算子篇

-

運算式與運算子


運算式是由運算元與運算子組成，可以取得值
運算子則是對變數或值進行操作的字元

 var a=1+3;
上列透過=賦值，而右側分別為
1+3:運算式
1,3:運算元
+:運算子

JavsScript有以下運算子
  • 算數運算子
  • 賦值運算子
  • 比較運算子
  • 位元運算子
  • 邏輯運算子
  • 字串運算子
  • 條件運算子
  • 逗點運算子
  • 一元運算子
  • 關係運算子

有關運算子可以參考MDN


算數運算子

此為最常見的運算子，也跟我們息息相關，就是小時候就學過的「加、減、乘、除」，其功能就和數學一樣(比較特別的是，在除數為0時 Infinity)

加號


 var a=1+3; 
 console.log(a);//4

減號


 var a=2-1; 
 console.log(a);//1

乘法


 var a=2*3; 
 console.log(a);//6

除法


 var a=6/3; 
 console.log(a);//2

餘數


 var a=9%2;
 console.log(a);//1


而除數為0時

 var a=6/0; 
 console.log(a);//Infinity

而除0得到的餘數

 var a=9%0;
 console.log(a);//NaN
NaN:Not a number
在使用不是數字的時候，使用Number()，會得到這種結果

 Number("HELLO"); //NAN

另外若是使用字串的話

 100+"100"  //"100123"

 100*"100"  //10000

 "200"-100  //100

 "300"/100  //3

 500%"40"  //20
你會發現，除了加號，其他的JavaScript會先在背後透過Number()，轉成數字再進行運算


比較運算式

在語法上=為賦值，那等於該怎麼寫呢

 var a=1;
 var b=1;

//假如a等於b就會回傳true
 a==b //true;
就是用雙等於==

有等於就有不等於!=，由1個驚嘆號!和1個等於=組成

 var a=1;
 var b=2;

 //假如a不等於b就會回傳true
 a!=b;  //true

還有我們的大於>、小於<、大於等於>=、小於等於<=

 2>1 //true

 1<3 //true

 2>=1 //true

 3<=4 //true

在上面我們知道，JavaScript會把字串轉成數字在執行，但有時候我們要確認是否為數字還是字串的時候，嚴格等於===就會派上用場

 var a=1;
 var b="1";

 a==b; //true
 a===b; //false

或者確認boolean值

 var a=true;

 a==1; //true
 a===1; //false
有嚴格等於===就有嚴格不等於!==


邏輯運算式

邏輯運算式是有OR值||、AND值&&以及NOT!

OR||:當運算式1是true回傳前面，如果是false，則回傳運算式2，因此||只要其中一個是true就會回傳

 var a=1<3 4="" a="" code="" console.log="" false="" true="">

AND&&:則是兩個運算式都要為true才會回傳

 //前者是true後者是false
 var a=1<3 3="" 4="" a="" b="" code="" console.log="" false="" true="" var="">

NOT! :回傳相反值

 var a= !true;   //a不等於true
 console.log(a);  //false


var b=!false; //b不等於false
console.log(b); //true;


賦值運算子

就是我們常用的=，使用於把右方的的運算元賦值給予左方

 var a=1;
 var b=a;
 console.log(b); //1

加法賦值:

 var a=1;
 a+=2;  //a+2

 console.log(a); //3

減法賦值:

 var a=1;
 a-=2;  //a-2

 console.log(a); //-1

遞增++加一以及遞減--減一

 var a=1;
 a++;      //a+1
 console.log(a); //2




 var a=4;
 a--;      //a-1
 console.log(a); //3




這邊要提醒，有些運算是從右邊開始計算的
所以說

 var a=123;
 function test(){
   var b=a=456;
   console.log(b); //答案是456
}

test();
console.log(a); //答案是456


我們可以從這張圖知道
MDN

紅色部分為運算優先層級，數字愈高，先執行的就愈高
綠色部分為運算方向，right-to-light是從右到左，而light-to-right則是從左到右


從圖片的橘色箭頭我們知道=的運算方是從右方開始賦值，所以a先計算了=456，接著宣告一個變數b=a
所以會變成

 var a=123;
 function test(){
   a=456;
   var b=a;
   console.log(b); //答案是456
}

test();
console.log(a); //答案是456


大家有興趣了解運算子的優先順序和運算方式可以到MDN參考哦!

留言

張貼留言