JavaScript快速入門-04-運算符

4 運算符

4.1 算術運算符

4.1.1 概述

    JavaScript 提供的算術運算符如下所示：

類型	符號	示例
加法運算符	+	a+b
減法運算符	-	a-b
乘法運算符	*	a*b
除法運算符	/	a/b
餘數運算符	%	a%b
自增運算符	++	++a/a++
自減運算符	--	--a/a--
指數運算符	**	a**b

4.1.2 加法運算符

    加法運算符是最常見的運算符，常用於求兩個數值的和。

4.1.2.1 基本規則

• 1.數值相加

    如果是進行數值的相加，則爲求和

1+2 // 3

• 2.布爾類型相加
      在JavaScript中，也允許非數值相加，例如與布爾類型的相加。

在與布爾類型相加時，則會自動將布爾類型轉換爲數值，然後再進行相加。true會轉換爲1，false會轉換爲0

true+true // 2
3+true // 4
false+false  // 0

• 3.字符串相加

    如果是與字符串類型的值相加，則會進行字符串的連接，並返回一個新的字符串。如果其中一個不是字符串，則會自動轉換爲字符串再進行連接。

"I Love"+" Surpass"  // 'I Love Surpass'
2+"-28" // '2-28'
true+" boolean" // 'true boolean'

    加法運算符是在運行時決定，到底是執行相加，還是執行連接，即運算子不同，執行不同的語法行爲，也稱之爲重載。因加法運算符存在重載行爲，可能執行不同的運算，使用的時候需要特別注意。

"2020"+4+3 // '202043'
2020+4+"3" // '20243'

上面代碼中，因爲是從左到右進行運算，字符串的位置不一樣，則會出現不一樣的結果

    除了加法運算符，其他算術運算符（如減法、除法、乘法、餘數等）則不會發生重載。其規則：所有運算子一律先轉換爲數值，再進行相應的算術運算。

100-"88" // 12
100*"88" // 8800
100/"88" // 1.1363636363636365
100%"88" // 12

4.1.2.2 對象相加

    如果運算子是對象，必須先轉換爲原始類型的值，再進行相加

var obj={name:"surpass"};
console.log(obj+8) // [object Object]8

上面代碼中，對象obj轉換成原始類型的值是[object Object]，再與8相加就得到結果[object Object]8

    對象轉換成原始類型的值，規則如下所示

• 1.首先自動調用對象的valueOf()方法，再調用對象的toString()方法

var obj={name:"surpass"};
console.log(obj.valueOf()); // { name: 'surpass' }
console.log(obj.valueOf().toString()); // [object Object]

一般來說，對象的valueOf()方法總是返回對象自身，再調用對象的toString()方法，將其轉換爲字符串。在知道這個規則後，我們可自定義valueOf()和toString()方法，得到想到的結果。

var obj = { 
    valueOf: function () {
         return 28; 
        } 
    };
console.log(obj + 8); // 36

上述代碼由於直接定義了obj的valueOf()方法返回28，再與8相加得到結果36。由於valueOf()方法直接返回一個原始類型的值，所以不再調用toString()方法。我們也可以自定義toString()方法，如下所示：

var obj = { 
    toString: function () {
         return "Surpass "; 
        } 
    };
console.log(obj + 8); // Surpass 8

    但這裏有一個特例，如果運算子是一個Date的對象實例，則優先執行toString()方法，如下所示：

var obj=new Date();
obj.valueOf=function(){return 28;};
obj.toString=function(){return "Surpass "};
console.log(obj+100);  // Surpass 100

4.1.3 餘數運算符

    餘數運算符主要用於計算兩個數的餘數。

15%5 // 0
15%7 // 1

    需要注意的是，運算結果的正負號是由第一個運算子的正負號決定。

-15%5 // -0
-15%7 // -1

4.1.4 自增/自減運算符

    自增和自減運算符，是一元運算符，只需要一個運算子。其作用是將運算子首先轉換爲數值，然後再加1或減1，會修改原始變量。

var a=100;
var b=88;
var c=99;
var d=66;
console.log("a++ value is:",a++);
console.log("a value is:",a);
console.log("b value is:",b);
console.log("++b value is:",++b);
console.log("c-- value is:",c--);
console.log("c value is:",c);
console.log("d value is:",d);
console.log("--d value is:",--d);

輸出結果如下所示：

a++ value is: 100
a value is: 101
b value is: 88
++b value is: 89
c-- value is: 99
c value is: 98
d value is: 66
--d value is: 65

    通過以下結果，可以總結出以下結論

• 自增和自減運算符在變量前面，先進行自增或自減操作後，再輸出其值
• 自增或自減運算符在變量之後，先輸出其值，再進行自增或自減操作

4.1.4 指數運算符

    指數運算符通常用於一個數的n次冪。

2**5 // 32

    這裏有一個注意事項，指數運算符是右結合，而不是左結合，即多個指數運算符連用時，先進行最右邊的計算。

