(54)Wangdao.com第七天_JavaScript 運算符

時間  2019-11-08
標籤 wangdao.com wangdao com 第七 javascript 運算符 欄目 JavaScript 简体版
原文   原文鏈接

JavaScript 運算符，也叫操做符javascript

    • 對一個或者多個值進行運算，都是會返回結果的。
    • 好比：
    • typeof    返回一個值的類型，返回值類型是字符串。

 

隱式類型轉換：java

 

  • 任意值 = 任意值 + "";    // 就能轉換成字符串
  • 任意值 = 任意值 - 0;    // 就能轉換成Number
  • 任意值 = +任意值;    // 就能轉換成 Number，更簡潔
  • 任意值 = !!任意值;    // 便可將 任意值 轉換成布爾類型的值

 

 

 

 

  • 算術運算符，

不會對等號右邊的值產生影響；程序員

對非 Number 的值進行運算時，都會先轉換成 Number 再運算，除非有字符串進行運算；數組

任何值與 NaN 進行運算，都得 NaN 。瀏覽器

 

+    對兩個值進行相加，返回一個數字 Number ，可是又字符串進行運算會返回一個字符串函數

      • 兩個字符串相加，會拼串成一個字符串：
        • b = "123"+"456";    // b 仍是一個字符串，"123456"
      • 任何值和字符串進行運算，都會先轉換成字符串，而後拼串： 
        • c = 123+"4";    // c 等於字符串"1234"
result = 1 + 2 + '3';    // result 爲字符串 '33'
result = '1' + 2 + 3;    // result 爲字符串 '123'
  • 啊加法運算符是在運行時決定，究竟是執行相加，仍是執行鏈接。
  • 也就是說，運算子的不一樣，致使了不一樣的語法行爲，這種現象稱爲 「重載」（overload）
  • 運算子是對象，必須先轉成原始類型的值，而後再相加
  • 對象轉成原始類型的值
    • 首先，自動調用對象的valueOf方法，對象的valueOf方法老是返回對象自身
    • 再自動調用對象的toString方法，將其轉爲字符串 
      • var obj = { p: 1 };
obj.valueOf()    // { p: 1 }

obj.valueOf().toString()    // "[object Object]"

         

    • 本身定義valueOf方法或toString方法，獲得想要的結果。工具

      var obj = {
    valueOf: function () {    // 重寫 .valueOf()
        return 1;
    }
};

obj + 2     // 3



var obj = {
    toString: function () {    // 重寫 .toString()
        return 'hello';
    }
};

obj + 2     // "hello2"

       

 

 

-    對兩個值進行相減，返回一個數字 Numberspa

*    對兩個值進行相乘，返回一個數字 Number3d

/    對兩個值進行相除，返回一個數字 Numbercode

%  對兩個值進行取餘，返回一個數字 Number

  • 爲了獲得負數的正確餘數值，能夠先使用絕對值函數 
    • // 正確的寫法
function isOdd(n) {
    return Math.abs(n % 2) === 1;
}
isOdd(-5)    // true
isOdd(-4)    // false

       

  • 能夠用於浮點數的運算。可是，因爲浮點數不是精確的值，沒法獲得徹底準確的結果

** 指數運算符

  • 前一個運算子是底數，後一個運算子是指數 
    • 2 ** 4     // 16    即 2 的 4 次方

       

  • 多個指數運算符連用時，先進行最右邊的計算 
    • 2 ** 3 ** 2    // 512    至關於 2 ** (3 ** 2)

 

 

  • 一元運算符，

只須要一個操做數

對於非數字運算，會先轉換成 Number 再進行運算

    • + 正號    不會對操做數產生任何影響 
      • var result = 1 + +'2' + 3;    // result 爲 Number 類型的 6
    • - 負號    會對數組進行符號的取反
    • ++    自增1 
      • var a = 1;
a++;    // a 在這條語句執行完之後，a = 2
++a;    // a 在這條語句執行過程當中 a = 2
    • --    自減1
      • var b =  2;
result = b-- + b;    // b = 1 , result = 3
result = --b + b;    // b = 1, result = 2

         

 

 

  • js 的三種邏輯運算符    &&    ||    ！
  • 對操做值無影響
  • 對於非布爾值進行
    • 與運算時，會先將其轉換成布爾值比較，再返回原值。
    • 若兩個值都是 true，則返回後邊的值；若兩個值中有 false，則返回前面的false 。
    • 若第一個值爲 true，則必然返回第二個值；若第一個值爲 false，則返回第一個值。
    • 或運算，會先將其轉換成布爾值運算，再返回原值。
    • 若第一個值爲 true，則返回第一個值；若第一個值爲 false，則必然返回第二個值。

