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-- |
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 |
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 |
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 |
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中唯一需要三个操作数的运算符,常用于简洁地表达条件语句。
// 语法: 条件 ? 如果条件为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 |
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
运算符返回操作数的数据类型。
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
运算符判断指定的属性是否在指定的对象或其原型链中。
const car = { make: "Toyota", model: "Corolla", year: 2020 };
console.log("make" in car); // 输出: true
console.log("price" in car); // 输出: false
7.3 instanceof运算符
instanceof
运算符用于检查一个对象是否是特定类的实例。
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 - 幂
**
- 乘法
*
、除法/
、取余%
- 加法
+
、减法-
- 小于
<
、大于>
、小于等于<=
、大于等于>=
- 等于
==
、不等于!=
、严格等于===
、严格不等于!==
- 逻辑与
&&
- 逻辑或
||
- 条件(三元)运算符
? :
- 赋值运算符
=
、+=
、-=
等 - 逗号
,
// 运算符优先级示例
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:购物车计算总价和折扣
// 购物车商品
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:用户表单验证
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:位运算符实际应用 - 权限控制
// 使用位运算符实现权限控制
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开发者的重要一步!