JavaScript运算符

在本章节中，我们将学习JavaScript的各种运算符，包括算术运算符、赋值运算符、比较运算符、逻辑运算符等。

1. 什么是运算符？

运算符是用于执行特定数学或逻辑操作的符号。在JavaScript中，运算符可以用于操作变量和值。

根据功能，JavaScript运算符可以分为以下几类：

  • 算术运算符
  • 赋值运算符
  • 比较运算符
  • 逻辑运算符
  • 位运算符
  • 一元运算符
  • 三元运算符
  • 类型运算符

2. 算术运算符

算术运算符用于执行数学运算，如加法、减法、乘法和除法。

运算符 描述 示例 结果
+ 加法 x + y x和y的和
- 减法 x - y x和y的差
* 乘法 x * y x和y的积
/ 除法 x / y x和y的商
% 取余（模） x % y x除以y的余数
++ 自增 x++或++x x增加1
-- 自减 x--或--x x减少1

2.1 基本算术运算

let x = 10;
let y = 5;

let sum = x + y; // 15
let difference = x - y; // 5
let product = x * y; // 50
let quotient = x / y; // 2
let remainder = x % y; // 0

2.2 自增和自减运算符

自增（++）和自减（--）运算符用于增加或减少变量的值。它们可以放在变量前面或后面，产生不同的结果。

let x = 10;
let y = 10;

let a = x++; // 先赋值，后自增，a = 10, x = 11
let b = ++y; // 先自增，后赋值，b = 11, y = 11

let c = x--; // 先赋值，后自减，c = 11, x = 10
let d = --y; // 先自减，后赋值，d = 10, y = 10

3. 赋值运算符

赋值运算符用于给变量赋值。JavaScript提供了多种赋值运算符，可以简写一些常见的操作。

运算符 描述 示例 等价于
= 简单赋值 x = y x = y
+= 加后赋值 x += y x = x + y
-= 减后赋值 x -= y x = x - y
*= 乘后赋值 x *= y x = x * y
/= 除后赋值 x /= y x = x / y
%= 取余后赋值 x %= y x = x % y
<<= 左移后赋值 x <<= y x = x << y
>>= 右移后赋值 x >>= y x = x >> y
>>>= 无符号右移后赋值 x >>>= y x = x >>> y
&= 按位与后赋值 x &= y x = x & y
^= 按位异或后赋值 x ^= y x = x ^ y
= 按位或后赋值 x = y x = x y

3.1 赋值运算符示例

let x = 10;

x += 5; // x = x + 5，结果为15
x -= 3; // x = x - 3，结果为12
x *= 2; // x = x * 2，结果为24
x /= 4; // x = x / 4，结果为6
x %= 2; // x = x % 2，结果为0

4. 比较运算符

比较运算符用于比较两个值，并返回一个布尔值（true或false）。

运算符 描述 示例
== 等于（值比较） x == y
=== 全等（值和类型比较） x === y
!= 不等于（值比较） x != y
!== 不全等（值和类型比较） x !== y
> 大于 x > y
< 小于 x < y
>= 大于等于 x >= y
<= 小于等于 x <= y

4.1 比较运算符示例

let x = 10;
let y = "10";

console.log(x == y); // true（值相等）
console.log(x === y); // false（类型不同）
console.log(x != y); // false（值相等）
console.log(x !== y); // true（类型不同）

console.log(x > 5); // true
console.log(x < 5); // false
console.log(x >= 10); // true
console.log(x <= 10); // true

4.2 == 和 === 的区别

  • == 只比较值是否相等，会进行类型转换
  • === 比较值和类型是否都相等，不会进行类型转换

建议在JavaScript中优先使用 ===，避免类型转换带来的意外结果。

5. 逻辑运算符

逻辑运算符用于组合或反转布尔值。

运算符 描述 示例
&& 逻辑与 x && y
|| 逻辑或 x || y
! 逻辑非 !x

5.1 逻辑运算符示例

let x = 10;
let y = 5;

// 逻辑与：两个条件都为true时，结果为true
console.log(x > 5 && y > 2); // true
console.log(x > 15 && y > 2); // false

// 逻辑或：至少有一个条件为true时，结果为true
console.log(x > 15 || y > 2); // true
console.log(x > 15 || y > 10); // false

// 逻辑非：反转布尔值
console.log(!(x > 5)); // false
console.log(!(x > 15)); // true

5.2 短路求值

JavaScript的逻辑运算符具有短路求值特性：

  • 对于 &amp;&amp;，如果第一个操作数为false，就不会计算第二个操作数
  • 对于 ||，如果第一个操作数为true，就不会计算第二个操作数
let x = 10;
let y = 0;

// 短路求值：y > 0为false，所以不会执行x++
let result1 = y > 0 && x++;
console.log(x); // 10

// 短路求值：x > 5为true，所以不会执行y++
let result2 = x > 5 || y++;
console.log(y); // 0

6. 三元运算符

三元运算符（也称为条件运算符）是JavaScript中唯一需要三个操作数的运算符。它用于根据条件返回不同的值。

语法：condition ? expr1 : expr2

  • 如果condition为true，返回expr1
  • 如果condition为false，返回expr2

6.1 三元运算符示例

let x = 10;
let y = 5;

// 比较x和y，返回较大的值
let max = x > y ? x : y; // 10

