JavaScript基础教程：运算符与数学运算详解-优快云博客

JavaScript基础教程：运算符与数学运算详解

【免费下载链接】en.javascript.info Modern JavaScript Tutorial 项目地址: https://gitcode.com/gh_mirrors/en/en.javascript.info

引言：为什么运算符如此重要？

在日常的JavaScript开发中，运算符（Operators）是我们与数据交互的核心工具。无论是简单的数学计算、字符串拼接，还是复杂的逻辑判断，都离不开各种运算符的正确使用。然而，JavaScript的运算符系统有着许多独特的特性和陷阱，即使是经验丰富的开发者也可能在这里栽跟头。

本文将带你深入理解JavaScript中的各类运算符，从基础的数学运算到复杂的比较操作，让你彻底掌握这个看似简单却暗藏玄机的重要概念。

一、运算符基础概念

1.1 操作数（Operand）与运算符（Operator）

在深入了解具体运算符之前，我们需要先理解几个基本术语：

操作数（Operand）：运算符作用的对象
运算符（Operator）：对操作数执行操作的符号
一元运算符（Unary Operator）：只有一个操作数的运算符
二元运算符（Binary Operator）：有两个操作数的运算符

// 一元运算符示例
let x = 1;
x = -x; // - 在这里是一元负号运算符
console.log(x); // -1

// 二元运算符示例  
let a = 5, b = 2;
console.log(a + b); // 7，+ 在这里是二元加法运算符

1.2 运算符优先级（Precedence）

当表达式中有多个运算符时，JavaScript会按照优先级顺序执行运算。优先级高的运算符先执行，优先级相同的从左到右执行。

console.log(1 + 2 * 3); // 7，不是9
console.log((1 + 2) * 3); // 9，括号改变优先级

二、数学运算符详解

2.1 基本算术运算符

JavaScript支持所有基本的数学运算：

运算符	名称	示例	结果
`+`	加法	`5 + 2`	`7`
`-`	减法	`5 - 2`	`3`
`*`	乘法	`5 * 2`	`10`
`/`	除法	`5 / 2`	`2.5`
`%`	取余	`5 % 2`	`1`
`**`	幂运算	`2 ** 3`	`8`

// 基本运算示例
console.log(10 + 5);    // 15
console.log(10 - 5);    // 5  
console.log(10 * 5);    // 50
console.log(10 / 5);    // 2
console.log(10 % 3);    // 1
console.log(2 ** 4);    // 16

// 幂运算的特殊用法
console.log(4 ** (1/2)); // 2，平方根
console.log(8 ** (1/3)); // 2，立方根

2.2 特殊的数值

JavaScript中有几个特殊的数值需要特别注意：

// Infinity（无穷大）
console.log(1 / 0);          // Infinity
console.log(-1 / 0);         // -Infinity
console.log(Infinity > 1000); // true

// NaN（Not a Number）
console.log("abc" / 2);      // NaN
console.log(NaN + 1);        // NaN，具有传染性
console.log(NaN === NaN);    // false，NaN不等于自身

// 检测NaN的正确方法
console.log(isNaN(NaN));     // true
console.log(Number.isNaN(NaN)); // true（ES6推荐）

三、字符串与运算符的奇妙结合

3.1 字符串连接（Concatenation）

+ 运算符在遇到字符串时会执行连接操作：

let name = "John";
let greeting = "Hello, " + name + "!";
console.log(greeting); // "Hello, John!"

// 任何类型与字符串相加都会转换为字符串
console.log("2" + 2);      // "22"
console.log(2 + "2");      // "22"  
console.log(true + "text"); // "truetext"

3.2 其他运算符的字符串处理

其他算术运算符会将字符串转换为数字：

console.log("6" - "2");    // 4
console.log("6" / "2");    // 3
console.log("6" * "2");    // 12

// 注意与加法的区别
console.log("6" + "2");    // "62"，不是8！

四、赋值运算符与修改运算符

4.1 基本赋值与链式赋值

// 基本赋值
let x = 10;

