JavaScript 运算符：数据操作的工具箱

运算符就像是程序员的工具箱里的各种工具——有用来计算数字的工具（算术运算符），有用来比较大小的工具（比较运算符），还有用来做决策的工具（逻辑运算符）。掌握这些工具，才能灵活地操作数据，构建复杂的程序逻辑。

算术运算符

算术运算符用于执行数学计算，就像我们小学学过的加减乘除一样。

基础算术运算符

let a = 10;
let b = 3;

// 加法 +
console.log(a + b); // 13

// 减法 -
console.log(a - b); // 7

// 乘法 *
console.log(a * b); // 30

// 除法 /
console.log(a / b); // 3.3333333333333335

// 取余（模运算）%
console.log(a % b); // 1（10 除以 3 余 1）

// 幂运算 **（ES7）
console.log(2 ** 3); // 8（2 的 3 次方）
console.log(5 ** 2); // 25（5 的 2 次方）

取余运算符的实际应用

取余运算符特别有用，常用于判断奇偶、循环索引等场景：

// 判断奇偶
function isEven(num) {
  return num % 2 === 0;
}

console.log(isEven(4)); // true
console.log(isEven(7)); // false

// 循环索引（控制在范围内）
let items = ["apple"， "banana"， "orange"];
let index = 5;
console.log(items[index % items.length]); // "orange"（5 % 3 = 2）

// 判断是否是某个数的倍数
function isMultipleOf(num， divisor) {
  return num % divisor === 0;
}

console.log(isMultipleOf(15， 5)); // true
console.log(isMultipleOf(16， 5)); // false

字符串拼接

加号 + 在遇到字符串时会变成连接符：

// 数字相加
console.log(5 + 3); // 8

// 字符串拼接
console.log("Hello" + " " + "World"); // "Hello World"

// 字符串与数字（数字会被转换为字符串）
console.log("Score: " + 100); // "Score: 100"
console.log("5" + 3); // "53"（不是 8！）

// 其他运算符不会拼接，会尝试转换为数字
console.log("10" - 5); // 5
console.log("10" * 2); // 20
console.log("10" / 2); // 5

一元运算符

一元运算符只需要一个操作数：

// 一元加号 +（尝试转换为数字）
console.log(+"42"); // 42
console.log(+"3.14"); // 3.14
console.log(+true); // 1
console.log(+false); // 0
console.log(+"hello"); // NaN

// 一元减号 -（取负）
console.log(-5); // -5
console.log(-(-5)); // 5
console.log(-"10"); // -10

// 递增 ++
let x = 5;
console.log(++x); // 6（先增后用）
console.log(x); // 6

let y = 5;
console.log(y++); // 5（先用后增）
console.log(y); // 6

// 递减 --
let a = 10;
console.log(--a); // 9（先减后用）
console.log(a); // 9

let b = 10;
console.log(b--); // 10（先用后减）
console.log(b); // 9

赋值运算符

赋值运算符用于给变量赋值，基础的赋值运算符是等号 =。

基础赋值

let x = 10; // 将 10 赋值给 x
let y = x; // 将 x 的值赋值给 y

console.log(x， y); // 10 10

复合赋值运算符

复合赋值运算符结合了算术运算和赋值：

let num = 10;

// 加法赋值 +=
num += 5; // 等同于 num = num + 5
console.log(num); // 15

// 减法赋值 -=
num -= 3; // 等同于 num = num - 3
console.log(num); // 12

// 乘法赋值 *=
num *= 2; // 等同于 num = num * 2
console.log(num); // 24

// 除法赋值 /=
num /= 4; // 等同于 num = num / 4
console.log(num); // 6

// 取余赋值 %=
num %= 4; // 等同于 num = num % 4
console.log(num); // 2

// 幂赋值 **=
num **= 3; // 等同于 num = num ** 3
console.log(num); // 8

比较运算符

比较运算符用于比较两个值，返回布尔值（true 或 false）。

相等性比较

JavaScript 有两组相等性运算符，理解它们的区别非常重要：

// 相等 ==（值相等，允许类型转换）
console.log(5 == 5); // true
console.log(5 == "5"); // true（"5" 被转换为数字 5）
console.log(0 == false); // true（false 被转换为 0）
console.log(null == undefined); // true

// 全等 ===（值和类型都必须相等）
console.log(5 === 5); // true
console.log(5 === "5"); // false（类型不同）
console.log(0 === false); // false（类型不同）
console.log(null === undefined); // false（类型不同）

// 不等 !=（值不等，允许类型转换）
console.log(5 != 3); // true
console.log(5 != "5"); // false（"5" 被转换为数字 5）

// 不全等 !==（值或类型不等）
console.log(5 !== 3); // true
console.log(5 !== "5"); // true（类型不同）

