iT邦幫忙

2021 iThome 鐵人賽

DAY 7
0
自我挑戰組

追憶JS年華系列 第 7

Day 07 借箸代籌(1):運算式、運算子

  • 分享至 

  • xImage
  •  

前文曾述及的陳述句(statement),是構成JavaScript程式的兩大類語法之一,其之二,即為本文介紹的表達句(expression)。

補遺:陳述句?表達句

易言之,「陳述句」可以視為「許多表達句」(statement = expression * n)

statement:一個完整句子,可以表達完整的意思。沒有回傳值。如

  • Function statement:function a( ) { }
  • if

expression:單字、片語,細分句子內容成最小語意。有回傳值。

  • Function expression:const a = function( ) { }
  • function( ) { } 為 a 的回傳值。

如前文「宣告變數、賦值」一樣執行「動作」,是陳述句的基本性質,其餘還有迴圈、邏輯判斷也是這種動作的一種。相較之下,表達句本身則會產生「值(value)」。例如:

呼叫函式(function)時的參數(小括號中)

function noExistDay (8) {
  return 8*8;
}

變數「=」右側的賦值

let noExistDay = 8*8;

此時,表達句中的運算子(Operator)會獲得數值,以資運算。常見的四則運算(加、減、乘、除)都是運算子的一種。前例即運算子*(乘)獲得兩個數值8。

運算子種類繁多,以下就最常用的算術運算子(Arithmetic Operator)夾敘夾例。

四則運算

A-1 加法

在加法中,JavaScript與一般運算沒有不同(是的1+1=2不用懷疑),但若帶入前文曾樹述及的那種「非數字的數字」,結果變熟難逆料了。
值得注意的是,任何數字與NaN一起被運算的話,結果必為NaN。茲彙整如下:

Infinity + Infinity //得出Infinity
-Infinity + -Infinity //得出 -Infinity
-Infinity + Infinity //得出NaN
Infinity + NaN //得出NaN
-Infinity + NaN //得出NaN
64 + NaN //得出NaN

又如前文所述,在JavaScript中「字串」是可以相加的,而任何數字加上字串,結果都會變成字串(還記得banana嗎?)。此現象又稱為自動轉型。例如:

"123" + 456 //得出123456
2019 + "令和元年" //得出 2019令和元年

搭配「由左至右」、「先乘除後加減」的性質,可以適當搭配想要的運算結果。

A-2 減法

在減法中,JavaScript與一般運算沒有不同(是的3-2=1不用懷疑)。得出NaN的規則與前面相同。特殊的「非數字的數字」相減狀況如下:

Infinity - Infinity //得出NaN
-Infinity - -Infinity //得出 NaN
-Infinity - Infinity //得出 -Infinity
Infinity - -Infinity //得出 Infinity

然而,與加法不同,若減法遇到非數字的基本型別如字串、布林值、undefined與null時,會被轉化為數字再做計算。轉為數字後,仍無法計算的特殊相減情形枚舉如下:

64 - "Beijing" //得出NaN
64 – false  //得出64,會被轉為0
64 – true //得出63,會被轉為63
64 – undefined //得出63,會被轉為NaN
64 – null //得出64

若遇到非數字的物件型別,對象有數字賦值的話(如let a = 89 的 a),會被當作數字相減,若否,則得出NaN。

A-3 乘法

在乘法中,JavaScript與一般運算沒有不同(是的8*8=64不用懷疑),結果為乘積。若超過可計算數字範圍,視結果正/負數會得出Infinity 或 -Infinity。若有一方不是數字(可能得出NaN),情形與減法枚舉對象類同。

A-4 除法

在乘法中,JavaScript與一般運算沒有不同(是的8/8=1不用懷疑),結果為商。若被除數為0,視除數之正負狀態,會得出Infinity 或 -Infinity。若除數為0(0除以0),會得出NaN。

此外,還可運用 % 符號取得除法後的餘數(不能被整除所留下的數)。如

let friday = 13 % 10
console.log(friday); //得出3

一元運算子

所謂一元運算子(Unary Operator)的運算,就是單一數值完成的運算。比如替數字加正、負數符號,以及遞增(++)與遞減(--)。效果如:

let age = 87;

age++
console.log(age); //得出88

age--
console.log(age); //得出86

比較運算子

所謂比較運算子(Operator)的運算,即為兩側數值比較後之true或false之結果。在相關運算中,貌似等號(=)的符號佔有重要角色。茲分述如下。

單一等號如至今為止之介紹,代表指定與賦值,也就是將右邊的「值」指定給左邊的「變數」。接著,進入比較運算後,就會用到兩個等號(==)進行值的比較。如

let prideOfJapan = “Syukuro Manabe”;
let prideOfKorea = “Hwang Woo-suk”;

console.log(prideOfJapan == prideOfKorea); //得出false 日本的驕傲不同於韓國的驕傲
console.log(prideOfJapan == Syukuro Manabe); //得出true 日本的驕傲是真鍋淑郎
console.log(prideOfKorea == “Hwang Woo-suk”); //得出true 韓國的驕傲是黃禹錫

https://ithelp.ithome.com.tw/upload/images/20211010/20141041M6cSlQTNDo.jpg

有趣的是,字面相同,資料型態不同時,在 == 的比較下有不同:

let undercover = 27149;
let chanWingYan = “27149”;

console.log(undercover == chanWingYan) //得出true,臥底就是陳永仁

然而,相同前提下,進行各式字串、符號的比較,會得出不規則、不具規律的結果。其原因源於JavaScript「自動轉型」(後文詳述)。為避免這種困擾,JavaScript另備有更嚴格的比較運算子:三個等號「===」。

「===」與「==」的最大不同,就是前者不會把值自動轉型、更嚴格、要求「值」與「資料型態」的雙吻合才得出true。換言之,若將前例以三個等號嚴格比較,結果會有所不同:

let undercover = 27149;
let chanWingYan = “27149”;

console.log(undercover === chanWingYan) //得出false,臥底不是陳永仁

有鑑於此,與前文推薦多用let少用var宣告的理由類似,在JavaScript,也請多用三個等號「===」取代兩個等號「==」進行有關比較。


上一篇
Day-06 始於足下:基本語法、陳述句與宣告
下一篇
Day 08 借箸代籌(2):自動轉型、運算子及其後
系列文
追憶JS年華30
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言