// 链式赋值（从右到左执行）
let a, b, c;
a = b = c = 5 + 3;
console.log(a, b, c); // 8, 8, 8

// 赋值表达式返回值
let num = 0;
console.log(num = 5); // 5，赋值操作返回被赋的值

4.2 复合赋值运算符

为了简化代码，JavaScript提供了复合赋值运算符：

let n = 2;

n += 5; // n = n + 5 → 7
n -= 3; // n = n - 3 → 4  
n *= 2; // n = n * 2 → 8
n /= 4; // n = n / 4 → 2
n %= 3; // n = n % 3 → 2
n **= 3; // n = n ** 3 → 8

console.log(n); // 8

五、递增与递减运算符

5.1 基本用法

let counter = 0;

counter++; // 后置递增，返回旧值
console.log(counter); // 1

++counter; // 前置递增，返回新值  
console.log(counter); // 2

counter--; // 后置递减
console.log(counter); // 1

--counter; // 前置递减
console.log(counter); // 0

5.2 前置与后置的区别

let a = 1;
let b = a++; // b = 1, a = 2

let c = 1;  
let d = ++c; // d = 2, c = 2

console.log(a, b, c, d); // 2, 1, 2, 2

5.3 在表达式中的使用

let counter = 1;

// 前置递增：先递增再使用
console.log(++counter * 2); // 4

// 后置递增：先使用再递增  
console.log(counter++ * 2); // 4，但counter变为3

// 推荐写法：一行只做一个操作
let result = counter * 2;
counter++;
console.log(result); // 6

六、比较运算符深度解析

6.1 基本比较运算符

运算符	描述	示例	结果
`>`	大于	`5 > 3`	`true`
`<`	小于	`5 < 3`	`false`
`>=`	大于等于	`5 >= 5`	`true`
`<=`	小于等于	`5 <= 3`	`false`
`==`	相等	`'5' == 5`	`true`
`!=`	不相等	`'5' != 5`	`false`
`===`	严格相等	`'5' === 5`	`false`
`!==`	严格不相等	`'5' !== 5`	`true`

6.2 字符串比较规则

// 按字典顺序比较
console.log('Z' > 'A');    // true
console.log('Glow' > 'Glee'); // true（逐个字符比较）
console.log('Bee' > 'Be'); // true（长度不同）

// 大小写敏感
console.log('a' > 'A');    // true（小写字母编码更大）

6.3 类型转换比较

// 不同类型比较时转换为数字
console.log('2' > 1);      // true，'2' → 2
console.log('01' == 1);    // true，'01' → 1

// 布尔值转换
console.log(true == 1);    // true，true → 1
console.log(false == 0);   // true，false → 0

// 有趣的例子
let x = 0;
let y = "0";
console.log(x == y);       // true，都转换为0
console.log(Boolean(x));   // false
console.log(Boolean(y));   // true

6.4 null和undefined的特殊行为

// 严格相等检查
console.log(null === undefined); // false

// 非严格相等检查
console.log(null == undefined);  // true

// 数学比较（转换为数字）
console.log(null > 0);   // false，null → 0
console.log(null == 0);  // false，特殊规则
console.log(null >= 0);  // true，null → 0

// undefined的奇怪行为
console.log(undefined > 0);  // false，undefined → NaN
console.log(undefined < 0);  // false
console.log(undefined == 0); // false

七、运算符优先级完整指南

以下是JavaScript运算符优先级表（从高到低）：

mermaid

7.1 常见优先级陷阱

// 乘法优先级高于加法
console.log(2 + 3 * 4);    // 14，不是20

// 一元运算符优先级高
let x = 1;
console.log(-x++);         // -1，相当于-(x++)

// 赋值优先级很低
let a, b;
a = b = 2 + 2;            // 先计算2+2，然后赋值

// 逗号运算符优先级最低
let y = (1 + 2, 3 + 4);   // y = 7

八、实用技巧与最佳实践

8.1 使用严格相等比较

// 推荐使用 === 和 !==
console.log(0 === false);    // false
console.log('' === false);   // false
console.log(null === undefined); // false