2**3**2  // 512
2**4**2**1 // 65536

4.2 比較運算符

4.2.1 概述

    比較運算符一般常用於比較兩個值的大小，然後返回一個布爾值，用於表示是否滿足條件。JavaScript 提供的比較運算符如下所示：

類型	符號	示例
大於運算符	>	a>b
大於等於運算符	>=	a>=b
小於運算符	<	a<b
小於等於運算符	<=	a<=b
相等運算符	==	a==b
嚴格相等運算符	===	a===b
不相等運算符	!=	a!=b
嚴格不相等運算符	!==	a!==b

    以上比較運算符可以分爲相等比較運算符和不相等運算符。兩者的比較的規則是不一樣的。對於不相等的比較規則爲兩個運算子都爲字符串，按照字典順序比較（實際上是比較Unicode碼點），如果不是，則轉換爲數值，再比較數值大小。

4.2.2 不相等運算符

4.2.2.1 字符串比較

    在JavaScript中比較字符串時，會首先比較首字符的Unicode碼點。如果相等，再比較第二個字符的Unicode碼點，以此類推。

"Surpass" < "surpass" // true

    上面代碼中s的碼點（115）大於S的碼點（83），所以返回true，因爲漢字也有Unicode碼點，所以漢字也可以進行比較的，如下所示：

"上" > "海" // false

上面代碼中，上的碼點爲：19978，海的碼點爲：28023，所以返回爲false

4.2.2.2 非字符串比較

    因爲參與比較的運算子一般都有2個，則可以分爲兩種情況：

1.原始類型值

    如果兩個運算子都是原始類型值，則先轉換爲數值再進行比較。如下所示：

5 > "4" // true，會先將"4"轉換爲數值4，再參與比較
true > false // true ，會將true和false轉換爲數值，分別對應爲1和0，再參與比較
5 > false // true

    這裏有一個特殊情況，就是與NaN進行比較，任何值與NaN使用不相等運算符比較，均返回false

1 > NaN // false
"abc" >= NaN // false
NaN == NaN // false

2.對象

    如果運算子是對象，則會轉換爲原始類型值，再進行比較。

對象轉換爲原始類型值，則先調用對象的valueOf()方法；如果返回值仍然爲對象，則再調用toString()方法

var number=10;
var testArray=[8];
console.log("testArray toString value is:",testArray.valueOf().toString()); // testArray toString value is: 8
console.log("testArray > number",testArray>number); // testArray > number false

var objA={"name":"Surpass"};
var objB={"age":28};
console.log("objA >= objB",objA >= objB); // objA >= objB true 

4.2.3 嚴格比較運算符

    嚴格比較運算符包括嚴格相等運算符和嚴格不相等運算符。

4.2.3.1 嚴格相等運算符

    在JavaScript中提供兩種相等運算符==和===，兩者主要區別如下所示：

• ==是比較兩個值是否相等，即兩邊類型允許不一致
• ===是比較兩個值是否爲同一個值，即要求兩邊類型必須一致，否則則返回false

1.不同類型值

1=="1" // true
1==="1" // false
true == 1 // true
true === 1 // false

2.同類型的原始類型值

2==0x2  // true
2===0x2 // true

NaN與任何值都不相等

NaN == NaN   // false
NaN === NaN  // false

3.複合類型

    兩個複合類型（對象、數組、函數）的數據比較時，不是比較它們的值是否相等，而是比較它們是否指向同一個內存地址。

let objA={};
let objB={};
let objC=objA;
console.log("objA === objB ?",objA === objB);
console.log("objA === objC ?",objA === objC);

let funA=function(){};
let funB=function(){};
let funC=funA;
console.log("funA === funB ?",funA === funB);
console.log("funA === funC ?",funA === funC);

輸出結果如下所示：

objA === objB ? false
objA === objC ? true
funA === funB ? false
funA === funC ? true

對於兩個對象的比較，嚴格相等運算比較的是其內存地址，而大於或小於運算符比較的是值

4.undefined和null

    undefined和null與自身嚴格相等

undefined === undefined // true
null === null // true

4.2.3.2 嚴格不相等運算符

    嚴格不相等運算符與嚴格相等運算符類似，主要用於判斷兩個是否嚴格不相等。

1 !== "1" // true

4.2.4 相等運算符

    相等運算符常用於比較兩個運算子是否相等，通常分爲以下幾種情況：

• 如果是相同類型的數據進行比較時，則等同於嚴格相等運算符
• 如果是不同類型的數據時，則會先將兩邊數據進行轉換，再使用嚴格相等運算符進行比較

4.2.4.1 原始類型值

    原始類型值會先轉換成數值再進行比較，如下所示：

1 == true // true
2 == false // false
"true" == true // false 等同於Number("true")  = NaN
"" == false // true 等同於Number("") = 0

