JavaScript 从零开始（五）：运算符和表达式——从零开始掌握算术、比较与逻辑运算

开篇：为什么运算符和表达式如此重要

JavaScript运算符和表达式是编程语言的基石，它们构成了代码执行的基本逻辑单元。运算符是执行特定操作的符号，如加(+)、比较(==)和逻辑与(&&)等，而表达式则是这些运算符与操作数组合而成的代码片段，能够计算出结果并影响程序的执行流程。掌握它们对于编写高效、准确的JavaScript代码至关重要，因为它们直接决定了数据的处理方式和程序的判断逻辑。

在学习本主题前，您需要具备基础的JavaScript语法知识，了解变量声明和数据类型的概念。如果您刚入门，不用担心，本文将从基础概念讲起，逐步深入复杂的运算符应用。

本文将系统性地介绍JavaScript中的三类核心运算符：算术运算符用于数值计算；比较运算符用于条件判断；逻辑运算符用于构建复杂条件。此外，我们还会探讨运算符优先级规则，并通过实战案例展示它们的实际应用。每节内容都会配有代码示例和练习，帮助您巩固所学。

为了更好地实践，您可以使用浏览器开发者工具的控制台或在线编辑器如CodePen、JSFiddle来测试代码。这些工具能即时显示运算结果，是学习运算符和表达式的理想环境。现在，让我们一起踏上这段JavaScript运算符和表达式的学习之旅，从零开始掌握编程的核心逻辑构建块。

算术运算符：数值计算的基础工具

在JavaScript中，算术运算符是处理数值计算的基本工具，它们就像数学世界中的加减乘除，但带有编程语言的独特特性。

基本算术运算符包括加(+)、减(-)、乘(*)、除(/)和取余(%)。这些运算符的行为与数学中的对应运算相似，但有一些需要注意的特殊情况：

javascript 复制代码

// 基本算术运算符示例
let sum = 10 + 5;    // 15 - 加法运算
let difference = 10 - 5;  // 5 - 减法运算
let product = 10 * 5;    // 50 - 乘法运算
let quotient = 10 / 5;   // 2 - 除法运算
let remainder = 10 % 3;  // 1 - 取余运算(10除以3余1)

console.log(`10 + 5 = ${sum}`);
console.log(`10 - 5 = ${difference}`);
console.log(`10 * 5 = ${product}`);
console.log(`10 / 5 = ${quotient}`);
console.log(`10 % 3 = ${remainder}`);

自增(++)和自减(--) 运算符有两种形式：前置和后置。前置形式(++x, --x)会先改变变量的值再使用，而后置形式(x++, x--)会先使用变量的值再改变。

javascript 复制代码

let x = 5;
let y = ++x;  // y=6, x=6 (先增加x，再将值赋给y)
let z = x++;  // z=6, x=7 (先将x值赋给z，再增加x)

console.log(`y = ${y}, z = ${z}, x = ${x}`);
// 预期输出: y = 6, z = 6, x = 7

复合赋值运算符如+=、-=、*=、/=等，可以简化代码并提高可读性：

javascript 复制代码

let count = 10;
count += 5;  // 等同于 count = count + 5; (count变为15)
count *= 2;  // 等同于 count = count * 2; (count变为30)

console.log(`count = ${count}`);
// 预期输出: count = 30

数值类型转换是JavaScript中的一个常见陷阱。当使用不同类型的值进行运算时，JavaScript会尝试将它们转换为数值类型，但这可能导致意外的结果：

javascript 复制代码

console.log("5" - 3);    // 2 - 字符串"5"被转换为数字5
console.log("5" + 3);    // "53" - 加号在遇到字符串时会进行字符串连接
console.log("five" * 2); // NaN - 无法转换为字符串的值会导致NaN(Not a Number)
console.log(true + 1);    // 2 - 布尔值true被转换为1
console.log(null + 1);    // 1 - null被转换为0

理解这些算术运算符的行为对于编写健壮的JavaScript代码至关重要，特别是在处理用户输入或进行复杂计算时，要特别注意类型转换的隐式行为。

