【JavaScript-Day 9】从基础到进阶：掌握 JavaScript 核心运算符之算术与赋值篇

Langchain系列文章目录

01-玩转LangChain：从模型调用到Prompt模板与输出解析的完整指南
02-玩转 LangChain Memory 模块：四种记忆类型详解及应用场景全覆盖
03-全面掌握 LangChain：从核心链条构建到动态任务分配的实战指南
04-玩转 LangChain：从文档加载到高效问答系统构建的全程实战
05-玩转 LangChain：深度评估问答系统的三种高效方法（示例生成、手动评估与LLM辅助评估）
06-从 0 到 1 掌握 LangChain Agents：自定义工具 + LLM 打造智能工作流！
07-【深度解析】从GPT-1到GPT-4：ChatGPT背后的核心原理全揭秘
08-【万字长文】MCP深度解析：打通AI与世界的“USB-C”，模型上下文协议原理、实践与未来

Python系列文章目录

PyTorch系列文章目录

机器学习系列文章目录

深度学习系列文章目录

Java系列文章目录

JavaScript系列文章目录

01-【JavaScript-Day 1】从零开始：全面了解 JavaScript 是什么、为什么学以及它与 Java 的区别
02-【JavaScript-Day 2】开启 JS 之旅：从浏览器控制台到 ＜script＞ 标签的 Hello World 实践
03-【JavaScript-Day 3】掌握JS语法规则：语句、分号、注释与大小写敏感详解
04-【JavaScript-Day 4】var 完全指南：掌握变量声明、作用域及提升
05-【JavaScript-Day 5】告别 var 陷阱：深入理解 let 和 const 的妙用
06-【JavaScript-Day 6】从零到精通：JavaScript 原始类型 String, Number, Boolean, Null, Undefined, Symbol, BigInt 详解
07-【JavaScript-Day 7】全面解析 Number 与 String：JS 数据核心操作指南
08-【JavaScript-Day 8】告别混淆：一文彻底搞懂 JavaScript 的 Boolean、null 和 undefined
09-【JavaScript-Day 9】从基础到进阶：掌握 JavaScript 核心运算符之算术与赋值篇

---

---

前言

欢迎来到 JavaScript 学习系列的第九天！在之前的学习中，我们已经了解了 JavaScript 的基本数据类型，包括数字（Number）和字符串（String）等。今天，我们将一起探索如何让这些数据“动起来”——通过使用 JavaScript 中的运算符（Operators）。运算符是执行特定数学或逻辑运算的符号。本篇将重点介绍最常用也是最基础的两类运算符：算术运算符和赋值运算符，它们是编写任何有用程序不可或缺的组成部分。让我们一起揭开它们的面纱，看看如何运用它们来处理数据，让代码更加灵活和强大！

一、算术运算符 (Arithmetic Operators)

算术运算符用于在数字（字面量或变量）之间执行数学计算。它们是我们日常数学运算在编程语言中的体现。

1.1 什么是算术运算符？

在 JavaScript 中，算术运算符接收数字值（或可以转换为数字值的变量）作为其操作数，并返回一个单一的数字值。想象一下你正在用计算器，那些加减乘除的按钮，在 JavaScript 中就是以特定符号的形式存在的。

1.2 常见的算术运算符详解

JavaScript 提供了一系列丰富的算术运算符来满足不同的计算需求。

1.2.1 加法运算符 (+)

加法运算符用于将两个数字相加。

let num1 = 10;
let num2 = 5;
let sum = num1 + num2; // sum 的值为 15
console.log("10 + 5 =", sum); // 输出: 10 + 5 = 15

let price = 19.99;
let tax = 1.5;
let total = price + tax;
console.log("Total price:", total); // 输出: Total price: 21.49

（1） 特殊情况：字符串拼接

值得注意的是，当 + 运算符的一个或两个操作数是字符串时，它会执行字符串拼接操作，而不是算术加法。这是初学者容易混淆的一点。

let greeting = "Hello, ";
let name = "World";
let message = greeting + name; // message 的值为 "Hello, World"
console.log(message);

let strNum = "100";
let num = 50;
console.log(strNum + num); // 输出: "10050" (字符串拼接)
console.log(num + strNum); // 输出: "50100" (字符串拼接)
console.log("The year is " + 2025); // 输出: "The year is 2025"

场景应用：动态生成提示信息、组合用户输入等。

