# 3.6 運算子(Operator)

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

## 指派運算子(assignment)

### 等號(=)

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

### `+=` 與 `-=`

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

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

### `*=` 與 `/=`

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

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

### `%=` 與 `**=`

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

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

### 練習

```javascript
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
```

## 算術運算子

* 加：`+`
* 減：`-`
* 乘：`*`
* 除：`/`

### 取餘數 (%)

```javascript
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：

```javascript
var a = 1;

a = a + 1;

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

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

console.log(a); // 4
```

範例 2：

```javascript
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：

```javascript
var a = 1;

a = a - 1;

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

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

console.log(a); // -2
```

範例 2：

```javascript
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
```

### 指數 (\*\*)

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

## 字串相加 (+)

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

```javascript
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"
```

## 比較運算子

### `==` 與 `===`

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

```javascript
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
```

### `!=` 與 `!==`

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

```javascript
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
```

### `>` 與 `>=`

```javascript
var a = 5;
var b = 5;

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

### `<` 與 `<=`

```javascript
var a = 5;
var b = 5;

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

## 三元運算子 (?)

語法：

`條件式 ? true : false`&#x20;

例：

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

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

## 邏輯運算子

### `&&` 與 `&`

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

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

```javascript
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`)的部份，**會**照常執行。

{% hint style="info" %}
結論：都直接使用 && 即可，因為效能較佳。
{% endhint %}

### `||` 與 `|`

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

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

```javascript
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`)的部份，**會**照常執行。

{% hint style="info" %}
結論：都直接使用 || 即可，因為效能較佳。
{% endhint %}

### `!` 布靈值反轉

若遇到 **`!`**，則 true 變成 false。

若遇到 **`!`**，則 false 變成 true。

```javascript
var a = 5;
var b = 2;

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.webmix.cc/javascript/ji-chu/3.6-yun-suan-zi.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.