比较运算符：判断值的异同

比较运算符是JavaScript中用于比较两个值并返回布尔值(true或false)的运算符，它们是程序逻辑判断的基础。让我们深入了解这些看似简单却暗藏玄机的运算符。

相等与不相等：宽松比较的陷阱

相等(==)和不相等(!=)运算符会在比较前进行类型转换，这可能导致意外的结果：

javascript 复制代码

// 相等运算符示例
console.log(5 == "5");      // true - 数字5被转换为字符串"5"进行比较
console.log(0 == false);    // true - false被转换为0进行比较
console.log(null == undefined); // true - 这两个值被视为相等

// 不相等运算符示例
console.log(5 != "5");      // false - 因为5等于"5"
console.log(0 != false);    // false - 因为0等于false

重要提示：宽松比较可能导致难以发现的bug，因为它会进行隐式类型转换。

严格相等：类型安全的保障

严格相等(===)和严格不相等(!==)不会进行类型转换，要求值和类型都相同：

javascript 复制代码

// 严格相等运算符示例
console.log(5 === "5");     // false - 类型不同，直接返回false
console.log(0 === false);   // false - 类型不同
console.log(null === undefined); // false - 类型不同

// 严格不相等运算符示例
console.log(5 !== "5");     // true - 类型不同
console.log(0 !== false);   // true - 类型不同

// 正确的比较方式
console.log(5 === 5);      // true
console.log("hello" === "hello"); // true

最佳实践：在大多数情况下，推荐使用严格相等运算符(===和!==)，以避免意外的类型转换。

大小比较运算符

大小比较运算符用于比较数值大小，但在比较不同类型时会进行类型转换：

javascript 复制代码

// 基本大小比较
console.log(10 > 5);        // true
console.log(10 < 5);        // false
console.log(10 >= 10);      // true
console.log(10 <= 10);      // true

// 不同类型的大小比较
console.log("10" > 5);      // true - 字符串"10"被转换为数字10
console.log("apple" > "banana"); // true - 基于字符编码的比较
console.log("2" > 10);      // false - 字符串"2"被转换为数字2

不同数据类型的比较规则

JavaScript中的比较运算符遵循特定的类型转换规则：

数字与字符串：字符串会被转换为数字
布尔值与数字：布尔值true转换为1，false转换为0
对象与非对象：对象会尝试转换为原始值
null与undefined：在相等比较中视为相等，但在其他比较中不同

javascript 复制代码

// 类型转换示例
console.log(null > 0);      // false - null被转换为0
console.log(null >= 0);     // true - null被转换为0
console.log(null == 0);     // false - 特殊规则：null只等于undefined

console.log(undefined > 0);  // false - undefined被转换为NaN
console.log(undefined < 0);  // false - undefined被转换为NaN
console.log(undefined == 0); // false - 特殊规则：undefined只等于null

理解这些规则能帮助你避免常见的比较错误，编写更健壮的JavaScript代码。记住，当类型安全很重要时，优先使用严格相等运算符。

逻辑运算符：控制程序流程的利器

在JavaScript中，逻辑运算符是控制程序流程的重要工具，主要包括逻辑与(&&) 、**逻辑或(||)和逻辑非(!)**三种。

逻辑运算符基础

逻辑运算符的真值表如下：

| A | B | A && B | A || B | !A | |---|---|--------|--------|-----| | 真 | 真 | 真 | 真 | 假 | | 真 | 假 | 假 | 真 | 假 | | 假 | 真 | 假 | 真 | 真 | | 假 | 假 | 假 | 假 | 真 |

短路求值机制

JavaScript的逻辑运算符采用短路求值机制，这意味着：

javascript 复制代码

// 逻辑与(&&)：如果第一个操作数为假，则不会评估第二个操作数
let x = 0;
let y = 10;
console.log(x && y); // 输出: 0 (x为假，不会评估y)

// 逻辑或(||)：如果第一个操作数为真，则不会评估第二个操作数
let a = 5;
let b = 10;
console.log(a || b); // 输出: 5 (a为真，不会评估b)

实际应用场景