!    對右側的值進行非運算，並返回布爾類型的值：true 變 false；false 變 true

      • var a = false;
a = !!a;    // 若是對一個值進行兩次取反，不會發生變化。
      • var b = 10;
b = !b;    // 對非布爾類型的值進行非運算，會先轉換成 Boolean 類型，再進行運算

        能夠利用這個特性進行隱式類型轉換，b = !!b;    // 便可將 b 變成一個布爾值

&&    對符號兩側的值進行與運算，並返回布爾類型的值：只要有一個值爲 false ，就返回 false

      • 若是第一個值爲 false，則直接返回它的值，不會再對第二個運算子進行操做。    稱 "短路 short cut"
      • 有些程序員喜歡用它取代 if 結構
      • if (i) {
    doSomething();
}

// 等價於

i && doSomething();

         

 

||    對符號兩側的值進行或運算，並返回布爾類型的值：只要有一個值爲 true，就返回 true

      • 若是第一個值爲 true，則不會再判斷第二個值了。

 

  • 賦值運算符

=    將 右側的值 賦給 左側的變量

  • 與算術運算符的結合
  • x += y    // 等同於 x = x + y

x -= y    // 等同於 x = x - y

x *= y    // 等同於 x = x * y

x /= y    // 等同於 x = x / y

x %= y    // 等同於 x = x % y

x **= y    // x = x ** y

     

  • 與位運算符的結合
  • x >>= y    // 等同於 x = x >> y

x <<= y    // 等同於 x = x << y

x >>>= y    // 等同於 x = x >>> y

x &= y    // 等同於 x = x & y

x |= y    // 等同於 x = x | y

x ^= y    // 等同於 x = x ^ y

 

  •  關係運算符

比較兩個值之間的大小關係，關係成立則返回 true，關係不成立則返回 false 。

對於非數字進行比較，則先轉換成數字再比較。。。

若是兩個字符串比較，不會轉換成數字，會比較Unicode 。。。一位一位比，出結果就不比了。。。能夠進行英文名排序。

任何值和 NaN 進行任何比較，都返回 false 。

如

  • result = 5 < 4;    // 關係不成立，result 爲false 。

// 當
console.log("123456" < "5");    // 但願獲得一個數字上的正確比較
// 則能夠寫成
console.log("123456" < +"5");    // 即，爲其中一個字符串加 "+" 轉換成數字，再進行比較

>    

==

!=    

<    

>=    

<=    

 undefined和null與其餘類型的值比較時，結果都爲false，它們互相比較時結果爲true

  • 相等運算符    ==

比較兩個值是否相等。

相等返回true，不等返回false

  • var a = 10;
console.log(a == 2);    // 很明顯 打印 false

     

  • 若是兩個值的類型不一樣時，會自動進行類型轉換， 
    • console.log('1' == 1);    // 會打印 true
    • 具體轉換成什麼類型是不必定的，大部分狀況轉換成 Number

    • 在上面的例子裏，是將 '1' 轉換成了 Number 類型。

    • console.log(null == 0);    // 這是特殊狀況，沒有轉換成 Number，因此打印 false
      console.log(null == undefined);    // 這也是特殊狀況，因爲 undefined 衍生自 null，因此打印 true
      console.log(NaN == NaN);    // 這也是特殊狀況，NaN 不和任何值相等，包括它自己，因此打印 false

      能夠經過 isNaN() 函數判斷一個值是不是NaN
          var b = NaN;
          console.log(isNaN(b));    // 若是是 NaN 返回true，不然返回 false

 

  • 不相等運算符    !=

比較兩個值是否不相等。

不等返回true，相等返回false

若是兩個值的類型不一樣時，會自動進行類型轉換，再進行比較。

 

  • 條件運算符，也叫 三元運算符
    • 語法
      • (條件表達式)?:(語句1):(語句2);
    • 在須要返回值的場合，只能使用三元條件表達式，而不能使用if..else
    • 流程：
      • 首先對錶達式進行求值
        • 所得值爲 true，則執行語句1，並返回執行結果
        • 所得值爲 false，則執行語句2，並返回執行結果
    • 實例 
      • var a = 10;
var b = 20;

a > b : alert('a大'):alert('b大');

/***************************/

// 獲取 a 和 b 中的最大值
var max = a > b ? a:b;

// 獲取 a , b , c 中的最大值
var max = ( a > b)? (a>c?a:c):(b>c?b:c);

         

    • 若是 條件表達式 非布爾值，會轉換成布爾值
  • 其餘運算符