4.2.4.2 對象與原始類型值

    對象與原始類型值比較時，對象在轉換爲原始類型值再參與比較，即先調用對象的valueOf()方法，再調用toString()方法後，再參與比較。

[1] == 1  // true
[1,2,3] == "1,2,3" // true
[1] == true // true

    以上代碼中，如果是對象參與相等判斷時，JavaScript會調用對象的valueOf()方法，由於返回的還是一個對象，則會再調用toString()方法，得到字符串後，再基於規則進行比較，我們來看一個比較直觀的例子，如下所示：

var obj={
    valueOf:function(){
        console.log("call valueOf method");
        return obj;
    },
    toString:function(){
        console.log("call toString method");
        return "Surpass";
    }
};
var myName="Surpass";
console.log("myName == obj result is: ", myName == obj);

輸出結果如下所示：

call valueOf method
call toString method
myName == obj result is:  true

4.2.4.3 undefined 和 null

    undefined和null只有與自身比較，或者相互比較時，纔會返回true；與其他類型的值比較時，結果都爲false，如下所示：

// 與自身或相互比較
undefined == undefined // true
null == null // true
undefined == null // true
// 與其他類型比較
false == null // false
false == undefined  // false
2 == null // false
2 == undefined // false

4.3 布爾運算符

4.3.1 概述

    布爾運算符一般用於將表達式值轉換爲布爾值，主要包括以下幾種：

• 與運算符：&&
• 或運算符：||
• 非運算符：!

4.3.2 與運算符

    &&運算符常用於多個表達式的求值。其運算規則如下所示：

• 所有表達式的值均爲true時，返回true
• 如果第一個表達式值爲false時，則直接返回false
• 如果第一個運算子的布爾值爲true，則返回第二運算子的值（注意這裏不是布爾值），如果第一個運算子的布爾值爲false，則直接返回第一個運算子的值，且不再對第二個運算子求值

true && true // true
true && 3>2 && false // false
"t" && "f" // f
"" && "Surpass" // ""

    與運算符還是一種短路運算符，即如果第一個運算子決定了結果，則不會對後續運算子進行操作求值。示例如下所示：

var found=false;
var result=(found && age); // 不會報錯，因爲第一個運算子是false
console.log("result is: ",result); // 執行打印

var found=true;
var result=(found && age); // 會報錯，因爲age沒有事先聲明
console.log("result is:",result); // 不會執行

    利用這個短路特性，可以取代if結構，如下所示：

function doSomething(){
    console.log("call doSomething method");
}

var flag=true;
if (flag){
    console.log("call if");
    doSomething();
}

flag && doSomething(); //利用短路特性

輸出結果如下所示：

call if
call doSomething method
call doSomething method

    對於特殊字符的處理邏輯如下所示：

• 如果有一個運算子是null，返回null
• 如果有一個運算子是NaN，返回NaN
• 如果有一個運算子是undefined，返回undefined

4.3.3 或運算符

    || 也可以用於多個表達式求值。，其運算規則如下所示：

• 所有表達式中，只有一個表達式值爲true，則爲true
• 如果第一個表達式爲true，則直接返回true
• 如果第一個運算子的布爾值爲true，則返回第一個運算子的值，且不再對第二個運算子求值，如果第一個運算子的布爾值爲false，則返回第二個運算子的值

"true" || "true" //  true
true || 3 > 2 && false  //  true
"t" || "f" // t
"" || "Surpass"
"true" || 2>3 || false  // true

短路規則同樣也適用於或運算符

    對於特殊字符的處理邏輯如下所示：

• 如果兩個運算子都是null，返回null
• 如果兩個運算子都是NaN，返回NaN
• 如果兩個運算子都是undefined，返回undefined

4.3.4 非運算符

    非運算符常用於將一個布爾值變爲其反值，即true變爲false，false變爲true。

!true // false
!false // true

    對於非布爾值，非運算符會將其轉換爲布爾值，以下6個值進行非運算後爲true，其他值均爲false

• undefined
• null
• false
• 0
• NaN
• 空字符串（""）

4.4 其他運算符

4.4.1 逗號運算符

    逗號運算符可以用來在一條語句中執行多個操作，如下所示：

let a=1,b=2,c=3;
console.log("a value is;"+a+"\nb value is:"+b+"\nc value is:"+c);

輸出結果如下所示：

a value is;1
b value is:2
c value is:3

4.4.2 條件運算符

    條件運算符語法格式如下所示：

variable = boolean_expression ? true_value : false_value;

    variable最終值取決於boolean_expression的值，如果boolean_expression爲true，則賦值true_value，否則，則賦值false_value，示例如下所示：

let a=100,b=123;
let result=(a>b)?"a大於b":"a小於b";
console.log("result is:",result) // result is: a小於b

原文地址：https://www.jianshu.com/p/64391eb825fc

本文同步在微信訂閱號上發佈，如各位小夥伴們喜歡我的文章，也可以關注我的微信訂閱號：woaitest，或掃描下面的二維碼添加關注：