1. 程式人生 > 前端設計 >一次弄懂Javascript的各種運算子

一次弄懂Javascript的各種運算子

算數運算子

令y = 5

"+"作為二元運算子

規則

  1. Infinity + Infinity = Infinity
  2. (-Infinity) + (-Infinity) = -Infinity
  3. Infinity + (-Infinity) = NaN
  4. Infinity + null = Infinity
  5. 0 + 0 = 0
  6. -0 + -0 = -0
  7. +0 + -0 = +0
  8. 如果是兩個字串,則將字串進行拼接
  9. 如果有一個是字串一個不是字串,則將非字串轉換成字串再拼接
  10. 如果運算元都不是字串型別,則將運算元轉換為數值型別再相加}

"+"作為一元運算子

作用

於Number()相同,將其他型別的物件轉換為數字型別

    let two = "2";
    let three = "3";
    console.log(+two + +three); // 5
    先將字串轉換為數字再相加,因為一元運算子的優先順序比二元運算子的優先順序更高
複製程式碼

"-"運算子

Infinity - Infinity = NaN

  • (-Infinity) - (-Infinity) = -NaN
  • Infinity - (-Infinity) = Infinity
  • Infinity - null = Infinity
  • 0 - 0 = 0
  • -0 - -0 = -0
  • +0 - -0 = +0
  • 與NaN相關的減法運算結果都為NaN
  • 如果有一個運算元是物件,則先對物件進行隱式轉換,再根據前面的規則進行減法運算
  • 如果果有一個運算元是非數字型別則先在後臺呼叫 Number()函式將其轉換為數值,再根據前面的規則進行減法運算。
  • 對隱式轉換不瞭解的話可以看看這篇文章一次弄懂Javascript隱式轉換

    "*"運算子

    Infinity * 0 = NaN
  • Infinity * null = NaN
  • Infinity * undefined = NaN
  • Infinity * Infinity = Infinity
  • 如果運算元的值超過數值的表示範圍,結果為Infinity 或 - Infinity
  • 如果運算元中有一個運算元為NaN,結果為NaN
  • 如果運算元中有一個運算元為undefined,結果為NaN
  • 如果有一個運算元是物件,則先對物件進行隱式轉換,再根據前面的規則進行乘法運算
  • 如果有一個操作符不是數值型別,則先呼叫Number()進行轉換,再根據前面的規則進行乘法運算
  • "/"運算子

    Infinity / 0 = Infinity
  • Infinity / null = Infinity
  • Infinity / undefined = NaN
  • Infinity / Infinity = NaN
  • 如果有一個運算元是物件,則先對物件進行隱式轉換,再根據前面的規則進行除法運算
  • 如果有一個操作符不是數值型別,則先呼叫Number()進行轉換,再根據前面的規則進行除法運算
  • "%"運算子

    運算元都是數值,執行常規的除法計算,返回除的餘數
  • 任何數 % undefined = NaN
  • 任何數 % NaN = NaN
  • Infinity % 任何數 = NaN
  • 有限大的數 % 0 = NaN
  • 有限大的數 % Infinity = 有限大的數
  • 0 % 除null、undefined、NaN任何數 = 0
  • 如果有一個運算元是物件,則先對物件進行隱式轉換,再根據前面的規則進行取餘運算
  • 有一個運算元不是數值,則呼叫Number()轉換
  • "++"運算子

    應用於非數字型別的時候,先將其轉換為數字,再執行++的操作
  • 應用於浮點數,執行加1的操作
  • 應用於物件,先對物件進行隱式轉換,再根據前面的規則進行++運算
  • "--"運算子

    應用於非數字型別的時候,先將其轉換為數字,再執行--的操作。
  • 應用於浮點數,執行減1的操作
  • 應用於物件,先對物件進行隱式轉換,再根據前面的規則進行--運算
  • "**"運算子

    進行冪運算

    語法

    運算元 ** 冪

        console.log(2 ** 3);     // 8
        console.log(8 ** (1/3)); // 2
    複製程式碼

    賦值運算子

    =、+=、-=、*=、/=、%=

    令x = 10 y = 5

    比較運算子

    ==、===、!=、!==

    令x = 5

    如果運算元是布林型別,比較之前先將其轉換成數值,false為0,true為1
  • 如果運算元是字元型別,另一個是物件,物件先進行隱式轉換,再進行比較
  • 如果運算元是字元型別,另一個運算元是數值,則將字串轉換為數值在比較
  • null == undefined 為true
  • null與undefined以外的任何數都不想等。
  • NaN與任何數都不相等
  • 如果兩個運算元都是物件,比較是不是同一個物件,如果是則返回true否則false
  • 關係運算符

    >、<、>=、<=

    兩個運算元都是數值,則執行數值比較
  • 兩個運算元都是字串, 則比較兩個字串對應的ascii碼
  • 如果一個運算元是物件,將物件隱式轉換後再比較。
  • 如果一個運算元非數值型別,則將其轉換為數字型別再比較
  • 邏輯運算子

    令x = 6 y = 3

    "&&"運算子

    如果第一個運算元是物件,則返回第二個運算元
  • 如果第二個運算元是物件,則只有在第一個運算元的值為true的情況下才會返回該物件
  • 如果兩個運算元都是物件,則返回第二個運算元
  • 如果有一個運算元是null,則返回null
  • 如果有一個運算元是NaN,則返回NaN
  • 如果有一個運算元是undefined,則返回undefined
  • "||"運算子

    第一個運算元是物件,則返回第一個運算元
  • 第一個運算元的求值結果為false,則返回第二個運算元
  • 兩個運算元都是物件,則返回第一個運算元
  • 兩個運算元都是null,則返回null
  • 兩個運算元都是NaN,則返回NaN
  • 兩個運算元都是undefined,則返回undefined
  • "!"運算子

    如果運算元是一個空字串,返回true
  • 如果運算元是數值0,返回true
  • 如果運算元是null,返回true
  • 如果運算元是NaN,返回true
  • 如果運算元是undefined,返回true
  • 其他情況返回false
  • 位運算子

    "&"按位與運算子

    &對運算元的二進位制數中對應的每一位都做與算,如果對應位都為1則結果為1,如果對應位有一個是0,則結果為0

    1 的二進位制表示為: 00000000 00000000 00000000 00000001
    3 的二進位制表示為: 00000000 00000000 00000000 00000011 
    console.log(1 & 3) // 1
    複製程式碼

    "|"按位或運算子

    |對運算元的二進位制數中對應的每一位都做運算,如果對應位都為0則結果為0,如果對應位有一個是1,則結果為1

    1 的二進位制表示為: 00000000 00000000 00000000 00000001
    3 的二進位制表示為: 00000000 00000000 00000000 00000011
    console.log(1 | 3) // 3
    複製程式碼

    "~"按位非運算子

    ~對運算元的二進位制數對應的每一位都做運算,如果對應位為0則結果為1,如果對應位為1則結果為0

    1 的二進位制表示為: 00000000 00000000 00000000 00000001 
    3 的二進位制表示為: 00000000 00000000 00000000 00000011 
    ----------------------------- 
    1 反碼二進位制表示: 11111111 11111111 11111111 11111110 
    由於第一位(符號位)是1,所以這個數是一個負數。JavaScript 內部採用補碼形式表示負數,即需要將這個數減去1,再取一次反,然後加上負號,才能得到這個負數對應的10進位制值。 
    ----------------------------- 
    1 的反碼減 111111111 11111111 11111111 11111101 
        再取反: 00000000 00000000 00000000 00000010 
    表示為10進位制加負號:-2 
    console.log(~ 1) // -2
    複製程式碼

    "^"按位異或運算子

    ^對運算元的二進位制數中對應的每一位都做異或操作,當對應位的值不同時,結果為1,否則為0

    1 的二進位制表示為: 00000000 00000000 00000000 00000001
    3 的二進位制表示為: 00000000 00000000 00000000 00000011 /
    console.log(1 ^ 3) // 2
    複製程式碼

    "<<"左移運算子

    <<運算子使指定值的二進位制數所有位都左移指定位數

    移動規則

    丟棄高位,低位補0即按二進位制形式把所有的數字向左移動對應的位數,高位移出(捨棄),低位的空位補零。

    1 的二進位制表示為: 00000000 00000000 00000000 00000001 
    2 的二進位制表示為: 00000000 00000000 00000000 00000010 
    console.log(1 << 1) // 2
    複製程式碼

    ">>"有符號右移運算子

    >>運算子使指定值的二進位制數所有位都右移指定位數

    向右被移出的位被丟棄,拷貝最左側的位以填充左側。由於新的最左側的位總是和以前相同,符號位沒有被改變。

    1 的二進位制表示為: 00000000 00000000 00000000 00000001 
    0 的二進位制表示為: 00000000 00000000 00000000 00000000 
    console.log(1 >> 1) // 0
    複製程式碼

    ">>>"無符號右移運算子

    >>>運算子使指定值的二進位制數所有位都右移指定位數

    向右被移出的位被丟棄,左側用0填充。因為符號位變成了0,所以結果總是非負的。對於非負數,有符號右移和無符號右移總是返回相同的結果。

    條件運算子

    判斷條件 ? 條件為真時的操作 : 條件為假時的操作

    let num = 2;
    num > 1 ? console.log("對"):console.log("錯"); // "對" 
    複製程式碼

    型別運算子

    typeof運算子

    返回變數的型別

        console.log(typeof null);     // object 
        console.log(typeof undefined);// undefined
        console.log(typeof []);       // object
        console.log(typeof {});       // object
        console.log(typeof true);     // boolean
        console.log(typeof "123");    // string
        console.log(typeof 123);      // number
    複製程式碼

    typeof檢測型別並不準確,準確的檢測方法與各種檢測方法的介紹和對比請檢視深入理解JS資料型別檢測

    instanceof

    a instance of

    檢視a是否是b的例項,是則返回true,不是則返回false

    注意事項

    原型鏈可以被修改,所以這種方法同樣不準確,詳情檢視深入理解JS資料型別檢測

    其他運算子

    "."點運算子

    讀取物件的屬性值,點只能用在物件上面,若點前面不是物件,則先將其變為物件,呼叫完之後再改回原來的型別

    void運算子

    求表示式的值,或執行語句,然後void的值總是為undefined。

    在a標籤中return false可以阻止預設動作,將其改為void(f())作用相同。

    ","逗號運算子

    表示式1,表示式2,...,表示式n

    忽略第一個運算元,返回第二個運算元

    逗號操作符的優先順序比"="低

    delete運算

    delete運算子用來刪除物件屬性或者陣列元素,如果刪除成功或所刪除的目標不存在,delete將返回true。

    不是所有的屬性都可刪除,一些內建核心和客戶端屬性是不能刪除的,通過 var 語句宣告的變數不能刪除,通過 function 語句定義的函式也是不能刪除的。

    in運算子

    a in b

    判斷運算元a是否作為屬性名存在於物件b中,是則返回true,不是則則返回false

        let obj = {
            a: 1
        }
        console.log("a" in obj); // true
    複製程式碼