===    全等    

      • 判斷兩個值是否全等
      • 不會進行類型轉換，若是類型不一樣，直接返回 false
      • console.log(1 === '1');    // false
console.log(null === undefined);    // false
      • 兩個複合類型（對象、數組、函數）的數據比較時，不是比較它們的值是否相等，而是比較它們是否指向同一個地址。 
        • {} === {}    // false
[] === []    // false
(function () {} === function () {})    // false

// 結果都是不相等
// 緣由是對於複合類型的值，嚴格相等運算比較的是，它們是否引用同一個內存地址
// 而運算符兩邊的空對象、空數組、空函數的值，都存放在不一樣的內存地址，結果固然是false
        • 若是兩個變量引用同一個對象，則它們相等
        • var v1 = {};
var v2 = v1;
v1 === v2    // true
      • undefined和null與自身嚴格相等
      • 兩個只聲明未賦值的變量是相等的 都是 undefined

 

!==    不全等    

      • 判斷兩個值是否不全等，
      • 不會進行類型轉換，若是類型不一樣，直接返回 true
      • console.log(1 !== '1');    // true
console.log(null !== undefined);    // true

        1 !== '1' // true // 等同於 !(1 === '1')

 

void 運算符

做用是執行一個表達式，而後不返回任何值，或者說返回undefined

  • 優先級很高 
    • 實際上等同於 
void (x = 5)     // 執行完 x=5 後 ， 返回 undefinedvoid 4 + 7 //(void 4) + 7

       

  • 主要做用
    • 瀏覽器的書籤工具（bookmarklet），
    • 在超級連接中插入代碼防止網頁跳轉。 
      • <a href="javascript: void(f())">文字</a>


<a href="javascript: void(document.form.submit())">
  提交
</a>

         

 

  • 逗號運算符，
  • 使用 ',' 能夠分割多個語句，通常能夠在聲明變量時使用。
  • var a , b , c;
var a = 1 , b , c = 3;

     

  • 用於對兩個表達式求值，並返回後一個表達式的值 
    • 'a', 'b'    // "b"

var x = 0;
var y = (x++, 10);
x     // 1
y     // 10

      在返回一個值以前，先進行一些輔助操做

      var value = (console.log('Hi!'), true);
// Hi!

value // true

       

運算符的優先級

  • 在 js 中有一個 運算符優先級 的表，越靠上優先級越高
  • 表並不須要記憶，遇到優先級不清楚的，可使用括號改變優先級。

 

 二進制位運算符

用於直接對二進制位進行計算，一共有7個

|     或運算符 or    兩個二進制位都爲0，則結果爲0   

  • x = x | 0    保持原位不變
  • （不論是整數或小數）轉爲32位整數
     
    • function toInt32(x) {
    return x | 0;
}

toInt32(1.001)    // 1
toInt32(1.999)    // 1
toInt32(1)    // 1
toInt32(-1)    // -1
toInt32(Math.pow(2, 32) + 1)    // 1
toInt32(Math.pow(2, 32) - 1)    // -1

       

&    與運算符 and    兩個二進制位都爲1，則結果爲 1   

  • 0 & 3    // 0
  • 0（二進制00）和3（二進制11）進行二進制與運算會獲得00

 

~    否運算符 not   對一個二進制位取反

  • ~ 3     // -4    能夠理解成   -3減一
  • 對3進行二進制否運算，獲得-4。之因此會有這樣的結果，是由於位運算時，JavaScirpt 內部將全部的運算子都轉爲32位的二進制整數再進行運算
  • // 3的32位整數形式是00000000000000000000000000000011
// 二進制否運算之後獲得11111111111111111111111111111100
// 因爲第一位（符號位）是1，因此這個數是一個負數
// JavaScript 內部採用補碼形式表示負數，
// 即須要將這個數減去1，再取一次反，而後加上負號，才能獲得這個負數對應的10進制值
// 這個數減去1等於11111111111111111111111111111011，再取一次反獲得00000000000000000000000000000100，再加上負號就是-4

     

  • 對一個整數連續兩次二進制否運算，獲得它自身。
  • 二進制否運算遇到小數時，也會將小數部分捨去，只保留整數部分。
    • 對一個小數連續進行兩次二進制否運算，能達到取整效果
    • ~~2.9    // 2
~~47.11    // 47
~~1.9999    // 1
~~3    // 3

// 使用二進制否運算取整，是全部取整方法中最快的一種
  • 對於其餘類型的值, 進行二進制否運算，JavaScript 引擎會先調用 Number函數，將字符串轉爲數值

 

