Day 07 借箸代筹(1):运算式、运算子

前文曾述及的陈述句(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,也请多用三个等号「===」取代两个等号「==」进行有关比较。


<<:  第十七天:该用 implementation 还是 compile?

>>:  Day08 - 用 axios 做登入功能

Day 08 CSS <文本属性>

CSS Text 属性可定义文本的外观 例如 : 文本的颜色、对齐文本、装饰文本、文本缩进、行间距 ...

(Day29)第三方套件---图表套件Charts(上)

Charts 官方网站 https://github.com/danielgindi/Charts ...

Day 22 Android Unit Test

今年的疫情蛮严重的,希望大家都过得安好, 希望疫情快点过去,能回到一些线下技术聚会的时光~ 今天目标...

[Day 29] 利用CreateML训练的模型判断情绪(下)

昨天我们已经做出用CreateML训练的模型来判断情绪的app,今天就要来展示我们的成果,那这边设...

Day13 - 用 canvas 复刻 小画家 选择剪下移动

说明 在选择剪下时,我们可以建立一个新的 canvas来建立我们所剪下的内容 /** * 滑鼠点下画...