1.2.2 减法运算符 (-)

减法运算符用于从一个数字中减去另一个数字。

let num1 = 10;
let num2 = 5;
let difference = num1 - num2; // difference 的值为 5
console.log("10 - 5 =", difference); // 输出: 10 - 5 = 5

let balance = 100;
let withdrawal = 30;
balance = balance - withdrawal;
console.log("New balance:", balance); // 输出: New balance: 70

如果操作数不是数字，JavaScript 会尝试将其转换为数字再进行运算。

console.log("10" - 5); // 输出: 5 (字符串 "10" 被转换为数字 10)
console.log(true - false); // 输出: 1 (true 转为 1, false 转为 0)

1.2.3 乘法运算符 (*)

乘法运算符用于将两个数字相乘。

let quantity = 5;
let pricePerItem = 20;
let totalCost = quantity * pricePerItem; // totalCost 的值为 100
console.log("Total cost for 5 items at $20 each:", totalCost); // 输出: Total cost for 5 items at $20 each: 100

let area = 3.14 * 5 * 5; // 计算半径为5的圆的面积 (πr²)
console.log("Area of circle with radius 5:", area); // 输出: Area of circle with radius 5: 78.5

1.2.4 除法运算符 (/)

除法运算符用于将一个数字除以另一个数字。

let totalCandies = 20;
let numberOfChildren = 4;
let candiesPerChild = totalCandies / numberOfChildren; // candiesPerChild 的值为 5
console.log("Candies per child:", candiesPerChild); // 输出: Candies per child: 5

let distance = 100; // km
let time = 2; // hours
let speed = distance / time;
console.log("Speed:", speed, "km/h"); // 输出: Speed: 50 km/h

（1） 特殊情况：除以零

在 JavaScript 中，一个数字除以 0 会得到 Infinity (正无穷大) 或 -Infinity (负无穷大)。0 除以 0 会得到 NaN (Not a Number)。

console.log(10 / 0);    // 输出: Infinity
console.log(-10 / 0);   // 输出: -Infinity
console.log(0 / 0);     // 输出: NaN

1.2.5取模（求余）运算符 (%)

取模运算符返回两个数相除后的余数。

let num1 = 10;
let num2 = 3;
let remainder = num1 % num2; // remainder 的值为 1 (10 除以 3 商 3 余 1)
console.log("10 % 3 =", remainder); // 输出: 10 % 3 = 1

let apples = 25;
let basketCapacity = 7;
let remainingApples = apples % basketCapacity;
console.log("Remaining apples after filling baskets:", remainingApples); // 输出: Remaining apples after filling baskets: 4

场景应用：

• 判断一个数是奇数还是偶数：如果 number % 2 的结果是 0，则 number 是偶数；如果是 1 (或 -1 对于负奇数)，则是奇数。
• 周期性操作：例如，每隔 N 次执行某个操作。

let number = 7;
if (number % 2 === 0) {
    console.log(number + " 是偶数");
} else {
    console.log(number + " 是奇数"); // 输出: 7 是奇数
}

1.2.6 自增运算符 (++)

自增运算符将其操作数的值增加 1。它可以作为前缀运算符（++variable）或后缀运算符（variable++）使用。

• 前缀自增 (++variable)：先将变量的值加 1，然后返回新的值。
• 后缀自增 (variable++)：先返回变量的原始值，然后再将变量的值加 1。

let count1 = 5;
let result1 = ++count1; // 先 count1 = count1 + 1 (count1 变为 6), 然后 result1 = count1
console.log("前缀自增:");
console.log("count1:", count1);   // 输出: count1: 6
console.log("result1:", result1); // 输出: result1: 6

let count2 = 5;
let result2 = count2++; // 先 result2 = count2 (result2 变为 5), 然后 count2 = count2 + 1 (count2 变为 6)
console.log("后缀自增:");
console.log("count2:", count2);   // 输出: count2: 6
console.log("result2:", result2); // 输出: result2: 5

场景驱动：常用于循环计数器中。

for (let i = 0; i < 3; i++) { // 常用后缀自增
    console.log("循环次数:", i + 1);
}
// 输出:
// 循环次数: 1
// 循环次数: 2
// 循环次数: 3

1.2.7 自减运算符 (--)

自减运算符将其操作数的值减少 1。与自增运算符类似，它也有前缀和后缀两种形式。

