JavaScript運算子及優先順序全攻略，點選立刻升級你的程式設計水平！

云端源想發表於2024-04-30
JavaScript程式設計

在程式設計的世界裡，運算子是構建邏輯、實現功能的重要工具。它能幫助我們完成各種複雜的計算和操作。

今天，我們就來深入探索JavaScript中運算子的奧秘，掌握它們的種類和優先順序，讓你的程式碼更加高效、簡潔！

一、什麼是運算子

運算子，顧名思義，就是用於執行特定操作的符號。

在JavaScript中，運算子用於對一個或多個值進行操作，並返回一個新的值。它們是程式語言中的基礎構件，幫助我們完成各種複雜的計算和邏輯判斷。

運算子可以分為多種型別，如算術運算子、關係運算子、邏輯運算子等。透過使用不同的運算子，我們可以實現各種複雜的計算和邏輯判斷，讓程式更加靈活、強大。

二、運算子的分類

1、算術運算子

用於執行數學計算，如加法、減法、乘法、除法等。常見的算術運算子有：+、-、*、/、%、++、–等。

+ 加法運算

  • 兩個字串進行加法運算，則作用是連線字串，並返回；

  • 任何字串 + “ ”空串做運算，都將轉換為字串，由瀏覽器自動完成，相當於呼叫了String （ ）。

-減法運算 *乘法運算 /除法運算

  • 先轉換為 Number 再進行正常的運算。

注意： 可以透過為一個值 -0 *1 /1 來將其轉換為Number資料型別，原理和Number ( )函式一樣。

%求餘運算

對一個數進行求餘運算

程式碼示例：

var num1 = 1;
       var num2 = 2;
        var res = num1-num2;  //返回值為  -1
        var res = num1*num2;  //返回值為  2
        var res = num1/num2;  //返回值為  0.5——js中的除法為真除法
        var res = num1%num2;  //返回值為  1
        console.log(res);

2、關係運算子

透過關係運算子可以比較兩個值之間的大小關係，如果關係成立它會返回true，如果關係不成立則返回false。常見的比較運算子有：==、！=、>、<、>=、<=等。

> 大於號

  • 判斷符號左側的值是否大於右側的值；
  • 如果關係成立，返回true，如果關係不成立則返回false。

>= 大於等於

  • 判斷符號左側的值是否大於或等於右側的值。

< 小於號

  • 判斷符號左側的值是否小於右側的值；
  • 如果關係成立，返回true，如果關係不成立則返回false。

<= 小於等於

  • 判斷符號左側的值是否小於或等於右側的值。

非數值的情況

  • 對於非數值進行比較時，會將其轉換為數字然後再比較。
  • 如果符號兩側的值都是字串時，不會將其轉換為數字進行比較，而會分別比較字串中字元的Unicode編碼。

== 相等運算子

  • 兩者的值相等即可。
  • 比較兩個值是否相等，相等返回 true，否則返回 flase。
  • 使用==來做相等運算

特殊：

console.log(null==0);  //返回 false
console.log(undefined == null); //返回true 因為 undefined衍生自null
console.log(NaN == NaN);  //返回  false   NaN不和任何值相等
isNan（） 函式來判斷一個值是否是NaN，是返回 true ，否則返回 false。

=== 全等

  • 兩者的值不僅要相等，而且資料型別也要相等。
  • 判斷兩個值是否全等， 全等返回 true 否則返回 false。

!= 不相等運算子

  • 只考量兩者的資料是否不等。
  • 比較兩個值是否不相等，不相等返回 true，否則返回 flas。
  • 使用==來做相等運算。

！== 不全等運算子

兩者的值不僅要不等，而且資料型別也要不等，才會返回true，否則返回false；

判斷兩個值是否不全等，不全等返回true，如果兩個值的型別不同，不做型別轉換直接返回true。

var num1 = 1;
        var num2 = '2';
        var res =(num1 !== num2);  //返回值  true
        console.log(res);

3、邏輯運算子

用於連線多個條件判斷，如與、或、非等。常見的邏輯運算子有：&&、||、！等。

&& 與

&&可以對符號兩側的值進行與運算並返回結果。

運算規則：

  • 兩個值中只要有一個值為false就返回false，只有兩個值都為true時，才會返回true；
  • JS中的“與”屬於短路的與，如果第一個值為false，則不會看第二個值。

|| 或

||可以對符號兩側的值進行或運算並返回結果

  • 兩個值中只要有一個true，就返回true；
  • 如果兩個值都為false，才返回false。
  • JS中的“或”屬於短路的或，如果第一個值為true，則不會檢查第二個值。

! 非

!可以用來對一個值進行非運算，所謂非運算就是值對一個布林值進行取反操作，true變false，false變true。

  • 如果對一個值進行兩次取反，它不會變化；
  • 如果對非布林值進行元素，則會將其轉換為布林值，然後再取反；
  • 所以我們可以利用該特點，來將一個其他的資料型別轉換為布林值；
  • 可以為一個任意資料型別取兩次反，來將其轉換為布林值；原理和Boolean()函式一樣；

非布林值的與 或 非

非布林值的與 或 非( 會將其先轉換為布林值， 再進行運算 )

程式碼示例如下：

var b1 = true;
        var b2 = false;
        var res = b1 && b2;  //返回值為 false
        var res = b1 || b2;   //返回值為true
        console.log(res);

4、賦值運算子

用於給變數賦值，如等於、加等於、減等於等。常見的賦值運算子有：=、+=、-=等。

將右側的值賦值給符號左側的變數。

=   右賦給左
+=    a+=5   等價於   a=a  +5;
-=     a-=5     等價於   a=a-5;
*=     a*=5     等價於   a=a*5;
/=     a/=5     等價於   a=a/5;
%=   a%=5   等價於   a=%+5;

5、其他運算子

還有一些特殊的運算子，如型別轉換運算子、位運算子等。這些運算子雖然不常用，但在特定場景下會發揮重要作用。

想要快速入門前端開發嗎？推薦一個前端開發基礎課程，這個老師講的特別好，零基礎學習無壓力，知識點結合程式碼，邊學邊練，可以免費試看試學，還有各種輔助工具和資料，非常適合新手！點這裡前往學習哦！

三、運算子的優先順序

在JavaScript中，不同型別的運算子具有不同的優先順序。優先順序高的運算子會先於優先順序低的運算子進行計算。瞭解運算子的優先順序，有助於我們編寫出正確、高效的程式碼。

以下是一些常見運算子的優先順序（從高到低）：

  • 括號：( )
  • 單目運算子：++、–、！、+、-、~、typeof等
  • 算術運算子：*、/、%、+、-等
  • 比較運算子：<、>、<=、>=、in、instanceof等
  • 相等運算子：==、！=、===、！==等
  • 邏輯運算子：&&、||等
  • 賦值運算子：=、+=、-=等

掌握了這些運算子及其優先順序，我們就可以根據實際需求靈活運用，編寫出更加高效、簡潔的程式碼。

透過了解JavaScript中的運算子及其優先順序，我們可以更好地編寫和理解程式碼。掌握這些知識，你將能更加自如地操縱資料，實現你想要的功能。

相關文章