[快速入门前端 40] JavaScript：运算式和运算子 (1) 算数运算子和一元运算子

陈述式 (Statement) 和运算式 (Expression)

JavaScript 中的语法主要可以分为两大类，陈述式 (Statement) 和表达式 (Expression)，两者的差别在于陈述式主要用来执行某个动作，例如宣告变数、逻辑判断等。而运算式也被称为表达式，顾名思义会产生一个运算后的「值」，而这个值通常会需要用某个变数去存放，例如 a = 2 + 1 中等号右侧的程式就是表达式。

陈述式是一个叙述句，用来执行某个动作不会有回传值宣告变数、if-else 判断、迴圈等都是陈述式的一种範例

// 宣告变数let a;// if-else 判断if (a !=0 ) {}

运算式进行值的运算会回传值通常会透过符号来表示运算的逻辑，这些符号又被称为运算子範例

100 + 100; // 无执行意义，需要用变数来存放运算结果let a = 100 + 100; // 将回传的值放到变数中

运算子

运算子 (Operator) 是指在运算式中用来进行表达或定义运算规则的符号，让我们达到数学运算、比较、赋值等目的，例如在运算式 1 + 2 中，符号 + 就是一个运算子。在 JavaScript 中运算子有很多种，我们今天主要介绍以下几种：

算术运算子 (Arithmetic Operator)指定运算子 (Assignment Operator)比较运算子 (Comparison Operator)逻辑运算子 (Logical Operator)三元运算子 (Ternary Operator)

算数运算子 Arithmetic Operator

简而言之，就是能够使前后两数进行运算的符号，例如常见的加减乘除等。

运算子意义範例+加 ( 相当于数学加法 )1 + 2 为 3-减 ( 相当于数学加法 )2 - 1 为 1*乘 ( 相当于数学乘法 )2 * 3 为 6/商 ( 相当于数学除法的商 )6 / 2 为 3%    余 ( 相当于数学除法的余数 )        5 % 2 为 3    

範例

let a = 5;let b = 3;let c = 6;console.log(a + b); // 答案为 8console.log(a - b); // 答案为 2console.log(a * b); // 答案为 15console.log(c / b); // 答案为 2console.log(a % b); // 答案为 2

算数运算子的特殊情况 - + ( 加号 )

当两数字型态的变数以 + 符号连接时，会正常进行数学的加法运算

let a = 1 + 1; // 2

当字串 + 字串时，会产生拼接的效果，例如 "12" + "abc" 回传值为 "12abc"

let a = "abc" + "def"; // "abcdef"let b  = "哈啰，" + "你好吗？"; // "哈啰，你好吗？"

字串与任何型态的变数 (包括数字型态) 相加时，变数会先转为字串再进行拼接，例如 123 + "23" 回传值为 "12323"

let a = 1 + "34"; // "134"

非字串型态的变数相加时会先转为 Number 类型后再进行数学运算

let a = true + 1; // 2 (true + 1 = 1 + 1)let b = 1 + null; // 1 (1 + null = 1 + 0)let c = 2 + NaN; // NaN (任何数与 NaN 运算后都是 NaN)

在多个值、不同型态的连续运算中，顺序会影响到最终的结果，如下範例：

// 範例一let a = 1 + 2 + "3"; // "33"// 从头开始计算，首先计算 1 + 2，两者皆为 Number 所以直接相加// 得到答案 3，继续往后计算 3 + "3"// 任意型态遇到字串时皆会转为字串进行拼接，得到最终答案 "33"// 範例二let b = "1" + 2 + 3; // "123"// 计算 "1" + 2，得到答案 "12"// 继续计算 "12" + 3，得到最终答案 "123"

延伸重点

字串与任何型态的变数 (包括数字型态) 相加时，变数会先转为字串再进行拼接，利用这个特点可以用变数 + 空字串达到将变数转为字串型态的方法

let a = 123;let b = a + ""; // "123" (变为字串型态)

除了符号 + 加法有较多特殊情况外，其他算数运算子在遇到非 Number 型态的变数时都会先将其转为数字再进行运算

