JavaScript 运算符

运算符是操作数据的符号。JavaScript 的运算符分为几大类，各有不同的用途和规则。

算术运算符

最基本的数学运算：

javascript 
document.write('10 + 5 = ' + (10 + 5) + '<br>');  // 15  加
document.write('10 - 5 = ' + (10 - 5) + '<br>');  // 5   减
document.write('10 * 5 = ' + (10 * 5) + '<br>');  // 50  乘
document.write('10 / 5 = ' + (10 / 5) + '<br>');  // 2   除
document.write('10 % 3 = ' + (10 % 3) + '<br>');  // 1   取余（模运算）
document.write('2 ** 3 = ' + (2 ** 3) + '<br>');  // 8   幂运算（2 的 3 次方）

取余运算的常见用途

javascript 
// 判断奇偶数
function isEven(n) {
  return n % 2 === 0; // 偶数余数为 0
}

document.write('isEven(4) = ' + isEven(4) + '<br>');
document.write('isEven(7) = ' + isEven(7) + '<br>');

// 循环限制（0~N-1 内循环）
const currentIndex = 3;
const arrayLength = 5;
const nextIndex = (currentIndex + 1) % arrayLength;
document.write('(3 + 1) % 5 = ' + nextIndex + '<br>');

赋值运算符

javascript 
let x = 10;
document.write('初始 x = ' + x + '<br>');

x += 5;   // x = x + 5  → 15
document.write('x += 5 → ' + x + '<br>');
x -= 3;   // x = x - 3  → 12
document.write('x -= 3 → ' + x + '<br>');
x *= 2;   // x = x * 2  → 24
document.write('x *= 2 → ' + x + '<br>');
x /= 4;   // x = x / 4  → 6
document.write('x /= 4 → ' + x + '<br>');
x %= 4;   // x = x % 4  → 2
document.write('x %= 4 → ' + x + '<br>');

// 自增自减
let count = 0;
count++;  // 自增 1，count 变为 1
document.write('count++ = ' + count + '<br>');
count--;  // 自减 1，count 变为 0
document.write('count-- = ' + count + '<br>');

++ 和 -- 有前置和后置两种写法，行为不同：

javascript 
let a = 5;
const b = a++;  // 后置：先赋值 b=5，再自增 a=6
document.write('b = ' + b + ', a = ' + a + '<br>');
const c = ++a;  // 前置：先自增 a=7，再赋值 c=7
document.write('c = ' + c + ', a = ' + a + '<br>');

比较运算符

比较两个值，返回布尔值 true 或 false：

javascript 
document.write('5 > 3 = ' + (5 > 3) + '<br>');    // true
document.write('5 < 3 = ' + (5 < 3) + '<br>');    // false
document.write('5 >= 5 = ' + (5 >= 5) + '<br>');   // true
document.write('5 <= 4 = ' + (5 <= 4) + '<br>');   // false
document.write('5 === 5 = ' + (5 === 5) + '<br>');  // true（严格相等）
document.write('5 !== 3 = ' + (5 !== 3) + '<br>');  // true（严格不等）

=== vs ==

运算符比较方式示例
===严格相等，类型和值都须相同5 === '5' → false
==宽松相等，会进行类型转换5 == '5' → true

始终使用 === 和 !==。== 的类型转换规则极其复杂且容易踩坑（如 0 == '' 为 true）。唯一的例外是 == null：它等价于 value === null || value === undefined，是一个被广泛认可的简洁写法。

逻辑运算符

javascript 
// 与（AND）：两边都为 true 才为 true
document.write('true && true = ' + (true && true) + '<br>');   // true
document.write('true && false = ' + (true && false) + '<br>');  // false

// 或（OR）：至少一边为 true 即为 true
document.write('true || false = ' + (true || false) + '<br>');  // true
document.write('false || false = ' + (false || false) + '<br>'); // false

// 非（NOT）：取反
document.write('!true = ' + !true + '<br>');          // false
document.write('!false = ' + !false + '<br>');         // true

短路求值

&& 和 || 的求值逻辑：

javascript 
// && 遇到第一个假值就停
false && document.write('不会执行'); // 不打印

// || 遇到第一个真值就停
true || document.write('不会执行');  // 不打印

实用场景

javascript 
// 提供默认值（||）
const userInput = '';
const name1 = userInput || '匿名用户';
document.write('name1 = ' + name1 + '<br>');

// 空值合并：仅在 null/undefined 时取默认值（??）
const name2 = userInput ?? '匿名用户';
document.write('name2 = ' + name2 + '<br>');

// 条件执行（&&）
const isLoggedIn = true;
isLoggedIn && document.write('显示仪表盘<br>');

??（空值合并运算符）和 || 的区别：|| 将 0、''、false 也视为假值；?? 只在 null/undefined 时使用默认值。当你需要区分”没有值”和”值为 0”时，应使用 ??。

三元运算符（条件运算符）

条件 ? 值1 : 值2 ——如果条件为真取值1，否则取值2：

javascript 
const age = 20;
const status = age >= 18 ? '成年' : '未成年';
document.write(status + '<br>'); // "成年"

const isLoggedIn = true;
const userName = '张三';
const greeting = isLoggedIn ? `欢迎回来，${userName}` : '请先登录';
document.write(greeting + '<br>');

运算符优先级

当多个运算符同时出现时，优先级决定计算顺序。例如乘除优先于加减：

javascript 
document.write('2 + 3 * 4 = ' + (2 + 3 * 4) + '<br>'); // 14（不是 20）
document.write('(2 + 3) * 4 = ' + ((2 + 3) * 4) + '<br>'); // 20（括号改变顺序）

规则很多，不必全部记忆。不确定优先级时加括号——这是最简单最安全的方法。括号中的表达式总是最先计算。

字符串拼接

运算符不止用于数字：

javascript 
// + 号用于字符串表示拼接
document.write('Hello' + ' ' + 'World' + '<br>'); // "Hello World"

// 数字 + 字符串 → 字符串
document.write('答案是' + 42 + '<br>'); // "答案是42"

// 模板字面量（推荐）比 + 拼接更清晰
const answer = 42;
document.write(`答案是${answer}` + '<br>'); // "答案是42"