引言

在 JavaScript 中,运算符和表达式是让代码“动”起来的魔法棒。通过这些符号和表达式,开发者可以构建出各种复杂的逻辑,驱动程序的运行。本篇文章将带你轻松掌握这些基础知识,并展示它们在实际应用中的使用方法。


1. 算术运算符

算术运算符就像数学课上的加减乘除,可以对数字进行各种运算。它们是编写计算逻辑的基础工具。

运算符名称示例结果
+加法5 + 1015
-减法15 - 510
*乘法5 * 315
/除法15 / 35
%取余10 % 31
**指数(幂)2 ** 38

实际应用示例:

// 计算购物车中商品的总价格
let item1 = 49.99;
let item2 = 29.99;
let item3 = 9.99;
let totalPrice = item1 + item2 + item3; // 计算总价
console.log(`Total Price: $${totalPrice.toFixed(2)}`); // 输出:Total Price: $89.97

注意事项:

  • 除法运算时,如果除数是 0,JavaScript 不会抛出错误,而是返回 Infinity-Infinity。除以 0 的结果不可预测,因此要小心处理。
  • % 运算符对负数的取余可能不符合某些编程语言中的定义,使用时要确保理解它的行为。

2. 赋值运算符

赋值运算符用于将值赋给变量。除了简单的 = 运算符,还有许多复合赋值运算符可以简化代码。

运算符名称示例结果
=赋值x = 10x = 10
+=加法赋值x += 5x = x + 5
-=减法赋值x -= 3x = x - 3
*=乘法赋值x *= 2x = x * 2
/=除法赋值x /= 2x = x / 2
%=取余赋值x %= 3x = x % 3

实际应用示例:

// 计算员工的年薪增长
let salary = 50000;
let raise = 0.1; // 10% 的加薪
salary += salary * raise; // 加薪后的年薪
console.log(`New Salary: $${salary}`); // 输出:New Salary: $55000

常见错误及处理:

  • 使用未初始化的变量进行赋值操作会导致 NaN(不是一个数字)结果。在使用变量之前,确保它已正确初始化。

3. 比较运算符

比较运算符用于比较两个值的大小或相等性,结果为布尔值 (truefalse)。在条件判断和逻辑控制中非常常用。

运算符名称示例结果
==等于5 == "5"true
===严格等于5 === "5"false
!=不等于5 != "5"false
!==严格不等于5 !== "5"true
>大于10 > 5true
<小于10 < 5false
>=大于等于10 >= 10true
<=小于等于10 <= 5false

实际应用示例:

// 判断用户是否成年
let age = 20;
let isAdult = age >= 18; // 判断年龄是否大于或等于 18
console.log(`Is adult: ${isAdult}`); // 输出:Is adult: true

常见错误及处理:

  • 使用 == 进行比较时,JavaScript 会尝试进行类型转换,这可能会导致意外的结果。推荐使用 === 进行严格比较,避免类型转换带来的问题。

4. 逻辑运算符

逻辑运算符用于执行逻辑操作,是控制程序流程的关键工具。

运算符名称示例结果
&&逻辑与true && falsefalse
`\\`逻辑或`true \\false`true
!逻辑非!truefalse

实际应用示例:

// 检查用户是否满足购买酒精的条件
let age = 21;
let hasID = true;
let canBuyAlcohol = age >= 21 && hasID; // 必须满足两个条件
console.log(`Can buy alcohol: ${canBuyAlcohol}`); // 输出:Can buy alcohol: true

高级用法提示:

  • 短路求值:&&|| 运算符具有短路求值特性。在 && 中,如果第一个操作数为 false,则直接返回 false,不会再评估第二个操作数。在 || 中,如果第一个操作数为 true,则直接返回 true
  • 可以利用这一特性简洁地处理默认值或条件初始化。例如:

    let user = { name: "Alice" };
    let displayName = user.name || "Guest"; // 如果 user.name 存在,则使用它;否则显示 "Guest"

5. 条件(三元)运算符

条件运算符(? :)是 JavaScript 中唯一的三元运算符,它是 if-else 语句的简洁版。

运算符名称示例结果
? :条件运算符age >= 18 ? "Yes" : "No""Yes"

实际应用示例:

// 判断一个人是否符合优惠条件
let age = 16;
let discount = age < 18 ? "Eligible for discount" : "No discount"; // 判断年龄是否符合优惠条件
console.log(discount); // 输出:Eligible for discount

提示:

  • 三元运算符虽然简洁,但在逻辑复杂时,使用 if-else 语句会让代码更易读。

结论

掌握运算符和表达式是编写高效 JavaScript 代码的基础。通过对各种运算符的理解,开发者可以构建出更加灵活和功能强大的应用程序。

社区与资源

想进一步学习和探索 JavaScript 吗?以下是一些推荐的社区和资源:

解决 JavaScript 编程问题的社区。

最后修改:2024 年 08 月 09 日
如果觉得我的文章对你有用,请随意赞赏