// 检查年龄是否满18岁
let age = 20;
let canVote = age >= 18 ? "可以投票" : "不能投票"; // "可以投票"

// 嵌套三元运算符
let score = 85;
let grade = score >= 90 ? "A" : 
            score >= 80 ? "B" : 
            score >= 70 ? "C" : 
            score >= 60 ? "D" : "F"; // "B"

7. 类型运算符

类型运算符用于检测变量的类型。

运算符 描述 示例
typeof 返回变量的类型 typeof x
instanceof 检测对象是否为某个构造函数的实例 x instanceof Object

7.1 typeof 运算符

let x = 10;
let y = "Hello";
let z = true;
let a = undefined;
let b = null;
let c = {};
let d = [];
let e = function() {};

console.log(typeof x); // "number"
console.log(typeof y); // "string"
console.log(typeof z); // "boolean"
console.log(typeof a); // "undefined"
console.log(typeof b); // "object"（注意：null的类型是object，这是JavaScript的一个历史bug）
console.log(typeof c); // "object"
console.log(typeof d); // "object"（数组是特殊的对象类型）
console.log(typeof e); // "function"

7.2 instanceof 运算符

let obj = {};
let arr = [];
let date = new Date();

console.log(obj instanceof Object); // true
console.log(arr instanceof Array); // true
console.log(arr instanceof Object); // true（数组是对象的子类）
console.log(date instanceof Date); // true

8. 运算符优先级

运算符优先级决定了表达式中运算的执行顺序。优先级高的运算符先执行，优先级低的运算符后执行。

常见运算符的优先级（从高到低）：

  1. 括号 ()
  2. 一元运算符 ++, --, !, typeof
  3. 乘法、除法、取余 *, /, %
  4. 加法、减法 +, -
  5. 比较运算符 &gt;, &lt;, &gt;=, &lt;=
  6. 相等运算符 ==, !=, ===, !==
  7. 逻辑与 &amp;&amp;
  8. 逻辑或 ||
  9. 三元运算符 ? :
  10. 赋值运算符 =, +=, -=, *=, /= 等

8.1 运算符优先级示例

// 先执行乘法，再执行加法
let result1 = 10 + 5 * 2; // 20

// 使用括号改变优先级，先执行加法，再执行乘法
let result2 = (10 + 5) * 2; // 30

// 先执行逻辑非，再执行逻辑与，最后执行逻辑或
let result3 = true || false && !true; // true

9. 位运算符

位运算符用于对二进制数进行操作。在JavaScript中，位运算符会将操作数转换为32位整数，然后执行操作。

运算符 描述
& 按位与
| 按位或
^ 按位异或
~ 按位非
<< 左移
>> 有符号右移
>>> 无符号右移

9.1 位运算符示例

let x = 5; // 二进制：00000000000000000000000000000101
let y = 3; // 二进制：00000000000000000000000000000011

let andResult = x & y; // 1（二进制：00000000000000000000000000000001）
let orResult = x | y; // 7（二进制：00000000000000000000000000000111）
let xorResult = x ^ y; // 6（二进制：00000000000000000000000000000110）
let notResult = ~x; // -6（二进制：11111111111111111111111111111010）
let leftShiftResult = x << 1; // 10（二进制：00000000000000000000000000001010）
let rightShiftResult = x >> 1; // 2（二进制：00000000000000000000000000000010）

10. 常见问题解答

Q: 为什么null的typeof是object？

A: 这是JavaScript的一个历史bug。在JavaScript的早期版本中，null被错误地设计为object类型。这个bug至今没有被修复，因为修复它会破坏大量现有的代码。

Q: 什么时候使用三元运算符？

A: 三元运算符适用于简单的条件判断，可以简化代码。对于复杂的条件判断，建议使用if-else语句，以提高代码的可读性。

Q: 为什么要使用===而不是==？

A: 因为===不会进行类型转换，比较结果更可靠。例如，0 == ""会返回true，这可能不是我们期望的结果，而0 === ""会返回false。

Q: 什么是短路求值？

A: 短路求值是指在逻辑运算中，如果第一个操作数已经可以确定整个表达式的结果，就不会计算第二个操作数。这可以提高代码的执行效率。

11. 练习项目

  1. 创建一个HTML文件，包含以下内容：

    • 两个输入框，用于输入数字
    • 一个下拉菜单，用于选择运算符（+、-、*、/）
    • 一个按钮，用于计算结果
    • 一个显示结果的区域

  2. 使用JavaScript实现以下功能：

    • 获取输入框的值和选择的运算符
    • 根据运算符执行相应的计算
    • 显示计算结果
    • 处理可能的错误，如除零错误

  3. 测试不同的运算符，确保计算结果正确

12. 小结

  • 运算符是用于执行特定数学或逻辑操作的符号
  • JavaScript提供了多种运算符，包括算术运算符、赋值运算符、比较运算符、逻辑运算符等
  • 运算符优先级决定了表达式中运算的执行顺序
  • 建议优先使用===而不是==，避免类型转换带来的意外结果
  • 短路求值可以提高代码的执行效率
  • 三元运算符适用于简单的条件判断，可以简化代码

在下一章节中，我们将学习JavaScript表达式和语句的相关知识。

« 上一篇 JavaScript数据类型 下一篇 » JavaScript表达式
↑