let a = 100 - true; // = 100 - 1 = 99let b = 100 - "1"; // = 100 - 1 = 99let c = 2 * "8"; // = 2 * 8 = 16let d = 3 / undefined; // = 3 / NaN = NaN ( 任何数与 NaN 运算都会是NaN )let e = 2 * null; // = 2 * 0 = 0

基于上述特点，可以利用 变数 - 0、变数 * 1、变数 / 1 等方式来将值的型态转为 Number

let a = "33" - 0; // 33 (达到转换型态，值不变的效果)

当我们需要利用 console.log 输出变数或值时，可以以符号 + 拼接字串和值，以清楚辨识

let number = 222;console.log("number 值为：" + number); // output 为："number 值为：222"

一元运算子

算数运算子中的符号 + 和 - 在数学上还有另一个意义，就是正和负，在 JavaScript 中也是同理，正号不会对数字值产生影响，负号会将正数变为负数，负数变为正数。而对于非 number 的值，JavaScript 会先将值转为 Number 再进行运算，所以我们同样可以透过在变数或值前面加入正号达到转为 Number 的目的。

在变数前面加负号会对值产生影响

let a = -2; // 值为 -2console.log(-a); // 值为 2 (-2的负数为正 2)

利用正号将变数改为 Number 型态，以顺利进行数学加减运算

// 範例一let a = +"3"; // "3" 原本是 string，透过在前面加正号将值转为 Number 型态// 範例二let b = 1 + "2" + 4; // "124" (2 为字串，所以为 = "12" + 4 = "124")let c = 1 + +"2" + 4; // 7 (2前面加正号，已改为数字型态，所以为 = 1 + 2 + 4 = 7) 

递增和递减

运算符 ++ (递增) 和 -- (递减) 是少数几个会影响到变数本身的值的运算子。当变数与递增符号连接时，例如 1++ 会将变数 +1，它不会回传运算后的值，所以不需要另外赋值到新的变数中。

运算子意义範例++递增 ( 变数本身+1 )，若++在变数之前，则先加1再执行运算，在变数之后则反之10++ 等于 11--递减 ( 变数本身-1 )，规则同递增3 -- 等于 2

範例：

let a = 2;a++; // a 本身 + 1console.log(a); // 3 (a + 1 后变为 3)let b = 5;b--; // b 本身 - 1console.log(b); // 4 (b - 1 后变为 4)

递增递减的先后顺序

上面範例是最常见的递增(减)情境，不过在某些情况中我们会将 ++ 运算符写在变数之前，例如 ++a，递增运算符写在前后的差别是在同一行程式中，先 ++ 会先让变数 + 1 再做其他运算，而后 ++ 则相反，我们可以从以下几个範例来了解：

// 範例一let a = 1;// 在 console 中放数 a++，会在同一行执行 a++ 且印出 aconsole.log(a++); // ++ 在变数之后，所以会此时 a 还是 1console.log(a); // a++ 执行完毕后 a = 2// 範例二let b = 1;console.log(++b); // 2console.log(b); // 2// 範例三let c = 5;c++; // 此时 c = 6console.log(c++); // 6 console.log(c); // 7// 範例四let d = 6;console.log(++d); // 7console.log(++d); // 8

而在连续的加减中也一样需要注意 ++ 或 -- 在变数前或后：

let a = 20;let b = a++ + ++a + a; // = 20 (a++在后，所以此时 a 为 20) + ++a + a// 此时 a 为 21 (已经经过第一个 a++)// = 20 + 22 (a 经过前面 ++ 后为 21，再 ++a 为 22) + a// 此时 a 为 22// = 20 + 22 + 22 = 64console.log(b); // 64

---

上一篇：[快速入门前端 39] JavaScript：资料型态 (2) 强制转换资料型态
javascript
下一篇：[快速入门前端 41] JavaScript：运算式和运算子 (2) 指定运算子、比较运算子、逻辑运算子
系列文章列表：[快速入门前端] 系列文章索引列表