溫故js系列（4）-運算符詳解

時間  2019-11-06
標籤 溫故 系列 運算符 詳解 欄目 JavaScript 简体版
原文   原文鏈接

前端學習：教程&開發模塊化/規範化/工程化/優化&工具/調試&值得關注的博客/Git&面試-前端資源彙總前端

歡迎提issues斧正：運算符git

JavaScript-運算符

JavaScript 有一系列操做數據值的運算符，運算符按照特定運算規則對操做數進行運算，將簡單的表達式組合成複雜的表達式。github

一元運算符

一元運算符只能操做一個值。面試

累加累減運算符：segmentfault

var xzavier = 123;
xzavier++  //把變量累加1，至關於xavier = xavier + 1
++xzavier  //把變量累加1，至關於xavier = xavier + 1
xzavier--  //把變量累減1，至關於xavier = xavier - 1
--xzavier  //把變量累減1，至關於xavier = xavier - 1

上述代碼不僅是++--先後置的區別，當有賦值操做時，區別爲：數組

var xzavier = 1;
var num1 = ++xzavier; //num1 值爲2   -- 第1點
var num2 = xzavier++; //num2 值爲1   -- 第2點

對於第1點：模塊化

num1獲得的值是 ++xzavier表達式的返回值，這個表達式返回xzavier自加1以後的值，這一點能夠在控制檯打印來觀察。固然，xzavier變量也自加1，值也變爲了2函數

對於第2點：工具

num2獲得的值是 ++xzavier表達式的返回值，這個表達式返回xzavier自己的值（自加1以前的值），這一點能夠在控制檯打印來觀察。以後++後置操做符對xzavier起做用，因而xzavier自加1，xzavier的值如今是2了。學習

也就是說，若是定義num1和num2以後的這個表達式返回值做用的優先級爲R，那麼++前置操做符做用的優先級是大於R的，而++後置操做符做用的優先級是小於R的。

加減運算符本應參與運算，但也能夠進行類型轉換：

var xzavier1 = 'xzavier', xzavier2 = '123', xzavier3 = false, xzavier4 = 123, xzavier5 = '-123';
+xzavier1  //NaN
+xzavier2  //123
+xzavier3  //0
+xzavier4  //123
+xzavier5  //-123
-xzavier1  //NaN
-xzavier2  //-123
-xzavier3  //0
-xzavier4  //-123
-xzavier5  //123

// 用+轉換規則手寫一個parseInt
function myParseInt(value) {
    if(typeof value === 'number') {
        return value;
    }

    if(typeof value === 'string' && value.length > 0) {
        value = value.match(/^\d+/);
        if (Array.isArray(value)) {
            return +value[0];
        }
    }

    return NaN;
}

固然，還有一些方法也能夠被當作一元運算符，好比：

  • typeof 方法是一元運算符，可操做單個值，判斷類型。
  • delete 也是一元運算符， 它用來刪除對象屬性或者數組元素。

算術運算符

在運算時候若是運算值不是數值，那麼後臺會先使用 Number() 轉型函數將其轉換爲數值，隱式轉換：

加法

var xzavier = 123 + 456;     //579
var xzavier = 1 + NaN;       //NaN，只要運算中有一個NaN，計算值就爲NaN
var xzavier = 123 + 'abc';   //123abc  有字符串時未字符串鏈接符
var xzavier = 123 + Object;  //123[object Object]

對象會內部調用 toString() 或 valueOf() 方法進行轉換爲原始值。（這裏有提到 valueOf 和 toString 方法的轉換：JavaScript-數據類型淺析）

減法

var xzavier = 123 - 12; //111
var xzavier = -123 - 12 //-135
var xzavier = 123 - true; //122 true會隱式轉換爲1
var xzavier = 123 - 'xzavier'; //NaN

乘法

var xzavier = 123 * 2; //246
var xzavier = 123 * NaN; //NaN
var xzavier = 123 * true; //123
var xzavier = 123 * ''; //0

除法

var xzavier = 123 / 3; //41
var xzavier = 123 / 4; //30.75
var xzavier = 123 / NaN; //NaN
var xzavier = 123 / true; //123
var xzavier = 123 / ''; //Infinity

求餘

var xzavier = 123 % 3; //0
var xzavier = 123 % 4; //3
var xzavier = 123 % NaN; //NaN
var xzavier = 123 % true; //0

關係運算符

用於比較的運算符稱做爲關係運算符：小於 <、大於 >、小於等於 <=、大於等於 >=、相等 ==、不等 !=、全等(恆等) ===、不全等(不恆等) !==：

  1. 兩個操做數都是數值，則數值比較；
  2. 兩個操做數都是字符串，則比較兩個字符串對應的字符編碼值；
  3. 兩個操做數有一個是數值，則將另外一個轉換爲數值，再進行數值比較；
  4. 兩個操做數有一個是對象，則先調用 valueOf() 方法或 toString() 方法，再用結果比較。
321 > 123; //true
123 > 321; //false
'123' > 321; //false
'321' > '1234'; //true
'a' > 'b'; //false a=97,b=98
'a' > 'B'; //true B=66
1 > Object; //false

在相等和不等的比較上，若是操做數是非數值，則遵循一下規則：

  1. 一個操做數是布爾值，則比較以前將其轉換爲數值，false 轉成 0，true 轉成 1；
  2. 一個操做數是字符串，則比較以前將其轉成爲數值再比較；
  3. 一個操做數是對象，則先調用 valueOf() 或 toString() 方法後再和返回值比較；
  4. 不須要任何轉換的狀況下，null 和 undefined 是相等的；
  5. 一個操做數是 NaN，則 == 返回 false，!= 返回 true；而且 NaN 和自身不等；
  6. 兩個操做數都是對象，則比較他們是不是同一個對象，若是都指向同一個對象，則返回 true，不然返回 false；
  7. 在全等和全不等的判斷上，只有值和類型都相等，才返回 true，不然返回 false。
