首页 > web前端 > js教程 > 了解 JavaScript 运算符:带有示例的完整指南

了解 JavaScript 运算符:带有示例的完整指南

Linda Hamilton
发布: 2024-12-18 00:15:10
原创
130 人浏览过

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
作者最新文章
热门推荐
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板