最佳实践：始终使用 === 和 !==，避免类型转换带来的混淆。

大小比较

let a = 10;
let b = 5;

// 大于 >
console.log(a > b); // true
console.log(5 > 10); // false

// 小于 <
console.log(a < b); // false
console.log(5 < 10); // true

// 大于等于 >=
console.log(10 >= 10); // true
console.log(10 >= 5); // true
console.log(3 >= 5); // false

// 小于等于 <=
console.log(5 <= 10); // true
console.log(10 <= 10); // true
console.log(15 <= 10); // false

字符串比较

字符串比较是按照字典顺序（Unicode 编码）进行的：

console.log("apple" < "banana"); // true
console.log("cat" > "bat"); // true
console.log("a" < "b"); // true

// 注意：大写字母的 Unicode 值小于小写字母
console.log("A" < "a"); // true
console.log("Z" < "a"); // true

// 比较字符串长度
let str1 = "hello";
let str2 = "world";
console.log(str1.length === str2.length); // true

逻辑运算符

逻辑运算符用于组合多个条件，主要有三个：AND（与）、OR（或）、NOT（非）。

逻辑与 &&

只有所有条件都为真时，结果才为真。就像安全门需要同时满足多个条件才能打开。

// 基本用法
console.log(true && true); // true
console.log(true && false); // false
console.log(false && true); // false
console.log(false && false); // false

// 实际应用
let age = 25;
let hasLicense = true;

if (age >= 18 && hasLicense) {
  console.log("You can drive"); // 会执行
}

// 多个条件
let score = 85;
let attendance = 90;
let hasProject = true;

if (score >= 80 && attendance >= 85 && hasProject) {
  console.log("You passed with distinction!"); // 会执行
}

逻辑或 ||

只要有一个条件为真，结果就为真。就像多个入口，走任何一个都能进入。

// 基本用法
console.log(true || true); // true
console.log(true || false); // true
console.log(false || true); // true
console.log(false || false); // false

// 实际应用
let isWeekend = true;
let isHoliday = false;

if (isWeekend || isHoliday) {
  console.log("You can rest!"); // 会执行
}

// 设置默认值
function greet(name) {
  name = name || "Guest"; // 如果没有 name，使用 "Guest"
  console.log("Hello， " + name);
}

greet("Alice"); // "Hello， Alice"
greet(); // "Hello， Guest"

逻辑非 !

取反操作，真变假，假变真。

// 基本用法
console.log(!true); // false
console.log(!false); // true

// 双重否定
console.log(!!true); // true
console.log(!!0); // false
console.log(!!"hello"); // true（非空字符串是真值）

// 实际应用
let isLoggedIn = false;

if (!isLoggedIn) {
  console.log("Please log in"); // 会执行
}

// 检查空值
let value = null;
if (!value) {
  console.log("Value is empty"); // 会执行
}

短路求值

逻辑运算符有一个重要特性：短路求值。

// && 短路：如果第一个是假值，不会计算第二个
let result1 = false && console.log("This won't run");
// console.log 不会执行

let result2 = true && console.log("This will run");
// console.log 会执行，输出 "This will run"

// || 短路：如果第一个是真值，不会计算第二个
let result3 = true || console.log("This won't run");
// console.log 不会执行

let result4 = false || console.log("This will run");
// console.log 会执行，输出 "This will run"

// 实际应用：条件执行
let user = { name: "Emma" };
user && console.log(user.name); // 输出 "Emma"

let noUser = null;
noUser && console.log(noUser.name); // 不执行（避免错误）

// 实际应用：默认值
let username = "";
let displayName = username || "Anonymous";
console.log(displayName); // "Anonymous"

空值合并运算符 ??（ES2020）

?? 只在左侧为 null 或 undefined 时返回右侧的值，比 || 更精确：

// || 会把所有假值都替换
let count = 0;
console.log(count || 10); // 10（0 是假值）

// ?? 只在 null/undefined 时替换
console.log(count ?? 10); // 0（count 不是 null/undefined）

let value = null;
console.log(value ?? "default"); // "default"

let value2 = undefined;
console.log(value2 ?? "default"); // "default"

let value3 = "";
console.log(value3 ?? "default"); // ""（空字符串不是 null/undefined）

条件（三元）运算符

条件运算符是 JavaScript 中唯一的三元运算符，可以简化 if-else 语句：

// 语法：condition ? valueIfTrue : valueIfFalse

let age = 20;
let canVote = age >= 18 ? "Yes" : "No";
console.log(canVote); // "Yes"

// 等价于:
let canVote2;
if (age >= 18) {
  canVote2 = "Yes";
} else {
  canVote2 = "No";
}

// 更多示例
let score = 85;
let grade = score >= 90 ? "A" : score >= 80 ? "B" : score >= 70 ? "C" : "D";
console.log(grade); // "B"