• 前缀自减 (--variable)：先将变量的值减 1，然后返回新的值。
• 后缀自减 (variable--)：先返回变量的原始值，然后再将变量的值减 1。

let lives1 = 3;
let remainingLives1 = --lives1; // 先 lives1 = lives1 - 1 (lives1 变为 2), 然后 remainingLives1 = lives1
console.log("前缀自减:");
console.log("lives1:", lives1);               // 输出: lives1: 2
console.log("remainingLives1:", remainingLives1); // 输出: remainingLives1: 2

let lives2 = 3;
let remainingLives2 = lives2--; // 先 remainingLives2 = lives2 (remainingLives2 变为 3), 然后 lives2 = lives2 - 1 (lives2 变为 2)
console.log("后缀自减:");
console.log("lives2:", lives2);               // 输出: lives2: 2
console.log("remainingLives2:", remainingLives2); // 输出: remainingLives2: 3

实用建议：在简单的独立语句中，前缀和后缀自增/自减效果上是相同的（只改变变量本身的值）。当它们作为更复杂表达式的一部分时，其返回值的差异才显得重要。为了代码清晰，初学者可以先将自增/自减操作作为独立语句。

1.2.8 幂运算符 (**) (ES7/ES2016)

幂运算符（也称指数运算符）返回第一个操作数作底数，第二个操作数作指数的乘方结果，即 $bas{e}^{exponent}$。

let base = 2;
let exponent = 3;
let power = base ** exponent; // power 的值为 8 (2 * 2 * 2)
console.log("2 ** 3 =", power); // 输出: 2 ** 3 = 8

console.log(5 ** 2);   // 输出: 25 (5的平方)
console.log(4 ** 0.5); // 输出: 2 (4的平方根)
console.log(3 ** -1);  // 输出: 0.3333333333333333 (3的倒数)

在 ES7 之前，通常使用 Math.pow() 方法来实现幂运算：

let powerOld = Math.pow(2, 3); // 同样是 8
console.log("Math.pow(2, 3) =", powerOld);

** 运算符提供了一种更简洁的语法。

二、赋值运算符 (Assignment Operators)

赋值运算符用于给 JavaScript 变量赋值。最基本的赋值运算符是等号 (=)，它将右操作数的值赋给左操作数。此外，JavaScript 还提供了一系列复合赋值运算符，它们是算术运算和赋值操作的简写形式。

2.1 基本赋值运算符 (=)

这是我们最早接触到的运算符之一，用于将一个值赋给一个变量。

let myName = "CSDN User"; // 将字符串 "CSDN User" 赋给变量 myName
let age = 25;            // 将数字 25 赋给变量 age
let isActive = true;     // 将布尔值 true 赋给变量 isActive

// 赋值表达式本身也有一个值，即赋给左侧的值
let x;
let y = (x = 10); // x 被赋值为 10，然后 y 也被赋值为 10
console.log("x:", x, "y:", y); // 输出: x: 10 y: 10

2.2 复合赋值运算符

复合赋值运算符是算术运算符和基本赋值运算符的组合，它们可以使代码更简洁。

2.2.1 加法赋值 (+=)

x += y 等价于 x = x + y。

let score = 100;
let bonus = 20;
score += bonus; // score = score + bonus; score 现在是 120
console.log("Score after bonus:", score); // 输出: Score after bonus: 120

let message = "Hello";
message += " World!"; // message = message + " World!"; message 现在是 "Hello World!"
console.log(message); // 输出: Hello World!

2.2.2 减法赋值 (-=)

x -= y 等价于 x = x - y。

let accountBalance = 500;
let expense = 50;
accountBalance -= expense; // accountBalance = accountBalance - expense; accountBalance 现在是 450
console.log("Account balance after expense:", accountBalance); // 输出: Account balance after expense: 450

2.2.3 乘法赋值 (*=)

x *= y 等价于 x = x * y。

let items = 3;
let price = 15;
items *= 2; // items = items * 2; items 现在是 6 (假设买了双倍数量)
let totalPrice = items * price;
console.log("Total price for " + items + " items:", totalPrice); // Total price for 6 items: 90

2.2.4 除法赋值 (/=)

x /= y 等价于 x = x / y。

let totalDistance = 200;
totalDistance /= 2; // totalDistance = totalDistance / 2; totalDistance 现在是 100 (假设走了路程的一半)
console.log("Remaining distance:", totalDistance); // 输出: Remaining distance: 100