// 避免类型转换的意外行为
function compare(a, b) {
    return a === b; // 总是明确比较类型和值
}

8.2 数值转换的最佳实践

// 字符串转数字的几种方法
let str = "123";

console.log(Number(str));     // 123，明确转换
console.log(+str);           // 123，使用一元加
console.log(parseInt(str));  // 123，解析整数
console.log(parseFloat(str)); // 123.0，解析浮点数

// 处理用户输入
let userInput = prompt("请输入数字:");
let number = +userInput; // 转换为数字

if (isNaN(number)) {
    console.log("输入的不是有效数字");
} else {
    console.log("输入的数字是:", number);
}

8.3 避免常见的运算符错误

// 错误：混淆 = 和 ==
let value = 5;
if (value = 10) { // 总是为true，因为赋值成功
    console.log("这总是会执行");
}

// 正确：使用 == 或 ===
if (value === 10) {
    console.log("值等于10");
}

// 避免链式赋值的可读性问题
// 不推荐：
let i = j = k = 0;

// 推荐：
let i = 0;
let j = 0; 
let k = 0;

// 或者：
let i, j, k;
i = j = k = 0; // 如果必须使用，确保清晰

九、综合实战示例

9.1 计算器函数实现

function calculator(a, b, operation) {
    switch (operation) {
        case '+':
            return a + b;
        case '-':
            return a - b;
        case '*':
            return a * b;
        case '/':
            return b !== 0 ? a / b : '除数不能为0';
        case '%':
            return a % b;
        case '**':
            return a ** b;
        default:
            return '不支持的操作';
    }
}

// 测试计算器
console.log(calculator(10, 5, '+'));  // 15
console.log(calculator(10, 5, '-'));  // 5
console.log(calculator(10, 5, '*'));  // 50
console.log(calculator(10, 5, '/'));  // 2
console.log(calculator(10, 0, '/'));  // "除数不能为0"
console.log(calculator(2, 3, '**'));  // 8

9.2 安全的数值比较函数

function safeCompare(a, b) {
    // 处理null和undefined
    if (a === null || a === undefined || 
        b === null || b === undefined) {
        return a === b;
    }
    
    // 处理NaN
    if (isNaN(a) && isNaN(b)) {
        return true;
    }
    
    // 常规比较
    return a === b;
}

// 测试安全比较
console.log(safeCompare(NaN, NaN));      // true
console.log(safeCompare(null, undefined)); // false
console.log(safeCompare(5, "5"));        // false
console.log(safeCompare(5, 5));          // true

9.3 运算符优先级练习

// 分析复杂表达式的结果
let a = 2;
let b = 3;
let c = 4;

let result1 = a + b * c;         // 2 + (3 * 4) = 14
let result2 = (a + b) * c;       // (2 + 3) * 4 = 20  
let result3 = a * b ** c;        // 2 * (3 ** 4) = 2 * 81 = 162
let result4 = (a * b) ** c;      // (2 * 3) ** 4 = 6 ** 4 = 1296
let result5 = -a ** b;           // -(a ** b) = -(2 ** 3) = -8
let result6 = (-a) ** b;         // (-2) ** 3 = -8

console.log(result1, result2, result3, result4, result5, result6);

总结

通过本文的深入学习，你应该已经掌握了JavaScript运算符的核心概念和使用技巧。记住这些关键点：

理解优先级：复杂的表达式要清楚运算符的执行顺序
严格比较：尽量使用 === 和 !== 避免类型转换问题
注意特殊值：正确处理 NaN、Infinity、null 和 undefined
代码可读性：避免过于复杂的表达式，适当使用括号
实践出真知：多写代码，多测试，加深理解

运算符是JavaScript编程的基础，掌握好它们将为你的编程之路打下坚实的基础。现在就去实践这些知识吧！

【免费下载链接】en.javascript.info Modern JavaScript Tutorial 项目地址: https://gitcode.com/gh_mirrors/en/en.javascript.info

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考