JS學習筆記#4 | 運算子與運算符

更新於 發佈於 閱讀時間約 9 分鐘

在 JavaScript 中,邏輯運算子和比較運算子是用於條件判斷的重要工具。它們常被用來進行邏輯運算和比較數值或變數,進一步決定程式的執行流程。

1.算術運算子 (Arithmetic Operators)

用來執行數學運算,如加法、減法等。

  • + (加法):將兩個數字相加,或將字串連接起來。
    console.log(5 + 3); // 輸出: 8
    console.log("Hello " + "World"); // 輸出: "Hello World"
  • - (減法):將兩個數字相減。
    console.log(10 - 5); // 輸出: 5
  • * (乘法):將兩個數字相乘。
    console.log(4 * 2); // 輸出: 8
  • / (除法):將一個數字除以另一個數字。
    console.log(10 / 2); // 輸出: 5
  • % (取餘數):返回兩個數字相除後的餘數。
    console.log(10 % 3); // 輸出: 1
  • ++ (遞增):將變數的值增加 1。
    let x = 5;
    x++;
    console.log(x); // 輸出: 6
  • -- (遞減):將變數的值減少 1。
    let y = 5;
    y--;
    console.log(y); // 輸出: 4


2.賦值運算子 (Assignment Operators)

用於給變數賦值。

  • =:簡單賦值,將右側的值賦予左側的變數。
    let x = 10; // 將 10 賦值給 x
  • +=:加法賦值,將右側的值與左側變數相加,並賦值給左側變數。
    let x = 5;

    x += 3; // 等同於 x = x + 3; x 現在是 8
  • -=:減法賦值,將右側的值從左側變數減去,並賦值給左側變數。
    let x = 5;

    x -= 2; // 等同於 x = x - 2; x 現在是 3
  • *=:乘法賦值,將右側的值與左側變數相乘,並賦值給左側變數。
    let x = 5;

    x *= 2; // 等同於 x = x * 2; x 現在是 10
  • /=:除法賦值,將左側變數除以右側的值,並賦值給左側變數。
    let x = 10;

    x /= 2; // 等同於 x = x / 2; x 現在是 5
  • %=:取餘數賦值,將左側變數對右側的值取餘數,並賦值給左側變數。
    let x = 10;

    x %= 3; // 等同於 x = x % 3; x 現在是 1
  • **=:指數賦值,將左側變數的值提升到右側的值次方,並賦值給左側變數。
    let x = 2;

    x **= 3; // 等同於 x = x ** 3; x 現在是 8


3.比較運算子 (Comparison Operators)

用於比較兩個值,返回布林值 (truefalse)。

  • == (等於):比較兩個值是否相等(不比較資料型態)。
    console.log(5 == "5"); // 輸出: true
  • === (全等於):比較兩個值及其型態是否完全相等。
    console.log(5 === "5"); // 輸出: false
  • != (不等於):比較兩個值是否不相等(不比較資料型態)。
    console.log(5 != "5"); // 輸出: false
  • !== (不全等於):比較兩個值及其型態是否不相等。
    console.log(5 !== "5"); // 輸出: true
  • > (大於):判斷左邊的值是否大於右邊的值。
    console.log(10 > 5); // 輸出: true
  • < (小於):判斷左邊的值是否小於右邊的值。
    console.log(5 < 10); // 輸出: true
  • >= (大於或等於):判斷左邊的值是否大於或等於右邊的值。
    console.log(5 >= 5); // 輸出: true
  • <= (小於或等於):判斷左邊的值是否小於或等於右邊的值。
    console.log(5 <= 10); // 輸出: true


4.邏輯運算子 (Logical Operators)

用於組合多個布林值或比較結果,返回布林值。

  • && (AND):若兩個條件都為 true,則返回 true,否則返回 false
    console.log(true && false); // false
    console.log(10 > 5 && 5 < 10); // 輸出: true
  • || (OR):若任一條件為 true,則返回 true,只有當所有條件都為 false 時才返回 false
    console.log(true || false); // true
    console.log(10 > 5 || 5 > 10); // 輸出: true
  • ! (NOT):反轉布林值,true 變成 falsefalse 變成 true
    console.log(!true); // false
    console.log(!false); // 輸出: true


