JavaScript - 运算符

你好，未来的JavaScript大师们！我很高兴能成为你们在这激动人心的JavaScript运算符世界中的向导。作为一个教编程多年的老师，我可以告诉你，理解运算符就像学习编程世界的秘密握手。那么，让我们一起来揭开这些谜团吧！

什么是运算符？

在深入细节之前，让我们从基础开始。在JavaScript中，运算符是一个特殊的符号，用于对操作数（值和变量）执行操作。可以把运算符想象成编程语言中的动词——它们是让事情发生的行为！

例如，在表达式 2 + 3 中，+ 是运算符，而 2 和 3 是操作数。简单吧？

JavaScript算术运算符

现在，让我们来谈谈算术运算符。这些是JavaScript中进行数学操作的基础。回想一下你学过的数学课程吧？现在是时候重拾那些知识了！

以下是一个算术运算符的表格：

运算符	描述	示例
+	加法	5 + 3 = 8
-	减法	5 - 3 = 2
*	乘法	5 * 3 = 15
/	除法	15 / 3 = 5
%	求余（余数）	5 % 2 = 1
++	自增	让 x = 5; x++; （现在 x 是 6）
--	自减	让 x = 5; x--; （现在 x 是 4）

让我们看看这些运算符的实际应用：

let a = 10;
let b = 5;

console.log(a + b); // 输出：15
console.log(a - b); // 输出：5
console.log(a * b); // 输出：50
console.log(a / b); // 输出：2
console.log(a % b); // 输出：0

a++; // a 现在是 11
console.log(a); // 输出：11

b--; // b 现在是 4
console.log(b); // 输出：4

这段代码的每一行都演示了这些运算符的工作方式。模运算符（%）对一些人来说可能是新的——它给出了除法后的余数。在检查一个数字是偶数还是奇数时，它非常有用！

JavaScript比较运算符

接下来，我们来看看比较运算符。这些就像编程比赛中的评委——它们比较值并返回true或false。它们对于代码中的决策至关重要。

以下是一个比较运算符的表格：

运算符	描述	示例
==	等于	5 == 5 返回 true
===	严格等于（值和类型）	5 === "5" 返回 false
!=	不等于	5 != 3 返回 true
!==	严格不等于	5 !== "5" 返回 true
>	大于	5 > 3 返回 true
<	小于	5 < 3 返回 false
>=	大于或等于	5 >= 5 返回 true
<=	小于或等于	5 <= 3 返回 false

让我们看看这些运算符的实际应用：

let x = 5;
let y = "5";

console.log(x == y);  // 输出：true
console.log(x === y); // 输出：false
console.log(x != y);  // 输出：false
console.log(x !== y); // 输出：true
console.log(x > 3);   // 输出：true
console.log(x < 10);  // 输出：true
console.log(x >= 5);  // 输出：true
console.log(x <= 4);  // 输出：false

注意 == 和 === 之间的区别。三等号（===）检查值和类型，而双等号（==）只检查值。这是初学者常见的错误来源，所以使用时要格外小心！

JavaScript逻辑运算符

逻辑运算符是JavaScript中的决策者。它们帮助组合多个条件并做出复杂的决策。可以把它们想象成编程村庄中的智者，指导你的代码做出正确的选择。

以下是一个逻辑运算符的表格：

运算符	描述	示例
&&	逻辑与	(x > 0 && x < 10)
||	逻辑或	(x === 5 || y === 5)
!	逻辑非	!(x === y)

让我们看看这些运算符的实际应用：

let a = 5;
let b = 10;

console.log(a > 0 && b < 20);  // 输出：true
console.log(a > 10 || b === 10);  // 输出：true
console.log(!(a === b));  // 输出：true

&& 运算符仅在两个条件都为true时返回true。|| 运算符只要至少有一个条件为true就返回true。! 运算符反转布尔值——它将true变为false，将false变为true。

JavaScript位运算符

现在，我们进入了位运算符的领域。这些运算符在整数值的位上工作。它们就像编程世界的秘密特工——不常使用，但在需要时非常强大。

以下是一个位运算符的表格：

运算符	描述
&	位与
|	位或
^	位异或
~	位非
<<	左移
>>	符号右移
>>>	零填充右移

这些运算符比较高级，所以如果一开始觉得困惑，不用担心。随着你在JavaScript旅程中的进步，你会遇到需要它们的情况。

JavaScript赋值运算符

赋值运算符用于给变量赋值。它们就像编程世界中的搬运工——它们将事物放在它们应该属于的地方。

以下是一个赋值运算符的表格：

运算符	描述	示例
=	赋值	x = 5
+=	加法赋值	x += 3 等同于 x = x + 3
-=	减法赋值	x -= 3 等同于 x = x - 3
*=	乘法赋值	x = 3 等同于 x = x 3
/=	除法赋值	x /= 3 等同于 x = x / 3
%=	求余赋值	x %= 3 等同于 x = x % 3

让我们看看这些运算符的实际应用：

let x = 5;
console.log(x); // 输出：5

x += 3;
console.log(x); // 输出：8

x -= 2;
console.log(x); // 输出：6

x *= 4;
console.log(x); // 输出：24

x /= 3;
console.log(x); // 输出：8

x %= 3;
console.log(x); // 输出：2

这些运算符是快捷方式，使你的代码更加简洁和易读。它们就像编程世界的瑞士军刀——多用途且方便！

JavaScript杂项运算符

最后，让我们看看一些不适合其他类别的杂项运算符。

1. 条件（三元）运算符：这是if-else语句的简写形式。

let age = 20;
let canVote = (age >= 18) ? "Yes" : "No";
console.log(canVote); // 输出："Yes"

这个运算符检查 age >= 18 是否为true。如果是，它将 "Yes" 赋值给 canVote，否则将 "No" 赋值给它。

2. typeof运算符：这个运算符返回一个字符串，表示操作数的类型。

console.log(typeof 42);        // 输出："number"
console.log(typeof 'blubber'); // 输出："string"
console.log(typeof true);      // 输出："boolean"
console.log(typeof [1, 2, 4]); // 输出："object"

3. delete运算符：这个运算符删除对象的属性或数组的元素。

let person = {name: "John", age: 30};
delete person.age;
console.log(person); // 输出：{name: "John"}

就这样，大家！我们一起穿越了JavaScript运算符的土地。记住，熟能生巧。所以，不要害怕在你们自己的代码中尝试这些运算符。祝你们编程愉快！

Credits: Image by storyset