JavaScript 运算符
JavaScript运算符是编程中不可或缺的基础元素，它们允许我们对数据进行各种操作，如数学计算、比较值、分配变量和执行逻辑操作等。掌握运算符的使用是编写高效JavaScript代码的关键一步。
什么是运算符？
运算符是用于对一个或多个值（操作数）执行操作的符号。例如，在表达式5 + 3中，+是运算符，而5和3是操作数。
JavaScript 运算符的分类
JavaScript中有多种类型的运算符，我们将逐一介绍它们。
1. 算术运算符
算术运算符用于执行基本的数学运算。
| 运算符 | 描述 | 示例 |
|---|---|---|
+ | 加法 | x + y |
- | 减法 | x - y |
* | 乘法 | x * y |
/ | 除法 | x / y |
% | 取余（模） | x % y |
** | 幂（ES2016新增） | x ** y |
++ | 递增 | ++x 或 x++ |
-- | 递减 | --x 或 x-- |
javascript
let a = 10;
let b = 3;
console.log(a + b); // 输出: 13
console.log(a - b); // 输出: 7
console.log(a * b); // 输出: 30
console.log(a / b); // 输出: 3.3333333333333335
console.log(a % b); // 输出: 1
console.log(a ** b); // 输出: 1000
let c = 5;
console.log(++c); // 前置递增，输出: 6
console.log(c++); // 后置递增，输出: 6（先使用后加1）
console.log(c); // 输出: 7
前置与后置递增/递减的区别
- 前置递增/递减(
++x/--x)：先增加/减少值，然后使用该值 - 后置递增/递减(
x++/x--)：先使用值，然后增加/减少值
2. 赋值运算符
赋值运算符用于给变量赋值。
| 运算符 | 描述 | 等同于 |
|---|---|---|
= | 赋值 | x = y |
+= | 加并赋值 | x = x + y |
-= | 减并赋值 | x = x - y |
*= | 乘并赋值 | x = x * y |
/= | 除并赋值 | x = x / y |
%= | 取余并赋值 | x = x % y |
**= | 幂并赋值 | x = x ** y |
javascript
let x = 5;
console.log(x); // 输出: 5
x += 3; // 相当于 x = x + 3
console.log(x); // 输出: 8
x *= 2; // 相当于 x = x * 2
console.log(x); // 输出: 16
3. 比较运算符
比较运算符用于比较两个值，并返回一个布尔值（true或false）。
| 运算符 | 描述 | 示例 |
|---|---|---|
== | 等于（值相等） | x == y |
=== | 严格等于（值和类型都相等） | x === y |
!= | 不等于 | x != y |
!== | 严格不等于 | x !== y |
> | 大于 | x > y |
< | 小于 | x < y |
>= | 大于或等于 | x >= y |
<= | 小于或等于 | x <= y |
javascript
let a = 5;
let b = "5";
let c = 8;
console.log(a == b); // 输出: true（值相等）
console.log(a === b); // 输出: false（类型不同）
console.log(a != c); // 输出: true
console.log(a > c); // 输出: false
console.log(a < c); // 输出: true
注意
在JavaScript中，建议使用===和!==（严格相等/不等）运算符，因为它们会同时检查值和类型，避免隐式类型转换带来的问题。
4. 逻辑运算符
逻辑运算符用于确定变量或值之间的逻辑关系。
| 运算符 | 描述 | 示例 |
|---|---|---|
&& | 逻辑与 | x && y |
| ` | ` | |
! | 逻辑非 | !x |
javascript
let x = 6;
let y = 3;
console.log(x > 5 && y < 5); // 输出: true（两个条件都为true）
console.log(x < 5 || y > 5); // 输出: false（两个条件都为false）
console.log(!(x === y)); // 输出: true（x不等于y，取反为true）
短路求值
JavaScript的逻辑运算符支持"短路求值"：
- 对于
&&，如果第一个操作数为false，不会计算第二个操作数 - 对于
||，如果第一个操作数为true，不会计算第二个操作数
5. 三元运算符
三元运算符（条件运算符）是JavaScript中唯一需要三个操作数的运算符，常用于简洁地表达条件语句。
javascript
// 语法: 条件 ? 如果条件为true的值 : 如果条件为false的值
let age = 20;
let status = age >= 18 ? "成年" : "未成年";
console.log(status); // 输出: "成年"
// 相当于以下if-else语句
// if (age >= 18) {
// status = "成年";
// } else {
// status = "未成年";
// }
6. 位运算符
位运算符作用于二进制位级别，处理32位整数。
| 运算符 | 描述 | 示例 |
|---|---|---|
& | 按位与 | x & y |
| ` | ` | 按位或 |
^ | 按位异或 | x ^ y |
~ | 按位非 | ~x |
<< | 左移 | x << y |
>> | 右移（有符号） | x >> y |
>>> | 右移（无符号） | x >>> y |
javascript
let a = 5; // 二进制: 0101
let b = 3; // 二进制: 0011
console.log(a & b); // 按位与: 0001 -> 1
console.log(a | b); // 按位或: 0111 -> 7
console.log(a ^ b); // 按位异或: 0110 -> 6
console.log(~a); // 按位非: -(5+1) -> -6
console.log(a << 1); // 左移一位: 1010 -> 10
console.log(a >> 1); // 右移一位: 0010 -> 2
备注
位运算符在处理图形编程、权限控制等领域有特殊用途，但对大多数初学者来说，不是最常用的运算符类型。
7. 其他重要运算符
7.1 typeof运算符
typeof运算符返回操作数的数据类型。
javascript
console.log(typeof 42); // 输出: "number"
console.log(typeof "Hello"); // 输出: "string"
console.log(typeof true); // 输出: "boolean"
console.log(typeof undefined); // 输出: "undefined"
console.log(typeof null); // 输出: "object"（这是JavaScript的一个历史遗留bug）
console.log(typeof {name: "张三"}); // 输出: "object"
console.log(typeof [1, 2, 3]); // 输出: "object"
console.log(typeof function(){}); // 输出: "function"
7.2 in运算符
in运算符判断指定的属性是否在指定的对象或其原型链中。
javascript
const car = { make: "Toyota", model: "Corolla", year: 2020 };
console.log("make" in car); // 输出: true
console.log("price" in car); // 输出: false
7.3 instanceof运算符
instanceof运算符用于检查一个对象是否是特定类的实例。
javascript
const arr = [1, 2, 3];
console.log(arr instanceof Array); // 输出: true
console.log(arr instanceof Object); // 输出: true（数组也是对象）
console.log(arr instanceof String); // 输出: false
运算符优先级
JavaScript中的运算符有不同的优先级，决定了表达式中的计算顺序。优先级从高到低排列（部分）：
- 圆括号
() - 后置递增/递减
++/-- - 前置递增/递减
++/--、逻辑非!、一元加减+/-、typeof - 幂
** - 乘法
*、除法/、取余% - 加法
+、减法- - 小于
<、大于>、小于等于<=、大于等于>= - 等于
==、不等于!=、严格等于===、严格不等于!== - 逻辑与
&& - 逻辑或
|| - 条件（三元）运算符
? : - 赋值运算符
=、+=、-=等 - 逗号
,
javascript
// 运算符优先级示例
let result = 2 + 3 * 4;
console.log(result); // 输出: 14（先乘法后加法）
let result2 = (2 + 3) * 4;
console.log(result2); // 输出: 20（括号优先计算）
let x = 5;
let y = 10;
let z = x++ + --y;
console.log(z); // 输出: 14（5 + 9）
console.log(x); // 输出: 6（后置递增）
console.log(y); // 输出: 9（前置递减）
最佳实践
当表达式复杂或者不确定运算符优先级时，建议使用括号明确表达计算顺序，提高代码可读性和可维护性。
实际应用场景
场景1：购物车计算总价和折扣
javascript
// 购物车商品
const cart = [
{ name: "T恤", price: 99, quantity: 2 },
{ name: "牛仔裤", price: 199, quantity: 1 },
{ name: "鞋子", price: 299, quantity: 1 }
];
// 计算商品总价
let totalPrice = 0;
for (let item of cart) {
totalPrice += item.price * item.quantity;
}
console.log("商品总价:", totalPrice); // 输出: 696
// 应用折扣（满500减50）
const discount = totalPrice >= 500 ? 50 : 0;
const finalPrice = totalPrice - discount;
console.log("折扣:", discount); // 输出: 50
console.log("最终价格:", finalPrice); // 输出: 646
// 判断是否为VIP客户
const isVIP = true;
// 使用逻辑运算符组合条件
const freeShipping = isVIP || finalPrice >= 600;
console.log("是否免运费:", freeShipping); // 输出: true
场景2：用户表单验证
javascript
function validateForm(user) {
// 使用逻辑运算符检查必填字段
if (!user.name || !user.email) {
return "姓名和邮箱为必填项";
}
// 使用正则表达式和比较运算符验证邮箱格式
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailPattern.test(user.email)) {
return "邮箱格式不正确";
}
// 使用比较运算符验证密码长度
if (user.password && user.password.length < 8) {
return "密码长度必须至少为8位";
}
// 使用三元运算符设置默认值
user.role = user.role || "user";
return "验证通过";
}
// 测试
const user1 = {
name: "张三",
email: "zhangsan@example.com",
password: "password123"
};
const user2 = {
name: "李四",
email: "invalid-email"
};
console.log(validateForm(user1)); // 输出: "验证通过"
console.log(validateForm(user2)); // 输出: "邮箱格式不正确"
场景3：位运算符实际应用 - 权限控制
javascript
// 使用位运算符实现权限控制
const READ = 1; // 二进制: 001
const WRITE = 2; // 二进制: 010
const DELETE = 4; // 二进制: 100
// 给用户分配权限
let userPermission = 0;
// 授予读和写权限
userPermission |= READ | WRITE;
console.log("用户权限:", userPermission); // 输出: 3 (二进制: 011)
// 检查用户是否有读权限
console.log("有读权限:", (userPermission & READ) === READ); // 输出: true
// 检查用户是否有写权限
console.log("有写权限:", (userPermission & WRITE) === WRITE); // 输出: true
// 检查用户是否有删除权限
console.log("有删除权限:", (userPermission & DELETE) === DELETE); // 输出: false
// 授予删除权限
userPermission |= DELETE;
console.log("更新后的权限:", userPermission); // 输出: 7 (二进制: 111)
// 移除写权限
userPermission &= ~WRITE;
console.log("移除写权限后:", userPermission); // 输出: 5 (二进制: 101)
总结
JavaScript运算符是编程中不可或缺的工具，它们让我们能够：
- 执行基本的数学计算（算术运算符）
- 为变量赋值（赋值运算符）
- 比较值（比较运算符）
- 组合逻辑条件（逻辑运算符）
- 根据条件选择不同的值（三元运算符）
- 进行位级操作（位运算符）
掌握运算符及其优先级对于编写高效、清晰的JavaScript代码至关重要。记住，在复杂表达式中，可以使用括号明确指定计算顺序，提高代码可读性。
练习题
- 计算表达式
5 + 3 * 2和(5 + 3) * 2的结果，并解释差异。 - 写一个函数，接收一个数字参数，如果该数字是偶数则返回"偶数"，如果是奇数则返回"奇数"。
- 使用逻辑运算符的短路特性，编写一个设置默认值的例子。
- 使用位运算符，交换两个数值变量（不使用第三个变量）。
附加资源
通过理解和掌握JavaScript运算符，你已经迈出了成为熟练JavaScript开发者的重要一步！