5.位元運算子( Bitwise Operators )

位元運算子用於操作二進位數字。將數字轉換為二進位(0 和 1),然後逐位執行運算。位元運算在底層開發和效能優化中很有用,常見於系統編程、加密演算法、圖像處理等領域。它們能夠提高某些運算的效率,特別是在處理大量數據時。

  • & (Bitwise AND)
    將兩個數字的每一位進行 AND 運算,只有當兩位都是 1 時,結果才為 1。
    let a = 5;  // 二進位: 0101
    let b = 3; // 二進位: 0011
    console.log(a & b); // 輸出: 1 (二進位: 0001)
  • | (Bitwise OR)
    將兩個數字的每一位進行 OR 運算,只要有一位為 1,結果就是 1。
    let a = 5;  // 二進位: 0101
    let b = 3; // 二進位: 0011
    console.log(a | b); // 輸出: 7 (二進位: 0111)
  • ^ (Bitwise XOR)
    將兩個數字的每一位進行 XOR 運算,當兩位不同時,結果為 1;相同時,結果為 0。
    let a = 5;  // 二進位: 0101
    let b = 3; // 二進位: 0011
    console.log(a ^ b); // 輸出: 6 (二進位: 0110)
  • ~ (Bitwise NOT)
    對每一位執行 NOT 運算,將 0 變成 1,1 變成 0。注意,這會對結果進行補碼運算(即變成負數)。
    let a = 5;  // 二進位: 0101
    console.log(~a); // 輸出: -6 (補碼運算)
  • << (Left Shift)
    將數字的位元向左移動,右邊補 0。每移動一位,相當於乘以 2。
    let a = 5;  // 二進位: 0101
    console.log(a << 1); // 輸出: 10 (二進位: 1010)
  • >> (Sign-propagating Right Shift)
    將數字的位元向右移動,保留符號位(正負號),左邊補上符號位的值(0 或 1)。
    let a = -5;  // 二進位: 11111111111111111111111111111011 (32-bit 表示)
    console.log(a >> 1); // 輸出: -3 (二進位: 11111111111111111111111111111101)
  • >>> (Zero-fill Right Shift)
    將數字的位元向右移動,左邊補 0。這種運算不會保留符號位,適合無符號位元操作。
    let a = -5;  // 二進位: 11111111111111111111111111111011 (32-bit 表示)
    console.log(a >>> 1); // 輸出: 2147483645 (二進位: 01111111111111111111111111111101)


