3.6 運算子(Operator)

在 javascript/practice 資料夾底下，建立 operator.html 檔案，以便練習及觀察：

指派運算子(assignment)

等號(=)

var x = 10;
console.log(x); // 10

+= 與 -=

var x = 10;
x += 5; // 等同於 x = x + 5
console.log(x); // 15

var x = 10;
x -= 5; // 等同於 x = x - 5
console.log(x); // 5

*= 與 /=

var x = 10;
x *= 5; // 等同於 x = x * 5
console.log(x); // 50

var x = 10;
x /= 5; // 等同於 x = x / 5
console.log(x); // 2

%= 與 **=

var x = 9;
x %= 5; // 等同於 x = x % 5
console.log(x); // 4

var x = 2;
x **= 5; // 等同於 x = x ** 5  (x 的 5 次方)
console.log(x); // 32

練習

var x = 1;
var y = 2;
var z = 3;

x += y;
y -= z;

console.log(x); // 3
console.log(y); // -1
console.log(z); // 3

算術運算子

• 加：+

• 減：-

• 乘：*

• 除：/

取餘數 (%)

var a = 7;
var b = 2;
var c = 4;

var d = a % b;
var e = a % c;

console.log(d); // 1
console.log(e); // 3

將數值加1： (++)

範例 1：

var a = 1;

a = a + 1;

a++; // 等同於 a = a + 1

++a; // 等同於 a = a + 1

console.log(a); // 4

範例 2：

var a = 1;

a = a + 1;

var b = a++; // 先將 a 的值給 b，再執行 a = a + 1

var c = ++a; // 先執行 a = a + 1，再將 a 的值給 c

console.log(a); // 4
console.log(b); // 2
console.log(c); // 4

將數值減1： (--)

範例 1：

var a = 1;

a = a - 1;

a--; // 等同於 a = a - 1

--a; // 等同於 a = a - 1

console.log(a); // -2

範例 2：

var a = 1;

a = a - 1;

var b = a--; // 先將 a 的值給 b，再執行 a = a - 1

var c = --a; // 先執行 a = a - 1，再將 a 的值給 c

console.log(a); // -2
console.log(b); // 0
console.log(c); // -2

指數 (**)

var a = 2;
var b = a ** 3; // 2 的 3 次方
console.log(b); // 8

字串相加 (+)

請瞭解以下「相加」的結果：

var a = "這是數值";
var b = 1;
var c = a + b;
console.log(c); // "這是數值1"

var d = 1;
var e = 2;
var f = d + e;
console.log(f); // 3

var g = "1";
var h = "2";
var i = g + h;
console.log(i); // "12"

var j = "1";
var k = 2;
var n = j + k;
console.log(n); // "12"

比較運算子

== 與 ===

這兩個最主要的差別，在於 === 會多比較型態的部份。

var a = 1;
var b = 1;
var c = "1";

console.log(a == b);  // true
console.log(a === b); // true
console.log(a == c);  // true
console.log(a === c); // false

!= 與 !==

這兩個最主要的差別，在於 !== 會多比較型態的部份。

var a = 1;
var b = 1;
var c = "1";

console.log(a != b);  // false
console.log(a !== b); // false
console.log(a != c);  // false
console.log(a !== c); // true

> 與 >=

var a = 5;
var b = 5;

console.log(a >= b); // true
console.log(a > b);  // false

< 與 <=

var a = 5;
var b = 5;

console.log(a <= b); // true
console.log(a < b);  // false

三元運算子 (?)

語法：

條件式 ? true : false

例：

var a = 5;
var b = (a >= 5 ? "true回傳這裡" : "false回傳這裡");

console.log(b); // true回傳這裡

邏輯運算子

&& 與 &

這兩個符號都是「且(and)」的意思。

且	判斷一：true	判斷一：false
判斷二：true	結果：true	結果：false
判斷二：false	結果：false	結果：false

var a = 5;
var b = 2;
var c = 1;

console.log(b > a && a > c); // false (註一)
console.log(b > a & a > c);  // 0 (等同於 false 的意思，註二)

註一(使用 && )：第二個判斷(a > c)的部份，並不會執行，因為 b > a 已經是 false，所以第二個判斷是真是假已經不重要。最後的結果一定是 false。

註二(使用 & )：第二個判斷(a > c)的部份，會照常執行。

結論：都直接使用 && 即可，因為效能較佳。

|| 與 |

這兩個符號都是「或(or)」的意思。

或	判斷一：true	判斷一：false
判斷二：true	結果：true	結果：true
判斷二：false	結果：true	結果：false

var a = 5;
var b = 2;
var c = 1;

console.log(a > b || a > c); // true (註一)
console.log(a > b | a > c);  // 1 (等同於 true 的意思，註二)

註一(使用 || )：第二個判斷(a > c)的部份，並不會執行，因為 a > b 已經是 true，所以第二個判斷是真是假已經不重要。最後的結果一定是 true。

註二(使用 | )：第二個判斷(a > c)的部份，會照常執行。

結論：都直接使用 || 即可，因為效能較佳。

! 布靈值反轉

若遇到 !，則 true 變成 false。

若遇到 !，則 false 變成 true。

var a = 5;
var b = 2;

console.log(a > b);     // true
console.log(!(a > b));  // false