2.2.5 取模赋值 (%=)

x %= y 等价于 x = x % y。

let count = 17;
let groupSize = 5;
count %= groupSize; // count = count % groupSize; count 现在是 2 (17 % 5 = 2)
console.log("Items not fitting into full groups:", count); // 输出: Items not fitting into full groups: 2

2.2.6 幂赋值 (**=) (ES7/ES2016)

x **= y 等价于 x = x ** y。

let num = 3;
num **= 3; // num = num ** 3; num 现在是 27 (3 * 3 * 3)
console.log("3 to the power of 3 is:", num); // 输出: 3 to the power of 3 is: 27

为什么使用复合赋值运算符？

• 简洁性：它们使得代码更短，更易于阅读和编写。
• 意图清晰：它们清楚地表明了变量正在基于其自身的值进行更新。

三、运算符优先级初探 (A First Look at Operator Precedence)

当一个表达式中包含多个运算符时，JavaScript 如何决定运算的顺序呢？答案是运算符优先级。就像在小学数学中学到的先乘除后加减一样，JavaScript 的运算符也有自己的执行顺序。

3.1 什么是运算符优先级？

运算符优先级决定了在表达式求值时运算符执行的顺序。优先级高的运算符会先于优先级低的运算符执行。

例如，考虑以下表达式：

let result = 10 + 5 * 2;

你认为 result 是多少？

• 如果是 (10 + 5) * 2，结果是 15 * 2 = 30。
• 如果是 10 + (5 * 2)，结果是 10 + 10 = 20。

由于乘法 (*) 的优先级高于加法 (+)，所以 JavaScript 会先执行 5 * 2，然后再执行加法。因此，result 的值是 20。

let result = 10 + 5 * 2;
console.log("10 + 5 * 2 =", result); // 输出: 10 + 5 * 2 = 20

3.2 使用圆括号控制优先级

如果你希望覆盖默认的运算符优先级，或者想让表达式的计算顺序更加明确，可以使用圆括号 ()。圆括号内的表达式会优先计算。

let resultWithParentheses = (10 + 5) * 2;
console.log("(10 + 5) * 2 =", resultWithParentheses); // 输出: (10 + 5) * 2 = 30

3.3 常见运算符的优先级（初步）

这里列出本篇讨论过的运算符的一个大致优先级顺序（从高到低）：

1. 圆括号 () (最高，用于分组)
2. 幂运算符 **
3. 乘法 *, 除法 /, 取模 % (它们具有相同的优先级，从左到右执行)
4. 加法 +, 减法 - (它们具有相同的优先级，从左到右执行)
5. 赋值运算符 (=, +=, -=, *=, /=, %=, **=) (优先级较低)

注意：自增 ++ 和自减 -- 运算符的优先级比较复杂，取决于它们是前缀还是后缀，并且它们高于乘除。例如 let x = 2; let y = ++x * 3; 结果是 y 为 9 (先 x 变 3，然后 3*3)。

我们将在后续的文章中更详细地探讨完整的运算符优先级表。目前，当不确定优先级或希望代码更清晰时，请毫不犹豫地使用圆括号。

四、总结

今天，我们深入学习了 JavaScript 中的两类基础且核心的运算符：算术运算符和赋值运算符，并初步了解了运算符优先级的概念。这些是构建更复杂逻辑和算法的基石。

核心要点回顾：

• 算术运算符：
  • + (加法，注意字符串拼接)
  • - (减法)
  • * (乘法)
  • / (除法，注意除以零的情况)
  • % (取模，用于求余数，判断奇偶等)
  • ++ (自增，分前缀和后缀)
  • -- (自减，分前缀和后缀)
  • ** (幂运算，ES7 新特性)
• 赋值运算符：
  • = (基本赋值)
  • 复合赋值运算符 (+=, -=, *=, /=, %=, **=) 提供了更简洁的代码编写方式。
• 运算符优先级：
  • 决定了表达式中运算符的执行顺序。
  • 乘除通常优先于加减。
  • 可以使用圆括号 () 来显式控制运算顺序或提高代码可读性。

熟练掌握这些运算符将使你能够更自如地操作数据，实现各种计算和逻辑。在下一篇文章中，我们将继续探索 JavaScript 中其他重要的运算符，如比较运算符和逻辑运算符，它们将帮助我们做出决策，让程序更加智能。敬请期待！

---