^    異或運算符 xor    兩個二進制位不一樣，則結果爲 1    

  • 連續對兩個數a和b進行三次異或運算，a^=b; b^=a; a^=b;，能夠互換它們的值
  • // 在不引入臨時變量的前提下，互換兩個變量的值
var a = 10;
var b = 99;

a ^= b, b ^= a, a ^= b;

a     // 99
b     // 10

    這是互換兩個變量的值的最快方法。

  • 異或運算也能夠用來取整 
    • 12.9 ^ 0    // 12

       

<<  左移運算符 left shift

  • 表示將一個數的二進制值向左移動指定的位數，尾部補0，即乘以 2 的指定次方。
  • // 4 的二進制形式爲100，
// 左移一位爲1000（即十進制的8）
// 至關於乘以2的1次方

4 << 1    // 8

-4 << 1    // -8

     

  • 左移0位，就至關於將該數值轉爲32位整數，等同於取整，對於正數和負數都有效
  • 13.5 << 0    // 13

-13.5 << 0    // -13

     

  • 將顏色的 RGB 值轉爲 HEX 值
  • // RGB to HEX
// (1 << 24)的做用爲保證結果是6位數
// 自定義 將顏色的 RGB 值轉爲 HEX 值
var rgb2hex = function(r, g, b) {
    return '#' + ((1 << 24) + (r << 16) + (g << 8) + b)
        .toString(16) // 先轉成十六進制，而後返回字符串
        .substr(1);   // 去除字符串的最高位，返回後面六個字符串
}

     

>>  右移運算符 right shift

  • 將一個數的二進制值向右移動指定的位數，頭部補0，即除以 2的指定次方（最高位即符號位不參與移動）
  • 4 >> 1
    // 2
    // 由於4的二進制形式爲 00000000000000000000000000000100，
    // 右移一位獲得 00000000000000000000000000000010，
    // 即爲十進制的2

-4 >> 1
    // -2
    // 由於-4的二進制形式爲 11111111111111111111111111111100，
    // 右移一位，頭部補1，獲得 11111111111111111111111111111110,
    // 即爲十進制的-2

     

  • 右移運算能夠模擬 2 的整除運算
  • 5 >> 1    // 至關於 5 / 2 = 2

21 >> 2    // 至關於 21 / 4 = 5

21 >> 3    // 至關於 21 / 8 = 2

21 >> 4    // 至關於 21 / 16 = 1

     

>>> 帶符號位的右移運算符 zero filled right shift

  • 表示將一個數的二進制形式向右移動，包括符號位也參與移動，頭部補0。因此，該運算老是獲得正值。
  • 對於正數，該運算的結果與右移運算符（>>）徹底一致，區別主要在於負數。
  • 是查看一個負整數在計算機內部的儲存形式，最快的方法 
    -1 >>> 0    // 4294967295
// -1做爲32位整數時，內部的儲存形式使用無符號整數格式解讀，值爲 4294967295（即(2^32)-1，等於11111111111111111111111111111111）

     

  • 位運算符直接處理每個比特位（bit），因此是很是底層的運算，好處是速度極快，缺點是很不直觀
  • 雖然在 JavaScript 內部，數值都是以64位浮點數的形式儲存，可是作位運算的時候，是以32位帶符號的整數進行運算的，而且返回值也是一個32位帶符號的整數
  • 位運算符只對整數起做用，若是一個運算子不是整數，會自動轉爲整數後再執行

 

  • 開關做用
    • 位運算符能夠用做設置對象屬性的開關
    • // 位運算符能夠用做設置對象屬性的開關
// 能夠設置一個四位的二進制數，它的每一個位對應一個開關
var FLAG_A = 1;     // 0001
var FLAG_B = 2;     // 0010
var FLAG_C = 4;     // 0100
var FLAG_D = 8;     // 1000

       

    • // 與運算 檢驗當前設置 是否打開了指定開關
var flags = 5; // 二進制的0101

if (flags & FLAG_C) {    // 0101 & 0100 => 0100 => true
  // 若是打開了就......
}

       

    • // 假設須要打開A、B、D三個開關，咱們能夠構造一個掩碼變量
var mask = FLAG_A | FLAG_B | FLAG_D;    // 0001 | 0010 | 1000 => 1011

       

    • flags = flags & mask;    // 與運算能夠將當前設置中凡是與開關設置不同的項

flags = flags ^ mask;    // 異或運算能夠切換（toggle）當前設置，即第一次執行能夠獲得當前設置的相反值，再執行一次又獲得原來的值。

flags = ~flags;    // 否運算能夠翻轉當前設置，即原設置爲0，運算後變爲1；原設置爲1，運算後變爲0
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程