跳到主要内容

JavaScript 运算符

JavaScript运算符是编程中不可或缺的基础元素,它们允许我们对数据进行各种操作,如数学计算、比较值、分配变量和执行逻辑操作等。掌握运算符的使用是编写高效JavaScript代码的关键一步。

什么是运算符?

运算符是用于对一个或多个值(操作数)执行操作的符号。例如,在表达式5 + 3中,+是运算符,而53是操作数。

JavaScript 运算符的分类

JavaScript中有多种类型的运算符,我们将逐一介绍它们。

1. 算术运算符

算术运算符用于执行基本的数学运算。

运算符描述示例
+加法x + y
-减法x - y
*乘法x * y
/除法x / y
%取余(模)x % y
**幂(ES2016新增)x ** y
++递增++xx++
--递减--xx--
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. 比较运算符

比较运算符用于比较两个值,并返回一个布尔值(truefalse)。

运算符描述示例
==等于(值相等)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中的运算符有不同的优先级,决定了表达式中的计算顺序。优先级从高到低排列(部分):

  1. 圆括号 ()
  2. 后置递增/递减 ++/--
  3. 前置递增/递减 ++/--、逻辑非 !、一元加减 +/-、typeof
  4. **
  5. 乘法 *、除法 /、取余 %
  6. 加法 +、减法 -
  7. 小于 <、大于 >、小于等于 <=、大于等于 >=
  8. 等于 ==、不等于 !=、严格等于 ===、严格不等于 !==
  9. 逻辑与 &&
  10. 逻辑或 ||
  11. 条件(三元)运算符 ? :
  12. 赋值运算符 =+=-=
  13. 逗号 ,
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运算符是编程中不可或缺的工具,它们让我们能够:

  1. 执行基本的数学计算(算术运算符)
  2. 为变量赋值(赋值运算符)
  3. 比较值(比较运算符)
  4. 组合逻辑条件(逻辑运算符)
  5. 根据条件选择不同的值(三元运算符)
  6. 进行位级操作(位运算符)

掌握运算符及其优先级对于编写高效、清晰的JavaScript代码至关重要。记住,在复杂表达式中,可以使用括号明确指定计算顺序,提高代码可读性。

练习题

  1. 计算表达式 5 + 3 * 2(5 + 3) * 2 的结果,并解释差异。
  2. 写一个函数,接收一个数字参数,如果该数字是偶数则返回"偶数",如果是奇数则返回"奇数"。
  3. 使用逻辑运算符的短路特性,编写一个设置默认值的例子。
  4. 使用位运算符,交换两个数值变量(不使用第三个变量)。

附加资源

通过理解和掌握JavaScript运算符,你已经迈出了成为熟练JavaScript开发者的重要一步!