留言
avatar-img
留言分享你的想法!
avatar-img
koko的沙龍
1會員
34內容數
koko的沙龍的其他內容
2025/04/30
React 事件處理:讓網頁動起來~ 網頁的互動性是吸引使用者、提供良好體驗的關鍵。 在 React 中,透過監聽使用者的操作(例如點擊、滑鼠移動、鍵盤輸入),並執行相應的程式碼,來實現豐富的互動效果。
Thumbnail
2025/04/30
React 事件處理:讓網頁動起來~ 網頁的互動性是吸引使用者、提供良好體驗的關鍵。 在 React 中,透過監聽使用者的操作(例如點擊、滑鼠移動、鍵盤輸入),並執行相應的程式碼,來實現豐富的互動效果。
Thumbnail
2025/04/28
在 React 的世界裡,Props 負責從父元件向子元件傳遞資料,而 State 則是負責管理元件自身的內部資料。 State 就像元件的記憶,可以儲存元件的狀態,並根據狀態的變化來更新 UI。
Thumbnail
2025/04/28
在 React 的世界裡,Props 負責從父元件向子元件傳遞資料,而 State 則是負責管理元件自身的內部資料。 State 就像元件的記憶,可以儲存元件的狀態,並根據狀態的變化來更新 UI。
Thumbnail
2025/04/27
在 React 的世界裡,元件 (Component) 就像一個個獨立的個體,各自負責 UI 的一部分,要讓這些個體協同工作,就需要一種溝通的機制,而 Props 就是組件之間通信和數據傳遞的主要方式。
Thumbnail
2025/04/27
在 React 的世界裡,元件 (Component) 就像一個個獨立的個體,各自負責 UI 的一部分,要讓這些個體協同工作,就需要一種溝通的機制,而 Props 就是組件之間通信和數據傳遞的主要方式。
Thumbnail
看更多
你可能也想看
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
本章節將介紹比較器(Comparator)這類用於判斷兩組二進位數值之間大小關係的組合邏輯電路。比較器在數位系統中廣泛應用於數位排序、選擇控制、資料驗證與決策電路中,是理解邏輯運算與條件判斷的重要模組。 透過本章學習,你將掌握數位邏輯中的條件判斷核心邏輯。
Thumbnail
本章節將介紹比較器(Comparator)這類用於判斷兩組二進位數值之間大小關係的組合邏輯電路。比較器在數位系統中廣泛應用於數位排序、選擇控制、資料驗證與決策電路中,是理解邏輯運算與條件判斷的重要模組。 透過本章學習,你將掌握數位邏輯中的條件判斷核心邏輯。
Thumbnail
本章將介紹 C 語言的運算子 (Operators),這是程式語言的基礎,負責執行數值計算、條件判斷與邏輯運算。我們將最先學習變數在記憶體中的樣子,這是非常重要的觀念,接著漸入到算術運算、關係運算、邏輯運算、位元運算與三元運算子等,並透過 運算子優先順序 來確保正確的運算執行順序。
Thumbnail
本章將介紹 C 語言的運算子 (Operators),這是程式語言的基礎,負責執行數值計算、條件判斷與邏輯運算。我們將最先學習變數在記憶體中的樣子,這是非常重要的觀念,接著漸入到算術運算、關係運算、邏輯運算、位元運算與三元運算子等,並透過 運算子優先順序 來確保正確的運算執行順序。
Thumbnail
在 JavaScript 中,邏輯運算子和比較運算子是用於條件判斷的重要工具。 它們常被用來進行邏輯運算和比較數值或變數,進一步決定程式的執行流程。
Thumbnail
在 JavaScript 中,邏輯運算子和比較運算子是用於條件判斷的重要工具。 它們常被用來進行邏輯運算和比較數值或變數,進一步決定程式的執行流程。
Thumbnail
本文介紹了 Dart 程式語言中的邏輯運算符,包括邏輯 AND(&&)、邏輯 OR(||)和邏輯 NOT(!)。這些運算符用於控制程式流程和判斷條件,幫助開發者根據布林變數的真偽執行相應的程式碼。透過範例,讀者可以了解如何使用這些運算符來判斷天氣和週末狀況,並掌握基本的條件判斷語法。
Thumbnail
本文介紹了 Dart 程式語言中的邏輯運算符,包括邏輯 AND(&&)、邏輯 OR(||)和邏輯 NOT(!)。這些運算符用於控制程式流程和判斷條件,幫助開發者根據布林變數的真偽執行相應的程式碼。透過範例,讀者可以了解如何使用這些運算符來判斷天氣和週末狀況,並掌握基本的條件判斷語法。
Thumbnail
接下來來看 AND、OR、NOT 是怎麼被實際運用的!
Thumbnail
接下來來看 AND、OR、NOT 是怎麼被實際運用的!
Thumbnail
介紹條件控制流程,包含組成它的比較運算子、條件運算式、條件語句。 繼講解完邏輯運算之後,我們終於要開始認識控制流程的其中之一:條件(Condition)。 如同在程式的邏輯思維中介紹到的,我們需要決定問題為 True 需要執行什麼,反之又要執行什麼。這些路徑的選擇便是由條件控制流程所實現。
Thumbnail
介紹條件控制流程,包含組成它的比較運算子、條件運算式、條件語句。 繼講解完邏輯運算之後,我們終於要開始認識控制流程的其中之一:條件(Condition)。 如同在程式的邏輯思維中介紹到的,我們需要決定問題為 True 需要執行什麼,反之又要執行什麼。這些路徑的選擇便是由條件控制流程所實現。
Thumbnail
介紹邏輯運算的觀念,包含布林值、運算子與運算式的介紹。並說明如何使用 Python 撰寫這些觀念。
Thumbnail
介紹邏輯運算的觀念,包含布林值、運算子與運算式的介紹。並說明如何使用 Python 撰寫這些觀念。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News