123 == 123; //true
'123' == 123; //true，'123'會轉成成數值123
false == 0; //true，false 轉成數值就是0
'a' == 'A'; //false，轉換後的編碼不同
123 == {}; //false，執行toString()或valueOf()會改變
123 == NaN; //false，只要有NaN，都是false
{} == {}; //false，比較的是他們的地址，每一個新建立對象的引用地址都不一樣

null == undefined //true
'NaN' == NaN //false
123 == NaN //false
NaN == NaN //false
false == 0 //true
true == 1 //true
true == 2 //false
undefined == 0 //false
null == 0 //false
'123' == 123 //true
'123' === 123 //false

邏輯運算符

邏輯運算符一般用於布爾值的操做，通常和關係運算符配合使用，有三個邏輯運算符：

邏輯與（AND）：&&

num1 && num2
true    true    true
true    false   false
false   true    false
false   false   false

若是兩邊的操做數有一個操做數不是布爾值的狀況下，與運算就不必定返回布爾值，此時，遵循已下規則：

  1. 第一個操做數是對象，則返回第二個操做數；
  2. 第二個操做數是對象，則第一個操做數返回 true，才返回第二個操做數，不然返回 false；
  3. 有一個操做數是 null，則返回 null；
  4. 有一個操做數是 undefined，則返回 undefined。

邏輯或（OR）：||

num1 || num2
true    true     true
true    false    true
false   true     true
false   false    false

若是兩邊的操做數有一個操做數不是布爾值的狀況下，邏輯與運算就不必定返回布爾值，此時，遵循已下規則：

  1. 第一個操做數是對象，則返回第一個操做數；
  2. 第一個操做數的求值結果爲 false，則返回第二個操做數；
  3. 兩個操做數都是對象，則返回第一個操做數；
  4. 兩個操做數都是 null，則返回 null；
  5. 兩個操做數都是 NaN，則返回 NaN；
  6. 兩個操做數都是 undefined，則返回 undefined。

邏輯非（NOT）：!

邏輯非參考： JavaScript數據判斷
邏輯非運算符能夠用於任何值。不管這個值是什麼數據類型，這個運算符都會返回一個布爾值。它的流程是：先將這個值轉換成布爾值，而後取反，規則以下：

  1. 操做數是一個對象，返回 false；
  2. 操做數是一個空字符串，返回 true；
  3. 操做數是一個非空字符串，返回 false；
  4. 操做數是數值 0，返回 true；
  5. 操做數是任意非 0 數值（包括 Infinity），false；
  6. 操做數是 null，返回 true；
  7. 操做數是 NaN，返回 true；
  8. 操做數是 undefined，返回 true。

不過，邏輯非也比較特殊。能夠更好的記憶：!的判斷

var xzavier = !(123 > 12); //false
var xzavier = !{}; //false
var xzavier = !''; //true
var xzavier = !'xzavier'; //false
var xzavier = !0; //true
var xzavier = !123; //false
var xzavier = !null; //true
var xzavier = !NaN; //true
var xzavier = !undefined; //true

位運算符

在通常的應用中，咱們基本上用不到位運算符。位非 NOT ~、位與 AND &、位或 OR |、位異或 XOR ^、左移 <<、有符號右移 >>、無符號右移 >>>。

var xzavier = ~123; //-124
var xzavier = 123 & 3; //3
var xzavier = 123 | 3; //123
var xzavier = 123 << 3; //984
var xzavier = 123 >> 3; //15
var xzavier = 123 >>> 3; //15

過程勉強看一下哈，不想寫不少0101，因此寫在紙上O(∩_∩)O~
圖片描述

賦值運算符

var xzavier = 123; //把123賦值給xzavier變量
xzavier = xzavier +123; //246

更多相似賦值運算符

  1. 乘/賦 *=
  2. 除/賦 /=
  3. 取餘/賦 %=
  4. 加/賦 +=
  5. 減/賦 -=
  6. 左移/賦 <<=
  7. 有符號右移/賦 >>=
  8. 無符號右移/賦 >>>=

三目運算符

function absN(xzavier) {
    return xzavier > 0 ? xzavier : -xzavier;
}
absN(-123);  //123
absN(123);  //123

逗號運算符

逗號運算符用於對兩個表達式求值，並返回後一個表達式的值。

'xza', 'vier' // "vier"

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

運算符優先級

. [] ()                          對象成員存取、數組下標、函數調用等
++ -- ~ ! delete new typeof void 一元運算符
乘法 / %                          乘法、除法、去模
加法 - +                          加法、減法、字符串鏈接
<< >> >>>                        位移
< <= > >= instanceof             關係比較、檢測類實例
== != === !==                    恆等(全等)
&                                位與
^                                位異或
|                                位或
&&                               邏輯與
||                               邏輯或
?:                               三元條件
= x=                             賦值、運算賦值
,                                多重賦值、數組元素分隔符
圓括號()能夠用來提升運算的優先級，由於它的優先級是最高的，即圓括號中的表達式會第一個運算。

幾個有意思的等式：

[1,2] + [3,4] == "1,23,4";  //true
[4,[3,2]][7][0] == 3;  //true
++[[]][+[]]+[+[]] == '10';  //true

今天好天氣，打籃球去咯。代碼，籃球，生活...

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程