javascript 复制代码

// 1. 在if语句中的应用
let isLoggedIn = true;
let hasPermission = false;

if (isLoggedIn && hasPermission) {
    console.log("访问 granted");
} else {
    console.log("访问 denied"); // 会执行此代码
}

// 2. 在三元运算符中的应用
let age = 18;
let canVote = age >= 18 ? "可以投票" : "不可以投票";
console.log(canVote); // 输出: "可以投票"

// 3. 在循环中的应用
let i = 0;
while (i < 5 && console.log(i)) {
    i++;
}
// 输出: 0, 1, 2, 3, 4

真值(truthy)和假值(falsy)

JavaScript中的值可分为真值和假值：

javascript 复制代码

// 假值(falsy)包括: false, 0, "" (空字符串), null, undefined, NaN
// 其他所有值都是真值(truthy)

console.log(Boolean(0));      // false
console.log(Boolean(""));     // false
console.log(Boolean(false));  // false
console.log(Boolean(null));   // false
console.log(Boolean(undefined)); // false
console.log(Boolean(NaN));    // false

console.log(Boolean(1));      // true
console.log(Boolean("hello")); // true
console.log(Boolean({}));     // true

理解逻辑运算符和真值/假值的概念对于编写简洁高效的JavaScript代码至关重要，它们是控制程序流程的强大工具。

运算符优先级：理解复杂表达式的执行顺序

在JavaScript中，运算符优先级决定了表达式中的计算顺序，这就像数学中的运算顺序规则一样。了解这些规则对编写正确的代码至关重要。

JavaScript运算符优先级基本规则

运算符优先级从高到低大致如下：

括号 () - 最高优先级
一元运算符（如 !, +, -）
乘除法 *, /, %
加减法 +, -
关系运算符 <, >, <=, >=
相等性运算符 ==, !=, ===, !==
逻辑与 &&
逻辑或 ||

使用括号控制运算顺序

括号可以明确指定运算顺序，提高代码可读性：

javascript 复制代码

// 不使用括号
let result1 = 10 + 5 * 2;  // 结果是20，乘法优先级高于加法

// 使用括号
let result2 = (10 + 5) * 2;  // 结果是30，括号改变了运算顺序

常见优先级陷阱及避免方法

javascript 复制代码

// 陷阱1：逻辑与(&&)优先级高于逻辑或(||)
let x = true || false && false;  // 结果是true，因为&&优先级高于||
// 等价于: x = true || (false && false);

// 避免方法：使用括号明确意图
let y = (true || false) && false;  // 结果是false

// 陷阱2：相等性运算符优先级低于比较运算符
let z = 5 > 3 == true;  // 结果是true，因为>优先级高于==
// 等价于: z = (5 > 3) == true;

复杂表达式的拆分技巧

将复杂表达式拆分为多个简单表达式可以提高代码可维护性：

javascript 复制代码

// 拆分前
let complex = (a + b) * (c - d) / (e + f);

// 拆分后
let sum1 = a + b;
let diff1 = c - d;
let sum2 = e + f;
let complex = (sum1 * diff1) / sum2;

记住，代码首先是给人阅读的，其次才是给计算机执行的。合理使用运算符优先级规则和括号，可以写出既正确又易于理解的代码。

实战应用：构建实用功能

JavaScript运算符和表达式是构建交互式应用的基础，通过实际案例我们展示了它们从简单计算器到复杂数据处理的广泛应用。算术运算符实现了数值处理，比较运算符构建了条件逻辑，而逻辑运算符则控制程序流程。这些技术不仅提升了代码效率，还增强了用户体验。

深入学习JavaScript运算符，建议参考MDN Web文档的运算符章节，并通过LeetCode或FreeCodeCamp的练习题巩固知识。构建个人项目是最佳学习方式，尝试创建一个包含表单验证和动态UI的网页应用，在实践中掌握运算符的高级用法。

记住，熟练运用运算符不仅能写出更简洁高效的代码，还能培养逻辑思维能力。持续探索和实践，你将逐步从语法使用者成长为JavaScript高手。