详解JavaScript的表达式与运算符

一、一元运算符

第1步：理解递增与递减的前置/后置差异

递增 ++ 和递减 -- 是一元运算符，用于将变量的值增加或减少 1。它们分为前置（先操作后赋值）和后置（先赋值后操作）两种形式。

var box = 100;
// 前置：先自增，再返回结果
var age = ++box; // box变为101，age为101

// 后置：先返回值，再自增
var height = box++; // height先获取101，然后box变为102

在没有赋值操作的独立语句中（如单独写 ++box;），前置与后置的效果相同。但在复杂表达式中，顺序至关重要。

第2步：处理正负号与类型转换

正号 + 和负号 - 除了取正负额外，还可强制将数字字符串转换为数值类型。若字符串无法解析为数字，结果为 NaN。

var str = "20";
console.log(typeof str); // string
var num = -str;
console.log(num); // -20 (number)

二、算术运算符

第3步：掌握加减乘除与隐式转换规则

JavaScript的算术运算符包括 +, -, *, /, %。当操作数非数值时，引擎会尝试调用 Number() 进行转换。

• 加法 + 的特殊性： 只要有一个操作数是字符串，+ 就会执行字符串连接而非数学加法。
• 其他运算符： -, *, / 会尝试将操作数转为数字进行计算。

var result1 = 100 + "100"; // "100100" (字符串连接)
var result2 = "100" - 10;  // 90 (数值减法)
var result3 = 5 / 4;       // 1.25

利用括号可以强制控制运算优先级：

var msg = "年龄是：" + (10 + 10); // "年龄是：20"

三、关系运算符

第4步：明确比较时的类型行为

关系运算符 <, >, <=, >= 在比较字符串时，依据字符编码（Unicode）逐位进行比较；比较对象时，优先调用 valueOf() 或 toString()。

console.log("a" > "B"); // true (小写'a'编码97 > 大写'B'编码66)
console.log(3 > 2);     // true

第5步：区分相等 == 与全等 ===

== 执行宽松相等，会在比较前进行类型转换；=== 执行严格相等，要求值和类型均一致。

console.log('2' == 2);   // true (类型转换后值相等)
console.log('2' === 2);  // false (类型不同)
console.log(null == undefined); // true (特例)
console.log(NaN == NaN);        // false (NaN不与任何值相等，包括自身)

四、逻辑运算符

第6步：应用逻辑与 && 的短路求值

&& 从左向右计算，若第一个操作数为“假值”（falsy），则直接返回该值，不再计算第二个操作数（短路）。若第一个为“真值”，则返回第二个操作数的值。

var r1 = {} && (5 > 4); // true (第一个真，返回第二个结果)
var r2 = false && {};   // false (第一个假，短路返回false)

第7步：应用逻辑或 || 的短路求值

|| 同样从左向右计算。若第一个操作数为“真值”，直接返回该值（短路）；若为“假值”，则返回第二个操作数的值。

var r3 = {} || true;    // [object Object] (第一个真，直接返回)
var r4 = null || "default"; // "default" (第一个假，返回第二个)

第8步：理解逻辑非 ! 的真值表

! 先将操作数转换为布尔值，然后取反。常见的假值包括： false, 0, "" (空字符串), null, undefined, NaN。其余所有值（包括空对象 {}）转换为 true。

console.log(!{});         // false (非空对象为true，取反为false)
console.log(!"hello");    // false
console.log(!0);          // true

五、位运算符

第9步：在二进制层面操作数值

位运算符将操作数转换为32位有符号整数，并对每一位进行操作。结果再转回浮点数。

• ~ (位非)： ~x 等同于 -(x + 1)。
  ~25 结果为 -26。
• & (位与)： 两位均为1才得1。
  25 & 3 (11001 & 00011) 结果为 1。
• | (位或)： 有一位为1即得1。
  25 | 3 结果为 27。
• ^ (异或)： 两位不同时得1。
  25 ^ 3 结果为 26。
• << (左移)： 相当于乘以 2 的幂。
  25 << 3 相当于 25 * 8，结果为 200。
• >> (有符号右移)： 相当于除以 2 的幂，保留符号位。
  24 >> 2 相当于 24 / 4，结果为 6。
• >>> (无符号右移)： 对于正数同 >>，对于负数会将符号位移补0。

六、其他重要运算符

第10步：使用三元运算符与逗号运算符

三元运算符 ? : 根据条件返回两个值中的一个，常用于简化简单的 if-else 逻辑。

var status = (3 > 4) ? "正确" : "错误";
console.log(status); // "错误"

逗号运算符 , 按顺序执行多个表达式，并返回最后一个表达式的值。也可用于在同一行声明多个变量。

var a = 1, b = 2, c = 3;
var max = (a > b ? a : b), (c > (a>b?a:b) ? c : (a>b?a:b));