首頁 > web前端 > js教程 > 了解 JavaScript 運算子:帶有範例的完整指南

了解 JavaScript 運算子:帶有範例的完整指南

Linda Hamilton
發布: 2024-12-18 00:15:10
原創
128 人瀏覽過

Understanding JavaScript Operators: A Complete Guide with Examples

### JavaScript 中的運算子

JavaScript 中的運算子是用來對值和變數執行運算的特殊符號。這些操作可以涉及算術、賦值、比較、邏輯和其他操作。了解運算符對於執行基本計算、比較和控製程式碼流程至關重要。

JavaScript 支援多種運算符,它們分為以下類型:


### 1. **算術運算子**
算術運算子用於對數字進行數學計算。

Operator Description Example
Addition 5 3 → 8
- Subtraction 5 - 3 → 2
* Multiplication 5 * 3 → 15
/ Division 5 / 3 → 1.666...
% Modulus (Remainder) 5 % 3 → 2
** Exponentiation 5 ** 2 → 25

例子:

let a = 10;
let b = 2;
console.log(a + b);  // Output: 12
console.log(a - b);  // Output: 8
console.log(a * b);  // Output: 20
console.log(a / b);  // Output: 5
console.log(a % b);  // Output: 0
console.log(a ** b); // Output: 100
登入後複製
登入後複製
登入後複製

**

2. 賦值運算子**

賦值運算子用於為變數賦值。

Operator Description Example
= Assign value x = 5
= Add and assign x = 3 → x = x 3
-= Subtract and assign x -= 2 → x = x - 2
*= Multiply and assign x *= 4 → x = x * 4
/= Divide and assign x /= 2 → x = x / 2
%= Modulus and assign x %= 3 → x = x % 3
**= Exponentiation and assign x **= 2 → x = x ** 2

例子:

let a = 10;
let b = 2;
console.log(a + b);  // Output: 12
console.log(a - b);  // Output: 8
console.log(a * b);  // Output: 20
console.log(a / b);  // Output: 5
console.log(a % b);  // Output: 0
console.log(a ** b); // Output: 100
登入後複製
登入後複製
登入後複製

### 3. **比較運算子**
比較運算子用於比較值並根據條件傳回布林值(true 或 false)。

Operator Description Example
== Equal to (loose) 5 == '5' → true
=== Equal to (strict) 5 === '5' → false
!= Not equal to (loose) 5 != '5' → false
!== Not equal to (strict) 5 !== '5' → true
> Greater than 5 > 3 → true
< Less than 5 < 3 → false
>= Greater than or equal 5 >= 5 → true
<= Less than or equal 5 <= 3 → false

例子:

let x = 10;
x += 5;  // x = x + 5 -> 15
x *= 2;  // x = x * 2 -> 30
console.log(x);  // Output: 30



<hr>

<p><strong>### 4. **邏輯運算子</strong>**<br>
邏輯運算子用於執行邏輯運算,傳回布林值。 </p>

<div><table>
<thead>
<tr>
<th>Operator</th>
<th>Description</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>&&</td>
<td>Logical AND</td>
<td>
true && false → false
</td>
</tr>
<tr>
<td>`</td>
<td></td>
<td>`</td>
</tr>
<tr>
<td>!</td>
<td>Logical NOT</td>
<td>
!true → false
</td>
</tr>
</tbody>
</table></div>

<p><strong>#### 範例:</strong><br>
</p>

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">console.log(5 == '5');  // Output: true (loose comparison)
console.log(5 === '5'); // Output: false (strict comparison)
console.log(10 > 5);    // Output: true
console.log(3 <= 2);    // Output: false
登入後複製
登入後複製

### 5. **一元運算子**
一元運算子對單一操作數進行運算以執行特定操作。

Operator Description Example
Increment x → x = x 1
-- Decrement x-- → x = x - 1
typeof Type of operand typeof x → number
void Evaluates expression without returning a value void(0)

#### 範例:

let a = true;
let b = false;
console.log(a && b);  // Output: false
console.log(a || b);  // Output: true
console.log(!a);      // Output: false
登入後複製

### 6. **三元(條件)運算子
**三元運算子是 if...else 語句的簡寫。它評估一個條件並根據條件是真還是假返回兩個值之一。

Operator Description Example
condition ? expr1 : expr2 If condition is true, return expr1; otherwise, return expr2 x > 10 ? 'Greater' : 'Lesser'

*#### 範例:
*

let a = 10;
let b = 2;
console.log(a + b);  // Output: 12
console.log(a - b);  // Output: 8
console.log(a * b);  // Output: 20
console.log(a / b);  // Output: 5
console.log(a % b);  // Output: 0
console.log(a ** b); // Output: 100
登入後複製
登入後複製
登入後複製

### 7. **位元運算子
**位元運算子對二進制數進行運算。

Operator Description Example
& AND 5 & 3 → 1
` ` OR
^ XOR 5 ^ 3 → 6
~ NOT ~5 → -6
<< Left shift 5 << 1 → 10
>> Right shift 5 >> 1 → 2
>>> Unsigned right shift 5 >>> 1 → 2

*#### 範例:
*

let x = 10;
x += 5;  // x = x + 5 -> 15
x *= 2;  // x = x * 2 -> 30
console.log(x);  // Output: 30
登入後複製

### 8. **擴充運算子 (...)
**擴充運算子可讓您將陣列或物件中的元素解壓縮到新的陣列或物件中。

*#### 範例:
*

console.log(5 == '5');  // Output: true (loose comparison)
console.log(5 === '5'); // Output: false (strict comparison)
console.log(10 > 5);    // Output: true
console.log(3 <= 2);    // Output: false
登入後複製

### 結論

JavaScript 運算子是執行計算、比較和邏輯運算的基礎。無論您是操作值、比較它們還是控製程式流程,理解這些運算子對於高效編碼都至關重要。根據您的任務使用正確的運算符,以確保程式碼乾淨且可讀。

嗨,我是 Abhay Singh Kathayat!
我是一名全端開發人員,擁有前端和後端技術的專業知識。我使用各種程式語言和框架來建立高效、可擴展且用戶友好的應用程式。
請隨時透過我的商務電子郵件與我聯繫:kaashshorts28@gmail.com。

以上是了解 JavaScript 運算子:帶有範例的完整指南的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門推薦
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板