// 实际应用
function getDiscount(isMember， amount) {
  return isMember ? amount * 0.9 : amount;
}

console.log(getDiscount(true， 100)); // 90
console.log(getDiscount(false， 100)); // 100

typeof 运算符

typeof 用于检查值的类型：

console.log(typeof 42); // "number"
console.log(typeof "hello"); // "string"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof Symbol()); // "symbol"
console.log(typeof 123n); // "bigint"
console.log(typeof null); // "object"（历史遗留bug）
console.log(typeof {}); // "object"
console.log(typeof []); // "object"
console.log(typeof function () {}); // "function"

// 实际应用
function processValue(value) {
  if (typeof value === "number") {
    return value * 2;
  } else if (typeof value === "string") {
    return value.toUpperCase();
  } else {
    return value;
  }
}

console.log(processValue(5)); // 10
console.log(processValue("hello")); // "HELLO"

逗号运算符

逗号运算符依次执行表达式，返回最后一个表达式的值：

let a = (1 + 2， 3 + 4);
console.log(a); // 7（返回最后一个表达式的值）

// 在 for 循环中的使用
for (let i = 0， j = 10; i < 5; i++， j--) {
  console.log(i， j);
}
// 0 10
// 1 9
// 2 8
// 3 7
// 4 6

位运算符

位运算符直接操作数字的二进制位，性能高但较少使用：

// 按位与 &
console.log(5 & 3); // 1（0101 & 0011 = 0001）

// 按位或 |
console.log(5 | 3); // 7（0101 | 0011 = 0111）

// 按位异或 ^
console.log(5 ^ 3); // 6（0101 ^ 0011 = 0110）

// 按位非 ~
console.log(~5); // -6（反转所有位）

// 左移 <<
console.log(5 << 1); // 10（0101 << 1 = 1010）

// 右移 >>
console.log(5 >> 1); // 2（0101 >> 1 = 0010）

// 无符号右移 >>>
console.log(-5 >>> 1); // 2147483645

// 实际应用：奇数偶数判断（更快）
function isEvenFast(num) {
  return (num & 1) === 0;
}
console.log(isEvenFast(4)); // true
console.log(isEvenFast(7)); // false

delete 运算符

delete 用于删除对象的属性：

let person = {
  name: "James"，
  age: 30，
  city: "Boston"，
};

delete person.age;
console.log(person); // { name: "James"， city: "Boston" }

// delete 对变量无效
let x = 10;
delete x;
console.log(x); // 10（变量不能被删除）

// delete 数组元素（留下空位）
let arr = [1， 2， 3， 4];
delete arr[1];
console.log(arr); // [1， empty， 3， 4]
console.log(arr.length); // 4（长度不变）

in 运算符

in 检查对象是否有某个属性：

let car = {
  brand: "Toyota"，
  model: "Camry"，
  year: 2023，
};

console.log("brand" in car); // true
console.log("color" in car); // false

// 检查数组索引
let arr = [1， 2， 3];
console.log(0 in arr); // true
console.log(5 in arr); // false

instanceof 运算符

instanceof 检查对象是否是某个类的实例：

let arr = [1， 2， 3];
console.log(arr instanceof Array); // true
console.log(arr instanceof Object); // true

let date = new Date();
console.log(date instanceof Date); // true

function Person(name) {
  this.name = name;
}
let person = new Person("Lily");
console.log(person instanceof Person); // true

可选链运算符 ?.（ES2020）

可选链运算符安全地访问嵌套对象属性，避免报错：

let user = {
  name: "Ryan"，
  address: {
    city: "Seattle"，
  }，
};

// 传统方式（繁琐）
let city = user && user.address && user.address.city;

// 可选链（简洁）
let city2 = user?.address?.city;
console.log(city2); // "Seattle"

// 访问不存在的属性
let country = user?.address?.country;
console.log(country); // undefined（不会报错）

// 可选方法调用
let result = user?.sayHello?.(); // 如果方法存在就调用

// 可选索引访问
let arr = [1， 2， 3];
console.log(arr?.[0]); // 1
console.log(arr?.[10]); // undefined

总结

运算符是编程的基础工具，灵活运用它们能让代码更简洁高效。

本节要点回顾：

• 算术运算符：+、-、*、/、%、**（幂运算）
• 赋值运算符：=、+=、-=、*=、/=、%=、**=
• 比较运算符：==、===、!=、!==、>、<、>=、<=
• 逻辑运算符：&&、||、!，理解短路求值
• 条件运算符：? :，简化 if-else
• typeof：检查数据类型
• 空值合并：??，更精确的默认值设置
• 可选链：?.，安全访问嵌套属性
• 推荐使用 === 和 !== 避免类型转换
• 理解运算符的优先级和结合性（下一节）

---